Update visualizers docs

website/docs/usage/visualizers.jade

@@ -36,6 +36,10 @@ p
 
 +h(3, "dep") Visualizing the dependency parse
 
+p
+    |  The dependency visualizer, #[code dep], shows part-of-speech tags
+    |  and syntactic dependencies.
+
 +code("Dependency example").
     import spacy
     from spacy import displacy
@@ -88,6 +92,10 @@ p
 
 +h(3, "ent") Visualizing the entity recognizer
 
+p
+    |  The entity visualizer, #[code ent], highlights named entities and
+    |  their labels in a text.
+
 +code("Named Entity example").
     import spacy
     from spacy import displacy
@@ -140,7 +148,7 @@ p
 +codepen("f42ec690762b6f007022a7acd6d0c7d4", 300)
 
 p
-    |  The above example uses a little trick: Since the background color values
+    |  The above example uses a little trick: Since the background colour values
     |  are added as the #[code background] style attribute, you can use any
     |  #[+a("https://tympanus.net/codrops/css_reference/background/") valid background value]
     |  or shorthand — including gradients and even images!
@@ -195,7 +203,8 @@ p
 p
     |  If you're working with a #[+a("https://jupyter.org") Jupyter] notebook,
     |  you can use displaCy's "Jupyter mode" to return markup that can be
-    |  rendered in a cell straight away.
+    |  rendered in a cell straight away. When you export your notebook, the
+    |  visualizations will be included as HTML.
 
 +code("Jupyter Example").
     # don't forget to install a model, e.g.: python -m spacy download en
@@ -224,3 +233,46 @@ p
 +h(2, "examples") Usage examples
 
 
++h(2, "manual-usage") Rendering data manually
+
+p
+    |  You can also use displaCy to manually render data. This can be useful if
+    |  you want to visualize output from other libraries, like
+    |  #[+a("http://www.nltk.org") NLTK] or
+    |  #[+a("https://github.com/tensorflow/models/tree/master/syntaxnet") SyntaxNet].
+    |  Simply convert the dependency parse or recognised entities to displaCy's
+    |  format and import #[code DependencyRenderer] or #[code EntityRenderer]
+    |  from #[code spacy.displacy.render]. A renderer class can be is initialised
+    |  with a dictionary of options. To generate the visualization markup, call
+    |  the renderer's #[code render()] method on a list of dictionaries (one
+    |  per visualization).
+
+
++aside-code("Example").
+    from spacy.displacy.render import EntityRenderer
+
+    ex = [{'text': 'But Google is starting from behind.',
+           'ents': [{'start': 4, 'end': 10, 'label': 'ORG'}],
+           'title': None}]
+    renderer = EntityRenderer()
+    html = renderer.render(ex)
+
++code("DependencyRenderer input").
+    [{
+        'words': [
+            {'text': 'This', 'tag': 'DT'},
+            {'text': 'is', 'tag': 'VBZ'},
+            {'text': 'a', 'tag': 'DT'},
+            {'text': 'sentence', 'tag': 'NN'}],
+        'arcs': [
+            {'start': 0, 'end': 1, 'label': 'nsubj', 'dir': 'left'},
+            {'start': 2, 'end': 3, 'label': 'det', 'dir': 'left'},
+            {'start': 1, 'end': 3, 'label': 'attr', 'dir': 'right'}]
+    }]
+
++code("EntityRenderer input").
+    [{
+        'text': 'But Google is starting from behind.',
+        'ents': [{'start': 4, 'end': 10, 'label': 'ORG'}],
+        'title': None
+    }]