ipymarkup

docs.ipynb
627 строк · 130.6 Кб
Перенос по словам
1
{
2
 "cells": [
3
  {
4
   "cell_type": "markdown",
5
   "metadata": {},
6
   "source": [
7
    "# ipymarkup"
8
   ]
9
  },
10
  {
11
   "cell_type": "markdown",
12
   "metadata": {},
13
   "source": [
14
    "Collection of NLP vizualizations for NER and syntax tree markup. Similar to Spacy <a href=\"https://explosion.ai/demos/displacy\">displaCy</a> and <a href=\"https://explosion.ai/demos/displacy-ent\">displaCy ENT</a>."
15
   ]
16
  },
17
  {
18
   "cell_type": "code",
19
   "execution_count": 1,
20
   "metadata": {},
21
   "outputs": [
22
    {
23
     "data": {
24
      "text/html": [
25
       "<table><tr style=\"background: none\"><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_span_box_markup</div></td><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_span_line_markup</div></td><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_span_ascii_markup</div></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a a a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c c c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span></div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a a a</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">b b</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">c c c</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a a a b b c c c\n",
26
       "a──── b── c────</pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a a a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">e<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">e</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">d d d<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #ffb74d;\">d</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">f f<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">f</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">g g<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">g</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">h<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">h</span></span></div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a a a</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">b b</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">c</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 8px\">e</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">e</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">d d d</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">d</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #bcaaa4; padding-bottom: 8px\">f f</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">f</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">g g</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">g</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">h</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">h</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a a a b b c e d d d f f g g h\n",
27
       "a──── b── c e d──── f── g── h</pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a d a b a a a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">d a b a a a b c c c f d<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #ffb74d;\">d</span></span><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b a a a b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c c c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">f<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">f</span></span> d</div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">d a </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">d</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 30px\">b a a a</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 30px\"> b</span></span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">c c c</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #bcaaa4; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">f</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">f</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"> d</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a d a b a a a b c c c f d\n",
28
       "a────────────   c──── f  \n",
29
       "  d──────────────────────\n",
30
       "      b────────          </pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a b b c c d e f g h h i i a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">d<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #ffb74d;\">d</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">e<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">e</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">f<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">f</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">g<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">g</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">h h<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">h</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">i i<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">i</span></span> a</div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 19px\">b b</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">c c</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">d</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">d</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 19px\">e</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">e</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #bcaaa4; padding-bottom: 19px\">f</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">f</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">g</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">g</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 19px\">h h</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">h</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">i i</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">i</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> a</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a b b c c d e f g h h i i a\n",
31
       "a──────────────────────────\n",
32
       "  b── c── d e f g h── i──  </pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_dep_markup</div></td><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_dep_ascii_markup</div></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 85%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">30</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 71%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 57%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">20</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 42%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 28%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">10</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 14%\"></span></span><span style=\"display: block\">aaaaa</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 57%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">31</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 42%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 28%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 28%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">21</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 14%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">01</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 14%\"></span></span><span style=\"display: block\">bbbbb</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 57%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 42%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">02</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 28%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 28%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">32</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 14%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">12</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 14%\"></span></span><span style=\"display: block\">ccccc</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 85%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 71%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">03</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 57%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 42%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">13</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 28%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 14%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">23</span></span></span><span style=\"display: block\">ddddd</span></span></div></td><td style=\"width: 20%\"><pre>┌►┌─────┌►┌─────┌►┌─ aaaaa 10\n",
33
       "│ │ ┌►┌─│ │ ┌►┌─└─└► bbbbb 01\n",
34
       "│ │ │ │ └─└►└─└──►┌─ ccccc 12\n",
35
       "└─└►└─└──►└───────└► ddddd 23</pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 80%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 60%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">ea</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 20%\"></span></span><span style=\"display: block\">aaa</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">ab</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">cb</span></span></span><span style=\"display: block\">bbb</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">dc</span></span></span><span style=\"display: block\">ccc</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">ad</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span></span><span style=\"display: block\">ddd</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">ge</span></span></span><span style=\"display: block\">eee</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">gf</span></span></span><span style=\"display: block\">fff</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 75%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">ag</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 25%\"></span></span><span style=\"display: block\">ggg</span></span></div></td><td style=\"width: 20%\"><pre>┌─┌►┌───┌─ aaa ea\n",
36
       "│ │ │ ┌►└► bbb ab\n",
37
       "│ │ │ └─┌► ccc dc\n",
38
       "│ │ └──►└─ ddd ad\n",
39
       "│ └───┌──► eee ge\n",
40
       "│     │ ┌► fff gf\n",
41
       "└────►└─└─ ggg ag</pre></td></tr></table>"
42
      ],
43
      "text/plain": [
44
       "<IPython.core.display.HTML object>"
45
      ]
46
     },
47
     "metadata": {},
48
     "output_type": "display_data"
49
    }
50
   ],
51
   "source": [
52
    "from ipymarkup.demo import show_table\n",
53
    "show_table()"
54
   ]
55
  },
56
  {
57
   "cell_type": "markdown",
58
   "metadata": {},
59
   "source": [
60
    "## NER"
61
   ]
62
  },
63
  {
64
   "cell_type": "markdown",
65
   "metadata": {},
66
   "source": [
67
    "All NER markup visualization functions have two arguments as input: `text` and `spans`. `spans` are tuples of `start`, `stop` and optional `type`."
68
   ]
69
  },
70
  {
71
   "cell_type": "markdown",
72
   "metadata": {},
73
   "source": [
74
    "### `show_span_ascii_markup`"
75
   ]
76
  },
77
  {
78
   "cell_type": "code",
79
   "execution_count": 2,
80
   "metadata": {},
81
   "outputs": [
82
    {
83
     "name": "stdout",
84
     "output_type": "stream",
85
     "text": [
86
      "В мероприятии примут участие не только российские учёные, но и \n",
87
      "зарубежные исследователи, в том числе, Крис Хелмбрехт - управляющий \n",
88
      "                                       PER───────────               \n",
89
      "директор и совладелец креативного агентства Kollektiv (Германия, США),\n",
90
      "                                                       LOC─────  LOC  \n",
91
      " Ннека Угбома - руководитель проекта Mushroom works (Великобритания), \n",
92
      " PER─────────                                        LOC───────────   \n",
93
      "Гергей Ковач - политик и лидер субкультурной партии «Dog with two \n",
94
      "PER─────────                                         ORG──────────\n",
95
      "tails» (Венгрия), Георг Жено - немецкий режиссёр, один из создателей \n",
96
      "─────   LOC────   PER───────                                         \n",
97
      "экспериментального театра «Театр.doc», Театра им. Йозефа Бойса \n",
98
      "                                       ORG─────── PER───────── \n",
99
      "(Германия).\n",
100
      " LOC─────  \n"
101
     ]
102
    }
103
   ],
104
   "source": [
105
    "from ipymarkup import show_span_ascii_markup\n",
106
    "\n",
107
    "text = 'В мероприятии примут участие не только российские учёные, но и зарубежные исследователи, в том числе, Крис Хелмбрехт - управляющий директор и совладелец креативного агентства Kollektiv (Германия, США), Ннека Угбома - руководитель проекта Mushroom works (Великобритания), Гергей Ковач - политик и лидер субкультурной партии «Dog with two tails» (Венгрия), Георг Жено - немецкий режиссёр, один из создателей экспериментального театра «Театр.doc», Театра им. Йозефа Бойса (Германия).'\n",
108
    "spans = [(102, 116, 'PER'), (186, 194, 'LOC'), (196, 199, 'LOC'), (202, 214, 'PER'), (254, 268, 'LOC'), (271, 283, 'PER'), (324, 342, 'ORG'), (345, 352, 'LOC'), (355, 365, 'PER'), (445, 455, 'ORG'), (456, 468, 'PER'), (470, 478, 'LOC')]\n",
109
    "\n",
110
    "show_span_ascii_markup(text, spans)"
111
   ]
112
  },
113
  {
114
   "cell_type": "markdown",
115
   "metadata": {},
116
   "source": [
117
    "### `show_span_box_markup`"
118
   ]
119
  },
120
  {
121
   "cell_type": "code",
122
   "execution_count": 3,
123
   "metadata": {},
124
   "outputs": [
125
    {
126
     "data": {
127
      "text/html": [
128
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">В мероприятии примут участие не только российские учёные, но и зарубежные исследователи, в том числе, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Крис Хелмбрехт<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - управляющий директор и совладелец креативного агентства Kollektiv (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">США<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Ннека Угбома<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - руководитель проекта Mushroom works (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Великобритания<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Гергей Ковач<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - политик и лидер субкультурной партии «<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Dog with two tails<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">ORG</span></span>» (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Венгрия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Георг Жено<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - немецкий режиссёр, один из создателей экспериментального театра «Театр.doc», <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Театра им.<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">ORG</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Йозефа Бойса<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>).</div>"
129
      ],
130
      "text/plain": [
131
       "<IPython.core.display.HTML object>"
132
      ]
133
     },
134
     "metadata": {},
135
     "output_type": "display_data"
136
    }
137
   ],
138
   "source": [
139
    "from ipymarkup import show_span_box_markup\n",
140
    "\n",
141
    "show_span_box_markup(text, spans)"
142
   ]
143
  },
144
  {
145
   "cell_type": "markdown",
146
   "metadata": {},
147
   "source": [
148
    "To assign specific colors use `ipymarkup.palette`:"
149
   ]
150
  },
151
  {
152
   "cell_type": "code",
153
   "execution_count": 4,
154
   "metadata": {},
155
   "outputs": [
156
    {
157
     "data": {
158
      "text/html": [
159
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">В мероприятии примут участие не только российские учёные, но и зарубежные исследователи, в том числе, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Крис Хелмбрехт<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - управляющий директор и совладелец креативного агентства Kollektiv (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">США<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Ннека Угбома<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - руководитель проекта Mushroom works (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Великобритания<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Гергей Ковач<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - политик и лидер субкультурной партии «<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">Dog with two tails<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">ORG</span></span>» (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Венгрия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Георг Жено<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - немецкий режиссёр, один из создателей экспериментального театра «Театр.doc», <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">Театра им.<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">ORG</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Йозефа Бойса<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>).</div>"
160
      ],
161
      "text/plain": [
162
       "<IPython.core.display.HTML object>"
163
      ]
164
     },
165
     "metadata": {},
166
     "output_type": "display_data"
167
    }
168
   ],
169
   "source": [
170
    "from ipymarkup.palette import palette, BLUE, RED, GREEN\n",
171
    "\n",
172
    "show_span_box_markup(text, spans, palette=palette(PER=BLUE, ORG=RED, LOC=GREEN))"
173
   ]
174
  },
175
  {
176
   "cell_type": "markdown",
177
   "metadata": {},
178
   "source": [
179
    "### `show_span_line_markup`"
180
   ]
181
  },
182
  {
183
   "cell_type": "code",
184
   "execution_count": 5,
185
   "metadata": {},
186
   "outputs": [
187
    {
188
     "data": {
189
      "text/html": [
190
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\">В мероприятии примут участие не только российские учёные, но и зарубежные </span></div><div><span style=\"display: inline-block; vertical-align: top\">исследователи, в том числе, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">Крис Хелмбрехт - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">управляющий директор</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"> и </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">совладелец </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\">креативного агентства Kollektiv (</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 41px\">Германия</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\">, </span></span></span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 41px\">США</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\">)</span></span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">Ннека Угбома - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">руководитель </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">проекта Mushroom works</span></span></span><span style=\"display: inline-block; vertical-align: top\"> (</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 8px\">Великобритания</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\">), Гергей Ковач - политик и </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">лидер </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">субкультурной партии «Dog with two tails» (</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 30px\">Венгрия</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">)</span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">Георг Жено - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">немецкий </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">режиссёр</span></span></span><span style=\"display: inline-block; vertical-align: top\">, один из создателей </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">экспериментального театра «Театр.doc»</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">Театра им. </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">Йозефа Бойса (</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 19px\">Германия</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">)</span></span><span style=\"display: inline-block; vertical-align: top\">.</span></div></div>"
191
      ],
192
      "text/plain": [
193
       "<IPython.core.display.HTML object>"
194
      ]
195
     },
196
     "metadata": {},
197
     "output_type": "display_data"
198
    }
199
   ],
200
   "source": [
201
    "from ipymarkup import show_span_line_markup\n",
202
    "\n",
203
    "spans = [(102, 200, 'PERSON'), (119, 139, 'PERSONPROPERTY'), (142, 200, 'PERSONPROPERTY'), (153, 200, 'ORGANIZATION'), (186, 194, 'GEO'), (196, 199, 'GEO'), (202, 252, 'PERSON'), (217, 252, 'PERSONPROPERTY'), (254, 268, 'GEO'), (296, 353, 'PERSONPROPERTY'), (302, 353, 'ORGANIZATION'), (345, 352, 'GEO'), (355, 385, 'PERSON'), (368, 385, 'PERSONPROPERTY'), (406, 443, 'ORGANIZATION'), (445, 479, 'ORGANIZATION'), (470, 478, 'GEO')]\n",
204
    "show_span_line_markup(text, spans)"
205
   ]
206
  },
207
  {
208
   "cell_type": "markdown",
209
   "metadata": {},
210
   "source": [
211
    "To make all colors blue, initialize palette with single color:"
212
   ]
213
  },
214
  {
215
   "cell_type": "code",
216
   "execution_count": 6,
217
   "metadata": {},
218
   "outputs": [
219
    {
220
     "data": {
221
      "text/html": [
222
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\">В мероприятии примут участие не только российские учёные, но и зарубежные </span></div><div><span style=\"display: inline-block; vertical-align: top\">исследователи, в том числе, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Крис Хелмбрехт - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">управляющий директор</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> и </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">совладелец </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">креативного агентства Kollektiv (</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 41px\">Германия</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">, </span></span></span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 41px\">США</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">)</span></span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Ннека Угбома - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">руководитель </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">проекта Mushroom works</span></span></span><span style=\"display: inline-block; vertical-align: top\"> (</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Великобритания</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\">), Гергей Ковач - политик и </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">лидер </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">субкультурной партии «Dog with two tails» (</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">Венгрия</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">)</span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Георг Жено - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">немецкий </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">режиссёр</span></span></span><span style=\"display: inline-block; vertical-align: top\">, один из создателей </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">экспериментального театра «Театр.doc»</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Театра им. </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Йозефа Бойса (</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">Германия</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">)</span></span><span style=\"display: inline-block; vertical-align: top\">.</span></div></div>"
223
      ],
224
      "text/plain": [
225
       "<IPython.core.display.HTML object>"
226
      ]
227
     },
228
     "metadata": {},
229
     "output_type": "display_data"
230
    }
231
   ],
232
   "source": [
233
    "show_span_line_markup(text, spans, palette=palette(BLUE))"
234
   ]
235
  },
236
  {
237
   "cell_type": "markdown",
238
   "metadata": {},
239
   "source": [
240
    "## `show_span_ascii_markup`"
241
   ]
242
  },
243
  {
244
   "cell_type": "code",
245
   "execution_count": 7,
246
   "metadata": {},
247
   "outputs": [
248
    {
249
     "name": "stdout",
250
     "output_type": "stream",
251
     "text": [
252
      "В мероприятии примут участие не только российские учёные, но и \n",
253
      "зарубежные исследователи, в том числе, Крис Хелмбрехт - управляющий \n",
254
      "                                       PERSON───────────────────────\n",
255
      "                                                        PERSONPROPER\n",
256
      "директор и совладелец креативного агентства Kollektiv (Германия, США),\n",
257
      "───────────────────────────────────────────────────────────────────── \n",
258
      "────────   PERSONPROPERTY──────────────────────────────────────────── \n",
259
      "                      ORGANIZATION─────────────────────────────────── \n",
260
      "                                                       GEO─────  GEO  \n",
261
      " Ннека Угбома - руководитель проекта Mushroom works (Великобритания), \n",
262
      " PERSON────────────────────────────────────────────  GEO───────────   \n",
263
      "                PERSONPROPERTY─────────────────────                   \n",
264
      "Гергей Ковач - политик и лидер субкультурной партии «Dog with two \n",
265
      "                         PERSONPROPERTY───────────────────────────\n",
266
      "                               ORGANIZATION───────────────────────\n",
267
      "tails» (Венгрия), Георг Жено - немецкий режиссёр, один из создателей \n",
268
      "────────────────  PERSON────────────────────────                     \n",
269
      "────────────────               PERSONPROPERTY───                     \n",
270
      "        GEO────                                                      \n",
271
      "экспериментального театра «Театр.doc», Театра им. Йозефа Бойса \n",
272
      "ORGANIZATION─────────────────────────  ORGANIZATION────────────\n",
273
      "(Германия).\n",
274
      "────────── \n",
275
      " GEO─────  \n"
276
     ]
277
    }
278
   ],
279
   "source": [
280
    "show_span_ascii_markup(text, spans)"
281
   ]
282
  },
283
  {
284
   "cell_type": "markdown",
285
   "metadata": {},
286
   "source": [
287
    "### `spans`"
288
   ]
289
  },
290
  {
291
   "cell_type": "markdown",
292
   "metadata": {},
293
   "source": [
294
    "For convenience `span` objects can be tuples, dicts or objects:"
295
   ]
296
  },
297
  {
298
   "cell_type": "code",
299
   "execution_count": 8,
300
   "metadata": {},
301
   "outputs": [
302
    {
303
     "data": {
304
      "text/html": [
305
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">0<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">1</span>2<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">3<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span>4<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">5</span>6<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">7</span>8<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">9<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span></div>"
306
      ],
307
      "text/plain": [
308
       "<IPython.core.display.HTML object>"
309
      ]
310
     },
311
     "metadata": {},
312
     "output_type": "display_data"
313
    },
314
    {
315
     "data": {
316
      "text/html": [
317
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\">0</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">1</span></span><span style=\"display: inline-block; vertical-align: top\">2</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">3</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">b</span></span><span style=\"display: inline-block; vertical-align: top\">4</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">5</span></span><span style=\"display: inline-block; vertical-align: top\">6</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">7</span></span><span style=\"display: inline-block; vertical-align: top\">8</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">9</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div>"
318
      ],
319
      "text/plain": [
320
       "<IPython.core.display.HTML object>"
321
      ]
322
     },
323
     "metadata": {},
324
     "output_type": "display_data"
325
    },
326
    {
327
     "name": "stdout",
328
     "output_type": "stream",
329
     "text": [
330
      "0123456789\n",
331
      " ─ b ─ ─ c\n"
332
     ]
333
    }
334
   ],
335
   "source": [
336
    "class C(object):\n",
337
    "    def __init__(self, start, stop, type=None):\n",
338
    "        self.start = start\n",
339
    "        self.stop = stop\n",
340
    "        self.type = type\n",
341
    "        \n",
342
    "        \n",
343
    "text = '0123456789'\n",
344
    "spans = [\n",
345
    "    (1, 2),  # tuple/list (int, int)\n",
346
    "    (3, 4, 'b'), # tuple/list (int, int, str)\n",
347
    "    [5, 6],\n",
348
    "    C(7, 8),\n",
349
    "    C(9, 10, 'c')  # object with start, stop, type attributes\n",
350
    "]\n",
351
    "show_span_box_markup(text, spans)\n",
352
    "show_span_line_markup(text, spans)\n",
353
    "show_span_ascii_markup(text, spans)"
354
   ]
355
  },
356
  {
357
   "cell_type": "markdown",
358
   "metadata": {},
359
   "source": [
360
    "## Syntax tree"
361
   ]
362
  },
363
  {
364
   "cell_type": "markdown",
365
   "metadata": {},
366
   "source": [
367
    "Syntax tree visualization functions have two arguments as input: `words` and `deps`. `words` are strings, `deps` — list of tuples `source`, `target` and optional `type`."
368
   ]
369
  },
370
  {
371
   "cell_type": "markdown",
372
   "metadata": {},
373
   "source": [
374
    "### `show_dep_markup`"
375
   ]
376
  },
377
  {
378
   "cell_type": "code",
379
   "execution_count": 9,
380
   "metadata": {},
381
   "outputs": [
382
    {
383
     "data": {
384
      "text/html": [
385
       "<div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">case</span></span></span><span style=\"display: block\">В</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">amod</span></span></span><span style=\"display: block\">советский</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 40%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">obl</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 20%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 20%\"></span></span><span style=\"display: block\">период</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nmod</span></span></span><span style=\"display: block\">времени</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 75%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">obj</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 25%\"></span></span><span style=\"display: block\">число</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">compound</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"></span></span><span style=\"display: block\">ИТ</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">punct</span></span></span><span style=\"display: block\">-</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nmod</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span></span><span style=\"display: block\">специалистов</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">case</span></span></span><span style=\"display: block\">в</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nmod</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span></span><span style=\"display: block\">Армении</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 20%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 20%\"></span></span><span style=\"display: block\">составляло</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">case</span></span></span><span style=\"display: block\">около</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">nummod</span></span></span><span style=\"display: block\">десяти</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 75%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nsubj</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 25%\"></span></span><span style=\"display: block\">тысяч</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">punct</span></span></span><span style=\"display: block\">.</span></span></div>"
386
      ],
387
      "text/plain": [
388
       "<IPython.core.display.HTML object>"
389
      ]
390
     },
391
     "metadata": {},
392
     "output_type": "display_data"
393
    }
394
   ],
395
   "source": [
396
    "from ipymarkup import show_dep_markup\n",
397
    "\n",
398
    "words = ['В', 'советский', 'период', 'времени', 'число', 'ИТ', '-', 'специалистов', 'в', 'Армении', 'составляло', 'около', 'десяти', 'тысяч', '.']\n",
399
    "deps = [(2, 0, 'case'), (2, 1, 'amod'), (10, 2, 'obl'), (2, 3, 'nmod'), (10, 4, 'obj'), (7, 5, 'compound'), (5, 6, 'punct'), (4, 7, 'nmod'), (9, 8, 'case'), (4, 9, 'nmod'), (13, 11, 'case'), (13, 12, 'nummod'), (10, 13, 'nsubj'), (10, 14, 'punct')]\n",
400
    "show_dep_markup(words, deps)"
401
   ]
402
  },
403
  {
404
   "cell_type": "markdown",
405
   "metadata": {},
406
   "source": [
407
    "### `show_dep_ascii_markup`"
408
   ]
409
  },
410
  {
411
   "cell_type": "code",
412
   "execution_count": 10,
413
   "metadata": {},
414
   "outputs": [
415
    {
416
     "name": "stdout",
417
     "output_type": "stream",
418
     "text": [
419
      "        ┌──► В            case\n",
420
      "        │ ┌► советский    amod\n",
421
      "┌──────►└─└─ период       obl\n",
422
      "│       └──► времени      nmod\n",
423
      "│ ┌►┌─┌───── число        obj\n",
424
      "│ │ │ │ ┌►┌─ ИТ           compound\n",
425
      "│ │ │ │ │ └► -            punct\n",
426
      "│ │ │ └►└─── специалистов nmod\n",
427
      "│ │ │     ┌► в            case\n",
428
      "│ │ └────►└─ Армении      nmod\n",
429
      "└─└─┌─┌───── составляло   \n",
430
      "    │ │ ┌──► около        case\n",
431
      "    │ │ │ ┌► десяти       nummod\n",
432
      "    │ └►└─└─ тысяч        nsubj\n",
433
      "    └──────► .            punct\n"
434
     ]
435
    }
436
   ],
437
   "source": [
438
    "from ipymarkup import show_dep_ascii_markup\n",
439
    "\n",
440
    "words = ['В', 'советский', 'период', 'времени', 'число', 'ИТ', '-', 'специалистов', 'в', 'Армении', 'составляло', 'около', 'десяти', 'тысяч', '.']\n",
441
    "deps = [(2, 0, 'case'), (2, 1, 'amod'), (10, 2, 'obl'), (2, 3, 'nmod'), (10, 4, 'obj'), (7, 5, 'compound'), (5, 6, 'punct'), (4, 7, 'nmod'), (9, 8, 'case'), (4, 9, 'nmod'), (13, 11, 'case'), (13, 12, 'nummod'), (10, 13, 'nsubj'), (10, 14, 'punct')]\n",
442
    "show_dep_ascii_markup(words, deps)"
443
   ]
444
  },
445
  {
446
   "cell_type": "markdown",
447
   "metadata": {},
448
   "source": [
449
    "### `deps`"
450
   ]
451
  },
452
  {
453
   "cell_type": "markdown",
454
   "metadata": {},
455
   "source": [
456
    "For convenience `dep` objects can be tuples, dicts or objects. Same as `spans` in NER visualizations:"
457
   ]
458
  },
459
  {
460
   "cell_type": "code",
461
   "execution_count": 11,
462
   "metadata": {},
463
   "outputs": [
464
    {
465
     "data": {
466
      "text/html": [
467
       "<div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 66%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"></span></span><span style=\"display: block\">aa</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 25%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 25%\"></span></span><span style=\"display: block\">bb</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">b</span></span></span><span style=\"display: block\">cc</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">c</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"></span></span><span style=\"display: block\">dd</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 20px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 20px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span></span></span><span style=\"display: block\">ee</span></span></div>"
468
      ],
469
      "text/plain": [
470
       "<IPython.core.display.HTML object>"
471
      ]
472
     },
473
     "metadata": {},
474
     "output_type": "display_data"
475
    },
476
    {
477
     "name": "stdout",
478
     "output_type": "stream",
479
     "text": [
480
      "  ┌───┌─ aa \n",
481
      "┌─│ ┌─└► bb \n",
482
      "│ └►└──► cc b\n",
483
      "└────►┌─ dd c\n",
484
      "      └► ee \n"
485
     ]
486
    }
487
   ],
488
   "source": [
489
    "class C(object):\n",
490
    "    def __init__(self, source, target, type=None):\n",
491
    "        self.source = source\n",
492
    "        self.target = target\n",
493
    "        self.type = type\n",
494
    "        \n",
495
    "        \n",
496
    "words = 'aa bb cc dd ee'.split()\n",
497
    "deps = [\n",
498
    "    (0, 1),\n",
499
    "    (1, 2, 'b'),\n",
500
    "    [3, 4],\n",
501
    "    C(0, 2),\n",
502
    "    C(1, 3, 'c')\n",
503
    "]\n",
504
    "show_dep_markup(words, deps)\n",
505
    "show_dep_ascii_markup(words, deps)"
506
   ]
507
  },
508
  {
509
   "cell_type": "markdown",
510
   "metadata": {},
511
   "source": [
512
    "## Cookbook"
513
   ]
514
  },
515
  {
516
   "cell_type": "markdown",
517
   "metadata": {},
518
   "source": [
519
    "### `format_*` functions"
520
   ]
521
  },
522
  {
523
   "cell_type": "markdown",
524
   "metadata": {},
525
   "source": [
526
    "To use visualizations outside of Jupyter notebook use `format_*` function. For example `show_dep_ascii_markup` has `format_dep_ascii_markup` counterpart that return generator of strings:"
527
   ]
528
  },
529
  {
530
   "cell_type": "code",
531
   "execution_count": 12,
532
   "metadata": {},
533
   "outputs": [
534
    {
535
     "data": {
536
      "text/plain": [
537
       "['  ┌───┌─ aa ',\n",
538
       " '┌─│ ┌─└► bb ',\n",
539
       " '│ └►└──► cc b',\n",
540
       " '└────►┌─ dd c',\n",
541
       " '      └► ee ']"
542
      ]
543
     },
544
     "execution_count": 12,
545
     "metadata": {},
546
     "output_type": "execute_result"
547
    }
548
   ],
549
   "source": [
550
    "from ipymarkup import format_dep_ascii_markup\n",
551
    "\n",
552
    "list(format_dep_ascii_markup(words, deps))"
553
   ]
554
  },
555
  {
556
   "cell_type": "markdown",
557
   "metadata": {},
558
   "source": [
559
    "Same for `show_span_box_markup` and `format_span_box_markup`:"
560
   ]
561
  },
562
  {
563
   "cell_type": "code",
564
   "execution_count": 13,
565
   "metadata": {},
566
   "outputs": [
567
    {
568
     "data": {
569
      "text/plain": [
570
       "['<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">',\n",
571
       " '0',\n",
572
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">',\n",
573
       " '1',\n",
574
       " '</span>',\n",
575
       " '2',\n",
576
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">',\n",
577
       " '3',\n",
578
       " '<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">',\n",
579
       " 'b',\n",
580
       " '</span>',\n",
581
       " '</span>',\n",
582
       " '4',\n",
583
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">',\n",
584
       " '5',\n",
585
       " '</span>',\n",
586
       " '6',\n",
587
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">',\n",
588
       " '7',\n",
589
       " '</span>',\n",
590
       " '8',\n",
591
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">',\n",
592
       " '9',\n",
593
       " '<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">',\n",
594
       " 'c',\n",
595
       " '</span>',\n",
596
       " '</span>',\n",
597
       " '',\n",
598
       " '</div>']"
599
      ]
600
     },
601
     "execution_count": 13,
602
     "metadata": {},
603
     "output_type": "execute_result"
604
    }
605
   ],
606
   "source": [
607
    "from ipymarkup import format_span_box_markup\n",
608
    "\n",
609
    "list(format_span_box_markup(text, spans))"
610
   ]
611
  },
612
  {
613
   "cell_type": "code",
614
   "execution_count": null,
615
   "metadata": {},
616
   "outputs": [],
617
   "source": []
618
  }
619
 ],
620
 "metadata": {
621
  "language_info": {
622
   "name": "python"
623
  }
624
 },
625
 "nbformat": 4,
626
 "nbformat_minor": 2
627
}
628
ipymarkup

Использование cookies
