├── README.md
├── BAR CHART IN D3.ipynb
├── .ipynb_checkpoints
    ├── BAR CHART IN D3-checkpoint.ipynb
    └── SCATTER PLOT-checkpoint.ipynb
└── SCATTER PLOT.ipynb


/README.md:
--------------------------------------------------------------------------------
1 | # D3-in-Jupyter-Notebook
2 | 
3 | 
4 | This Blog is going to introduce D3 and how it can be used in Juypter Notebook . The blog is going to be on the basis of the details from the PyData ,NewYork, a talk on visualization by Brian Coffey
5 | 
6 | The link the blog : https://medium.com/@stallonejacob/d3-in-jupyter-notebook-685d6dca75c8
7 | 


--------------------------------------------------------------------------------
/BAR CHART IN D3.ipynb:
--------------------------------------------------------------------------------
  1 | {
  2 |  "cells": [
  3 |   {
  4 |    "cell_type": "markdown",
  5 |    "metadata": {},
  6 |    "source": [
  7 |     "# BAR CHART IN D3"
  8 |    ]
  9 |   },
 10 |   {
 11 |    "cell_type": "markdown",
 12 |    "metadata": {},
 13 |    "source": [
 14 |     "## INTRODUCTION "
 15 |    ]
 16 |   },
 17 |   {
 18 |    "cell_type": "markdown",
 19 |    "metadata": {},
 20 |    "source": [
 21 |     "This is code continuation that is based on the blog : \n",
 22 |     "    \n",
 23 |     "    \n",
 24 |     "The notebook is a simple example of us D3 and how to make updates.\n",
 25 |     "\n",
 26 |     "The link to bl.ock is here : https://bl.ocks.org/mbostock/3885304\n",
 27 |     "\n",
 28 |     "Please refer to the blog for the explanation of this note book ."
 29 |    ]
 30 |   },
 31 |   {
 32 |    "cell_type": "code",
 33 |    "execution_count": 11,
 34 |    "metadata": {
 35 |     "collapsed": true
 36 |    },
 37 |    "outputs": [],
 38 |    "source": [
 39 |     "from IPython.core.display import display, HTML\n",
 40 |     "from string import Template\n",
 41 |     "import pandas as pd\n",
 42 |     "import json, random"
 43 |    ]
 44 |   },
 45 |   {
 46 |    "cell_type": "code",
 47 |    "execution_count": 12,
 48 |    "metadata": {},
 49 |    "outputs": [
 50 |     {
 51 |      "data": {
 52 |       "text/html": [
 53 |        "<script src=\"./d3.min.js\"></script>"
 54 |       ],
 55 |       "text/plain": [
 56 |        "<IPython.core.display.HTML object>"
 57 |       ]
 58 |      },
 59 |      "execution_count": 12,
 60 |      "metadata": {},
 61 |      "output_type": "execute_result"
 62 |     }
 63 |    ],
 64 |    "source": [
 65 |     "# Get the D3 host locally. \n",
 66 |     "HTML('<script src=\"./d3.min.js\"></script>')"
 67 |    ]
 68 |   },
 69 |   {
 70 |    "cell_type": "code",
 71 |    "execution_count": 13,
 72 |    "metadata": {
 73 |     "collapsed": true
 74 |    },
 75 |    "outputs": [],
 76 |    "source": [
 77 |     "#HTML templet\n",
 78 |     "html_template = Template('''\n",
 79 |     "<style> $css_text </style>\n",
 80 |     "<div id=\"graph-div\"></div>\n",
 81 |     "<script> $js_text </script>\n",
 82 |     "''')"
 83 |    ]
 84 |   },
 85 |   {
 86 |    "cell_type": "code",
 87 |    "execution_count": 14,
 88 |    "metadata": {
 89 |     "collapsed": true
 90 |    },
 91 |    "outputs": [],
 92 |    "source": [
 93 |     "# Css templet\n",
 94 |     "css_text = '''\n",
 95 |     "\n",
 96 |     ".bar {\n",
 97 |     "  fill: steelblue;\n",
 98 |     "}\n",
 99 |     "\n",
100 |     ".bar:hover {\n",
101 |     "  fill: brown;\n",
102 |     "}\n",
103 |     "\n",
104 |     ".axis {\n",
105 |     "  font: 10px sans-serif;\n",
106 |     "}\n",
107 |     "\n",
108 |     ".axis path,\n",
109 |     ".axis line {\n",
110 |     "  fill: none;\n",
111 |     "  stroke: #000;\n",
112 |     "  shape-rendering: crispEdges;\n",
113 |     "}\n",
114 |     "\n",
115 |     ".x.axis path {\n",
116 |     "  display: none;\n",
117 |     "}\n",
118 |     "\n",
119 |     "'''"
120 |    ]
121 |   },
122 |   {
123 |    "cell_type": "code",
124 |    "execution_count": 15,
125 |    "metadata": {
126 |     "collapsed": true
127 |    },
128 |    "outputs": [],
129 |    "source": [
130 |     "#Java script templet\n",
131 |     "js_text_template = Template('''\n",
132 |     "\n",
133 |     "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
134 |     "    width = 500 - margin.left - margin.right,\n",
135 |     "    height = 300 - margin.top - margin.bottom;\n",
136 |     "\n",
137 |     "var x = d3.scale.ordinal()\n",
138 |     "    .rangeRoundBands([0, width], .1);\n",
139 |     "\n",
140 |     "var y = d3.scale.linear()\n",
141 |     "    .range([height, 0]);\n",
142 |     "\n",
143 |     "var xAxis = d3.svg.axis()\n",
144 |     "    .scale(x)\n",
145 |     "    .orient(\"bottom\");\n",
146 |     "\n",
147 |     "var yAxis = d3.svg.axis()\n",
148 |     "    .scale(y)\n",
149 |     "    .orient(\"left\");\n",
150 |     "\n",
151 |     "var svg = d3.select(\"#graph-div\").append(\"svg\")\n",
152 |     "    .attr(\"width\", width + margin.left + margin.right)\n",
153 |     "    .attr(\"height\", height + margin.top + margin.bottom)\n",
154 |     "  .append(\"g\")\n",
155 |     "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
156 |     "\n",
157 |     "var data = $data ;\n",
158 |     "\n",
159 |     "  x.domain(data.map(function(d) { return d.letter; }));\n",
160 |     "  y.domain([0, d3.max(data, function(d) { return d.y; })]);\n",
161 |     "\n",
162 |     "  svg.append(\"g\")\n",
163 |     "      .attr(\"class\", \"x axis\")\n",
164 |     "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
165 |     "      .call(xAxis);\n",
166 |     "\n",
167 |     "  svg.append(\"g\")\n",
168 |     "      .attr(\"class\", \"y axis\")\n",
169 |     "      .call(yAxis);\n",
170 |     "\n",
171 |     "  svg.selectAll(\".bar\")\n",
172 |     "      .data(data)\n",
173 |     "    .enter().append(\"rect\")\n",
174 |     "      .attr(\"class\", \"bar\")\n",
175 |     "      .attr(\"x\", function(d) { return x(d.letter); })\n",
176 |     "      .attr(\"width\", x.rangeBand())\n",
177 |     "      .attr(\"y\", function(d) { return y(d.y); })\n",
178 |     "      .attr(\"height\", function(d) { return height - y(d.y); });\n",
179 |     "\n",
180 |     "''')"
181 |    ]
182 |   },
183 |   {
184 |    "cell_type": "code",
185 |    "execution_count": 16,
186 |    "metadata": {
187 |     "collapsed": true
188 |    },
189 |    "outputs": [],
190 |    "source": [
191 |     "js_text_template_2 = Template('''\n",
192 |     "\n",
193 |     "var bars = svg.selectAll(\".bar\").data($data);\n",
194 |     "  \n",
195 |     "bars\n",
196 |     "  .transition()\n",
197 |     "    .attr(\"y\", function(d) { return y(d.y); })\n",
198 |     "    .attr(\"height\", function(d) { return height - y(d.y); });\n",
199 |     "\n",
200 |     "''')"
201 |    ]
202 |   },
203 |   {
204 |    "cell_type": "code",
205 |    "execution_count": 17,
206 |    "metadata": {},
207 |    "outputs": [
208 |     {
209 |      "data": {
210 |       "text/html": [
211 |        "<div>\n",
212 |        "<style>\n",
213 |        "    .dataframe thead tr:only-child th {\n",
214 |        "        text-align: right;\n",
215 |        "    }\n",
216 |        "\n",
217 |        "    .dataframe thead th {\n",
218 |        "        text-align: left;\n",
219 |        "    }\n",
220 |        "\n",
221 |        "    .dataframe tbody tr th {\n",
222 |        "        vertical-align: top;\n",
223 |        "    }\n",
224 |        "</style>\n",
225 |        "<table border=\"1\" class=\"dataframe\">\n",
226 |        "  <thead>\n",
227 |        "    <tr style=\"text-align: right;\">\n",
228 |        "      <th></th>\n",
229 |        "      <th>letter</th>\n",
230 |        "      <th>y</th>\n",
231 |        "    </tr>\n",
232 |        "  </thead>\n",
233 |        "  <tbody>\n",
234 |        "    <tr>\n",
235 |        "      <th>0</th>\n",
236 |        "      <td>A</td>\n",
237 |        "      <td>1</td>\n",
238 |        "    </tr>\n",
239 |        "    <tr>\n",
240 |        "      <th>1</th>\n",
241 |        "      <td>B</td>\n",
242 |        "      <td>1</td>\n",
243 |        "    </tr>\n",
244 |        "    <tr>\n",
245 |        "      <th>2</th>\n",
246 |        "      <td>C</td>\n",
247 |        "      <td>1</td>\n",
248 |        "    </tr>\n",
249 |        "    <tr>\n",
250 |        "      <th>3</th>\n",
251 |        "      <td>D</td>\n",
252 |        "      <td>1</td>\n",
253 |        "    </tr>\n",
254 |        "  </tbody>\n",
255 |        "</table>\n",
256 |        "</div>"
257 |       ],
258 |       "text/plain": [
259 |        "  letter  y\n",
260 |        "0      A  1\n",
261 |        "1      B  1\n",
262 |        "2      C  1\n",
263 |        "3      D  1"
264 |       ]
265 |      },
266 |      "execution_count": 17,
267 |      "metadata": {},
268 |      "output_type": "execute_result"
269 |     }
270 |    ],
271 |    "source": [
272 |     "data = pd.DataFrame({'letter': ['A','B','C','D'], 'y': [1,1,1,1]})\n",
273 |     "data.head()"
274 |    ]
275 |   },
276 |   {
277 |    "cell_type": "code",
278 |    "execution_count": 18,
279 |    "metadata": {},
280 |    "outputs": [
281 |     {
282 |      "data": {
283 |       "text/html": [
284 |        "\n",
285 |        "<style> \n",
286 |        "\n",
287 |        ".bar {\n",
288 |        "  fill: steelblue;\n",
289 |        "}\n",
290 |        "\n",
291 |        ".bar:hover {\n",
292 |        "  fill: brown;\n",
293 |        "}\n",
294 |        "\n",
295 |        ".axis {\n",
296 |        "  font: 10px sans-serif;\n",
297 |        "}\n",
298 |        "\n",
299 |        ".axis path,\n",
300 |        ".axis line {\n",
301 |        "  fill: none;\n",
302 |        "  stroke: #000;\n",
303 |        "  shape-rendering: crispEdges;\n",
304 |        "}\n",
305 |        "\n",
306 |        ".x.axis path {\n",
307 |        "  display: none;\n",
308 |        "}\n",
309 |        "\n",
310 |        " </style>\n",
311 |        "<div id=\"graph-div\"></div>\n",
312 |        "<script> \n",
313 |        "\n",
314 |        "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
315 |        "    width = 500 - margin.left - margin.right,\n",
316 |        "    height = 300 - margin.top - margin.bottom;\n",
317 |        "\n",
318 |        "var x = d3.scale.ordinal()\n",
319 |        "    .rangeRoundBands([0, width], .1);\n",
320 |        "\n",
321 |        "var y = d3.scale.linear()\n",
322 |        "    .range([height, 0]);\n",
323 |        "\n",
324 |        "var xAxis = d3.svg.axis()\n",
325 |        "    .scale(x)\n",
326 |        "    .orient(\"bottom\");\n",
327 |        "\n",
328 |        "var yAxis = d3.svg.axis()\n",
329 |        "    .scale(y)\n",
330 |        "    .orient(\"left\");\n",
331 |        "\n",
332 |        "var svg = d3.select(\"#graph-div\").append(\"svg\")\n",
333 |        "    .attr(\"width\", width + margin.left + margin.right)\n",
334 |        "    .attr(\"height\", height + margin.top + margin.bottom)\n",
335 |        "  .append(\"g\")\n",
336 |        "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
337 |        "\n",
338 |        "var data = [{\"y\": 1, \"letter\": \"A\"}, {\"y\": 1, \"letter\": \"B\"}, {\"y\": 1, \"letter\": \"C\"}, {\"y\": 1, \"letter\": \"D\"}] ;\n",
339 |        "\n",
340 |        "  x.domain(data.map(function(d) { return d.letter; }));\n",
341 |        "  y.domain([0, d3.max(data, function(d) { return d.y; })]);\n",
342 |        "\n",
343 |        "  svg.append(\"g\")\n",
344 |        "      .attr(\"class\", \"x axis\")\n",
345 |        "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
346 |        "      .call(xAxis);\n",
347 |        "\n",
348 |        "  svg.append(\"g\")\n",
349 |        "      .attr(\"class\", \"y axis\")\n",
350 |        "      .call(yAxis);\n",
351 |        "\n",
352 |        "  svg.selectAll(\".bar\")\n",
353 |        "      .data(data)\n",
354 |        "    .enter().append(\"rect\")\n",
355 |        "      .attr(\"class\", \"bar\")\n",
356 |        "      .attr(\"x\", function(d) { return x(d.letter); })\n",
357 |        "      .attr(\"width\", x.rangeBand())\n",
358 |        "      .attr(\"y\", function(d) { return y(d.y); })\n",
359 |        "      .attr(\"height\", function(d) { return height - y(d.y); });\n",
360 |        "\n",
361 |        " </script>\n"
362 |       ],
363 |       "text/plain": [
364 |        "<IPython.core.display.HTML object>"
365 |       ]
366 |      },
367 |      "execution_count": 18,
368 |      "metadata": {},
369 |      "output_type": "execute_result"
370 |     }
371 |    ],
372 |    "source": [
373 |     "js_text = js_text_template.substitute({'data': json.dumps(data.to_dict(orient='records'))})\n",
374 |     "HTML(html_template.substitute({'css_text': css_text, 'js_text': js_text}))"
375 |    ]
376 |   },
377 |   {
378 |    "cell_type": "code",
379 |    "execution_count": 19,
380 |    "metadata": {},
381 |    "outputs": [
382 |     {
383 |      "data": {
384 |       "text/html": [
385 |        "<script>\n",
386 |        "\n",
387 |        "var bars = svg.selectAll(\".bar\").data([{\"y\": 0.5445635178847265, \"letter\": \"A\"}, {\"y\": 0.2992512550430584, \"letter\": \"B\"}, {\"y\": 0.9610760552740483, \"letter\": \"C\"}, {\"y\": 0.8844206422139018, \"letter\": \"D\"}]);\n",
388 |        "  \n",
389 |        "bars\n",
390 |        "  .transition()\n",
391 |        "    .attr(\"y\", function(d) { return y(d.y); })\n",
392 |        "    .attr(\"height\", function(d) { return height - y(d.y); });\n",
393 |        "\n",
394 |        "</script>"
395 |       ],
396 |       "text/plain": [
397 |        "<IPython.core.display.HTML object>"
398 |       ]
399 |      },
400 |      "execution_count": 19,
401 |      "metadata": {},
402 |      "output_type": "execute_result"
403 |     }
404 |    ],
405 |    "source": [
406 |     "data['y'] = [random.uniform(0,1) for d in data['y']]\n",
407 |     "js_text = js_text_template_2.substitute({'data': json.dumps(data.to_dict(orient='records'))})\n",
408 |     "HTML('<script>' + js_text + '</script>')"
409 |    ]
410 |   }
411 |  ],
412 |  "metadata": {
413 |   "anaconda-cloud": {},
414 |   "kernelspec": {
415 |    "display_name": "Python [default]",
416 |    "language": "python",
417 |    "name": "python2"
418 |   },
419 |   "language_info": {
420 |    "codemirror_mode": {
421 |     "name": "ipython",
422 |     "version": 2
423 |    },
424 |    "file_extension": ".py",
425 |    "mimetype": "text/x-python",
426 |    "name": "python",
427 |    "nbconvert_exporter": "python",
428 |    "pygments_lexer": "ipython2",
429 |    "version": "2.7.13"
430 |   },
431 |   "toc": {
432 |    "nav_menu": {},
433 |    "number_sections": true,
434 |    "sideBar": true,
435 |    "skip_h1_title": false,
436 |    "toc_cell": false,
437 |    "toc_position": {},
438 |    "toc_section_display": "block",
439 |    "toc_window_display": false
440 |   }
441 |  },
442 |  "nbformat": 4,
443 |  "nbformat_minor": 2
444 | }
445 | 


--------------------------------------------------------------------------------
/.ipynb_checkpoints/BAR CHART IN D3-checkpoint.ipynb:
--------------------------------------------------------------------------------
  1 | {
  2 |  "cells": [
  3 |   {
  4 |    "cell_type": "markdown",
  5 |    "metadata": {},
  6 |    "source": [
  7 |     "# BAR CHART IN D3"
  8 |    ]
  9 |   },
 10 |   {
 11 |    "cell_type": "markdown",
 12 |    "metadata": {},
 13 |    "source": [
 14 |     "## INTRODUCTION "
 15 |    ]
 16 |   },
 17 |   {
 18 |    "cell_type": "markdown",
 19 |    "metadata": {},
 20 |    "source": [
 21 |     "This is code continuation that is based on the blog : \n",
 22 |     "    \n",
 23 |     "    \n",
 24 |     "The notebook is a simple example of us D3 and how to make updates.\n",
 25 |     "\n",
 26 |     "The link to bl.ock is here : https://bl.ocks.org/mbostock/3885304\n",
 27 |     "\n",
 28 |     "Please refer to the blog for the explanation of this note book ."
 29 |    ]
 30 |   },
 31 |   {
 32 |    "cell_type": "code",
 33 |    "execution_count": 11,
 34 |    "metadata": {
 35 |     "collapsed": true
 36 |    },
 37 |    "outputs": [],
 38 |    "source": [
 39 |     "from IPython.core.display import display, HTML\n",
 40 |     "from string import Template\n",
 41 |     "import pandas as pd\n",
 42 |     "import json, random"
 43 |    ]
 44 |   },
 45 |   {
 46 |    "cell_type": "code",
 47 |    "execution_count": 12,
 48 |    "metadata": {},
 49 |    "outputs": [
 50 |     {
 51 |      "data": {
 52 |       "text/html": [
 53 |        "<script src=\"./d3.min.js\"></script>"
 54 |       ],
 55 |       "text/plain": [
 56 |        "<IPython.core.display.HTML object>"
 57 |       ]
 58 |      },
 59 |      "execution_count": 12,
 60 |      "metadata": {},
 61 |      "output_type": "execute_result"
 62 |     }
 63 |    ],
 64 |    "source": [
 65 |     "# Get the D3 host locally. \n",
 66 |     "HTML('<script src=\"./d3.min.js\"></script>')"
 67 |    ]
 68 |   },
 69 |   {
 70 |    "cell_type": "code",
 71 |    "execution_count": 13,
 72 |    "metadata": {
 73 |     "collapsed": true
 74 |    },
 75 |    "outputs": [],
 76 |    "source": [
 77 |     "#HTML templet\n",
 78 |     "html_template = Template('''\n",
 79 |     "<style> $css_text </style>\n",
 80 |     "<div id=\"graph-div\"></div>\n",
 81 |     "<script> $js_text </script>\n",
 82 |     "''')"
 83 |    ]
 84 |   },
 85 |   {
 86 |    "cell_type": "code",
 87 |    "execution_count": 14,
 88 |    "metadata": {
 89 |     "collapsed": true
 90 |    },
 91 |    "outputs": [],
 92 |    "source": [
 93 |     "# Css templet\n",
 94 |     "css_text = '''\n",
 95 |     "\n",
 96 |     ".bar {\n",
 97 |     "  fill: steelblue;\n",
 98 |     "}\n",
 99 |     "\n",
100 |     ".bar:hover {\n",
101 |     "  fill: brown;\n",
102 |     "}\n",
103 |     "\n",
104 |     ".axis {\n",
105 |     "  font: 10px sans-serif;\n",
106 |     "}\n",
107 |     "\n",
108 |     ".axis path,\n",
109 |     ".axis line {\n",
110 |     "  fill: none;\n",
111 |     "  stroke: #000;\n",
112 |     "  shape-rendering: crispEdges;\n",
113 |     "}\n",
114 |     "\n",
115 |     ".x.axis path {\n",
116 |     "  display: none;\n",
117 |     "}\n",
118 |     "\n",
119 |     "'''"
120 |    ]
121 |   },
122 |   {
123 |    "cell_type": "code",
124 |    "execution_count": 15,
125 |    "metadata": {
126 |     "collapsed": true
127 |    },
128 |    "outputs": [],
129 |    "source": [
130 |     "#Java script templet\n",
131 |     "js_text_template = Template('''\n",
132 |     "\n",
133 |     "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
134 |     "    width = 500 - margin.left - margin.right,\n",
135 |     "    height = 300 - margin.top - margin.bottom;\n",
136 |     "\n",
137 |     "var x = d3.scale.ordinal()\n",
138 |     "    .rangeRoundBands([0, width], .1);\n",
139 |     "\n",
140 |     "var y = d3.scale.linear()\n",
141 |     "    .range([height, 0]);\n",
142 |     "\n",
143 |     "var xAxis = d3.svg.axis()\n",
144 |     "    .scale(x)\n",
145 |     "    .orient(\"bottom\");\n",
146 |     "\n",
147 |     "var yAxis = d3.svg.axis()\n",
148 |     "    .scale(y)\n",
149 |     "    .orient(\"left\");\n",
150 |     "\n",
151 |     "var svg = d3.select(\"#graph-div\").append(\"svg\")\n",
152 |     "    .attr(\"width\", width + margin.left + margin.right)\n",
153 |     "    .attr(\"height\", height + margin.top + margin.bottom)\n",
154 |     "  .append(\"g\")\n",
155 |     "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
156 |     "\n",
157 |     "var data = $data ;\n",
158 |     "\n",
159 |     "  x.domain(data.map(function(d) { return d.letter; }));\n",
160 |     "  y.domain([0, d3.max(data, function(d) { return d.y; })]);\n",
161 |     "\n",
162 |     "  svg.append(\"g\")\n",
163 |     "      .attr(\"class\", \"x axis\")\n",
164 |     "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
165 |     "      .call(xAxis);\n",
166 |     "\n",
167 |     "  svg.append(\"g\")\n",
168 |     "      .attr(\"class\", \"y axis\")\n",
169 |     "      .call(yAxis);\n",
170 |     "\n",
171 |     "  svg.selectAll(\".bar\")\n",
172 |     "      .data(data)\n",
173 |     "    .enter().append(\"rect\")\n",
174 |     "      .attr(\"class\", \"bar\")\n",
175 |     "      .attr(\"x\", function(d) { return x(d.letter); })\n",
176 |     "      .attr(\"width\", x.rangeBand())\n",
177 |     "      .attr(\"y\", function(d) { return y(d.y); })\n",
178 |     "      .attr(\"height\", function(d) { return height - y(d.y); });\n",
179 |     "\n",
180 |     "''')"
181 |    ]
182 |   },
183 |   {
184 |    "cell_type": "code",
185 |    "execution_count": 16,
186 |    "metadata": {
187 |     "collapsed": true
188 |    },
189 |    "outputs": [],
190 |    "source": [
191 |     "js_text_template_2 = Template('''\n",
192 |     "\n",
193 |     "var bars = svg.selectAll(\".bar\").data($data);\n",
194 |     "  \n",
195 |     "bars\n",
196 |     "  .transition()\n",
197 |     "    .attr(\"y\", function(d) { return y(d.y); })\n",
198 |     "    .attr(\"height\", function(d) { return height - y(d.y); });\n",
199 |     "\n",
200 |     "''')"
201 |    ]
202 |   },
203 |   {
204 |    "cell_type": "code",
205 |    "execution_count": 17,
206 |    "metadata": {},
207 |    "outputs": [
208 |     {
209 |      "data": {
210 |       "text/html": [
211 |        "<div>\n",
212 |        "<style>\n",
213 |        "    .dataframe thead tr:only-child th {\n",
214 |        "        text-align: right;\n",
215 |        "    }\n",
216 |        "\n",
217 |        "    .dataframe thead th {\n",
218 |        "        text-align: left;\n",
219 |        "    }\n",
220 |        "\n",
221 |        "    .dataframe tbody tr th {\n",
222 |        "        vertical-align: top;\n",
223 |        "    }\n",
224 |        "</style>\n",
225 |        "<table border=\"1\" class=\"dataframe\">\n",
226 |        "  <thead>\n",
227 |        "    <tr style=\"text-align: right;\">\n",
228 |        "      <th></th>\n",
229 |        "      <th>letter</th>\n",
230 |        "      <th>y</th>\n",
231 |        "    </tr>\n",
232 |        "  </thead>\n",
233 |        "  <tbody>\n",
234 |        "    <tr>\n",
235 |        "      <th>0</th>\n",
236 |        "      <td>A</td>\n",
237 |        "      <td>1</td>\n",
238 |        "    </tr>\n",
239 |        "    <tr>\n",
240 |        "      <th>1</th>\n",
241 |        "      <td>B</td>\n",
242 |        "      <td>1</td>\n",
243 |        "    </tr>\n",
244 |        "    <tr>\n",
245 |        "      <th>2</th>\n",
246 |        "      <td>C</td>\n",
247 |        "      <td>1</td>\n",
248 |        "    </tr>\n",
249 |        "    <tr>\n",
250 |        "      <th>3</th>\n",
251 |        "      <td>D</td>\n",
252 |        "      <td>1</td>\n",
253 |        "    </tr>\n",
254 |        "  </tbody>\n",
255 |        "</table>\n",
256 |        "</div>"
257 |       ],
258 |       "text/plain": [
259 |        "  letter  y\n",
260 |        "0      A  1\n",
261 |        "1      B  1\n",
262 |        "2      C  1\n",
263 |        "3      D  1"
264 |       ]
265 |      },
266 |      "execution_count": 17,
267 |      "metadata": {},
268 |      "output_type": "execute_result"
269 |     }
270 |    ],
271 |    "source": [
272 |     "data = pd.DataFrame({'letter': ['A','B','C','D'], 'y': [1,1,1,1]})\n",
273 |     "data.head()"
274 |    ]
275 |   },
276 |   {
277 |    "cell_type": "code",
278 |    "execution_count": 18,
279 |    "metadata": {},
280 |    "outputs": [
281 |     {
282 |      "data": {
283 |       "text/html": [
284 |        "\n",
285 |        "<style> \n",
286 |        "\n",
287 |        ".bar {\n",
288 |        "  fill: steelblue;\n",
289 |        "}\n",
290 |        "\n",
291 |        ".bar:hover {\n",
292 |        "  fill: brown;\n",
293 |        "}\n",
294 |        "\n",
295 |        ".axis {\n",
296 |        "  font: 10px sans-serif;\n",
297 |        "}\n",
298 |        "\n",
299 |        ".axis path,\n",
300 |        ".axis line {\n",
301 |        "  fill: none;\n",
302 |        "  stroke: #000;\n",
303 |        "  shape-rendering: crispEdges;\n",
304 |        "}\n",
305 |        "\n",
306 |        ".x.axis path {\n",
307 |        "  display: none;\n",
308 |        "}\n",
309 |        "\n",
310 |        " </style>\n",
311 |        "<div id=\"graph-div\"></div>\n",
312 |        "<script> \n",
313 |        "\n",
314 |        "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
315 |        "    width = 500 - margin.left - margin.right,\n",
316 |        "    height = 300 - margin.top - margin.bottom;\n",
317 |        "\n",
318 |        "var x = d3.scale.ordinal()\n",
319 |        "    .rangeRoundBands([0, width], .1);\n",
320 |        "\n",
321 |        "var y = d3.scale.linear()\n",
322 |        "    .range([height, 0]);\n",
323 |        "\n",
324 |        "var xAxis = d3.svg.axis()\n",
325 |        "    .scale(x)\n",
326 |        "    .orient(\"bottom\");\n",
327 |        "\n",
328 |        "var yAxis = d3.svg.axis()\n",
329 |        "    .scale(y)\n",
330 |        "    .orient(\"left\");\n",
331 |        "\n",
332 |        "var svg = d3.select(\"#graph-div\").append(\"svg\")\n",
333 |        "    .attr(\"width\", width + margin.left + margin.right)\n",
334 |        "    .attr(\"height\", height + margin.top + margin.bottom)\n",
335 |        "  .append(\"g\")\n",
336 |        "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
337 |        "\n",
338 |        "var data = [{\"y\": 1, \"letter\": \"A\"}, {\"y\": 1, \"letter\": \"B\"}, {\"y\": 1, \"letter\": \"C\"}, {\"y\": 1, \"letter\": \"D\"}] ;\n",
339 |        "\n",
340 |        "  x.domain(data.map(function(d) { return d.letter; }));\n",
341 |        "  y.domain([0, d3.max(data, function(d) { return d.y; })]);\n",
342 |        "\n",
343 |        "  svg.append(\"g\")\n",
344 |        "      .attr(\"class\", \"x axis\")\n",
345 |        "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
346 |        "      .call(xAxis);\n",
347 |        "\n",
348 |        "  svg.append(\"g\")\n",
349 |        "      .attr(\"class\", \"y axis\")\n",
350 |        "      .call(yAxis);\n",
351 |        "\n",
352 |        "  svg.selectAll(\".bar\")\n",
353 |        "      .data(data)\n",
354 |        "    .enter().append(\"rect\")\n",
355 |        "      .attr(\"class\", \"bar\")\n",
356 |        "      .attr(\"x\", function(d) { return x(d.letter); })\n",
357 |        "      .attr(\"width\", x.rangeBand())\n",
358 |        "      .attr(\"y\", function(d) { return y(d.y); })\n",
359 |        "      .attr(\"height\", function(d) { return height - y(d.y); });\n",
360 |        "\n",
361 |        " </script>\n"
362 |       ],
363 |       "text/plain": [
364 |        "<IPython.core.display.HTML object>"
365 |       ]
366 |      },
367 |      "execution_count": 18,
368 |      "metadata": {},
369 |      "output_type": "execute_result"
370 |     }
371 |    ],
372 |    "source": [
373 |     "js_text = js_text_template.substitute({'data': json.dumps(data.to_dict(orient='records'))})\n",
374 |     "HTML(html_template.substitute({'css_text': css_text, 'js_text': js_text}))"
375 |    ]
376 |   },
377 |   {
378 |    "cell_type": "code",
379 |    "execution_count": 19,
380 |    "metadata": {},
381 |    "outputs": [
382 |     {
383 |      "data": {
384 |       "text/html": [
385 |        "<script>\n",
386 |        "\n",
387 |        "var bars = svg.selectAll(\".bar\").data([{\"y\": 0.5445635178847265, \"letter\": \"A\"}, {\"y\": 0.2992512550430584, \"letter\": \"B\"}, {\"y\": 0.9610760552740483, \"letter\": \"C\"}, {\"y\": 0.8844206422139018, \"letter\": \"D\"}]);\n",
388 |        "  \n",
389 |        "bars\n",
390 |        "  .transition()\n",
391 |        "    .attr(\"y\", function(d) { return y(d.y); })\n",
392 |        "    .attr(\"height\", function(d) { return height - y(d.y); });\n",
393 |        "\n",
394 |        "</script>"
395 |       ],
396 |       "text/plain": [
397 |        "<IPython.core.display.HTML object>"
398 |       ]
399 |      },
400 |      "execution_count": 19,
401 |      "metadata": {},
402 |      "output_type": "execute_result"
403 |     }
404 |    ],
405 |    "source": [
406 |     "data['y'] = [random.uniform(0,1) for d in data['y']]\n",
407 |     "js_text = js_text_template_2.substitute({'data': json.dumps(data.to_dict(orient='records'))})\n",
408 |     "HTML('<script>' + js_text + '</script>')"
409 |    ]
410 |   }
411 |  ],
412 |  "metadata": {
413 |   "anaconda-cloud": {},
414 |   "kernelspec": {
415 |    "display_name": "Python [default]",
416 |    "language": "python",
417 |    "name": "python2"
418 |   },
419 |   "language_info": {
420 |    "codemirror_mode": {
421 |     "name": "ipython",
422 |     "version": 2
423 |    },
424 |    "file_extension": ".py",
425 |    "mimetype": "text/x-python",
426 |    "name": "python",
427 |    "nbconvert_exporter": "python",
428 |    "pygments_lexer": "ipython2",
429 |    "version": "2.7.13"
430 |   },
431 |   "toc": {
432 |    "nav_menu": {},
433 |    "number_sections": true,
434 |    "sideBar": true,
435 |    "skip_h1_title": false,
436 |    "toc_cell": false,
437 |    "toc_position": {},
438 |    "toc_section_display": "block",
439 |    "toc_window_display": false
440 |   }
441 |  },
442 |  "nbformat": 4,
443 |  "nbformat_minor": 2
444 | }
445 | 


--------------------------------------------------------------------------------
/SCATTER PLOT.ipynb:
--------------------------------------------------------------------------------
  1 | {
  2 |  "cells": [
  3 |   {
  4 |    "cell_type": "markdown",
  5 |    "metadata": {},
  6 |    "source": [
  7 |     "# IRIS DATA: SIMPLE SCATTER PLOT USING D3 IN JUYPTER NOTEBOOK"
  8 |    ]
  9 |   },
 10 |   {
 11 |    "cell_type": "markdown",
 12 |    "metadata": {},
 13 |    "source": [
 14 |     "## Introduction"
 15 |    ]
 16 |   },
 17 |   {
 18 |    "cell_type": "markdown",
 19 |    "metadata": {},
 20 |    "source": [
 21 |     "This code is based on the blog explanation. The blog explains the various steps involved. Blog Link :\n",
 22 |     "\n",
 23 |     "\n",
 24 |     "Now let us use the famous Iris data set to represent a scatter plot.\n",
 25 |     "We will use the bl.ocks template from here ,to construct and customize the scatterplot in order to learn more about it .The link to the data set is here\n",
 26 |     "(https://gist.githubusercontent.com/mbostock/3887118/raw/2e68ffbeb23fe4dadd9b0f6bca62e9def6ee9e17/data.tsv) and it is in the tsv format.\n",
 27 |     "\n",
 28 |     "Please refer to the blog for the explanation of this note book ."
 29 |    ]
 30 |   },
 31 |   {
 32 |    "cell_type": "code",
 33 |    "execution_count": 55,
 34 |    "metadata": {
 35 |     "collapsed": true
 36 |    },
 37 |    "outputs": [],
 38 |    "source": [
 39 |     "# load the Preliminaries\n",
 40 |     "from IPython.core.display import display, HTML\n",
 41 |     "from string import Template\n",
 42 |     "import pandas as pd\n",
 43 |     "import json, random"
 44 |    ]
 45 |   },
 46 |   {
 47 |    "cell_type": "code",
 48 |    "execution_count": 56,
 49 |    "metadata": {},
 50 |    "outputs": [
 51 |     {
 52 |      "data": {
 53 |       "text/html": [
 54 |        "<script src=\"./d3.min.js\"></script>"
 55 |       ],
 56 |       "text/plain": [
 57 |        "<IPython.core.display.HTML object>"
 58 |       ]
 59 |      },
 60 |      "execution_count": 56,
 61 |      "metadata": {},
 62 |      "output_type": "execute_result"
 63 |     }
 64 |    ],
 65 |    "source": [
 66 |     "# Get the D3 host locally. \n",
 67 |     "HTML('<script src=\"./d3.min.js\"></script>')"
 68 |    ]
 69 |   },
 70 |   {
 71 |    "cell_type": "code",
 72 |    "execution_count": 47,
 73 |    "metadata": {},
 74 |    "outputs": [
 75 |     {
 76 |      "data": {
 77 |       "text/html": [
 78 |        "<div>\n",
 79 |        "<style>\n",
 80 |        "    .dataframe thead tr:only-child th {\n",
 81 |        "        text-align: right;\n",
 82 |        "    }\n",
 83 |        "\n",
 84 |        "    .dataframe thead th {\n",
 85 |        "        text-align: left;\n",
 86 |        "    }\n",
 87 |        "\n",
 88 |        "    .dataframe tbody tr th {\n",
 89 |        "        vertical-align: top;\n",
 90 |        "    }\n",
 91 |        "</style>\n",
 92 |        "<table border=\"1\" class=\"dataframe\">\n",
 93 |        "  <thead>\n",
 94 |        "    <tr style=\"text-align: right;\">\n",
 95 |        "      <th></th>\n",
 96 |        "      <th>sepalLength</th>\n",
 97 |        "      <th>sepalWidth</th>\n",
 98 |        "      <th>petalLength</th>\n",
 99 |        "      <th>petalWidth</th>\n",
100 |        "      <th>species</th>\n",
101 |        "    </tr>\n",
102 |        "  </thead>\n",
103 |        "  <tbody>\n",
104 |        "    <tr>\n",
105 |        "      <th>0</th>\n",
106 |        "      <td>5.1</td>\n",
107 |        "      <td>3.5</td>\n",
108 |        "      <td>1.4</td>\n",
109 |        "      <td>0.2</td>\n",
110 |        "      <td>setosa</td>\n",
111 |        "    </tr>\n",
112 |        "    <tr>\n",
113 |        "      <th>1</th>\n",
114 |        "      <td>4.9</td>\n",
115 |        "      <td>3.0</td>\n",
116 |        "      <td>1.4</td>\n",
117 |        "      <td>0.2</td>\n",
118 |        "      <td>setosa</td>\n",
119 |        "    </tr>\n",
120 |        "    <tr>\n",
121 |        "      <th>2</th>\n",
122 |        "      <td>4.7</td>\n",
123 |        "      <td>3.2</td>\n",
124 |        "      <td>1.3</td>\n",
125 |        "      <td>0.2</td>\n",
126 |        "      <td>setosa</td>\n",
127 |        "    </tr>\n",
128 |        "    <tr>\n",
129 |        "      <th>3</th>\n",
130 |        "      <td>4.6</td>\n",
131 |        "      <td>3.1</td>\n",
132 |        "      <td>1.5</td>\n",
133 |        "      <td>0.2</td>\n",
134 |        "      <td>setosa</td>\n",
135 |        "    </tr>\n",
136 |        "    <tr>\n",
137 |        "      <th>4</th>\n",
138 |        "      <td>5.0</td>\n",
139 |        "      <td>3.6</td>\n",
140 |        "      <td>1.4</td>\n",
141 |        "      <td>0.2</td>\n",
142 |        "      <td>setosa</td>\n",
143 |        "    </tr>\n",
144 |        "  </tbody>\n",
145 |        "</table>\n",
146 |        "</div>"
147 |       ],
148 |       "text/plain": [
149 |        "   sepalLength  sepalWidth  petalLength  petalWidth species\n",
150 |        "0          5.1         3.5          1.4         0.2  setosa\n",
151 |        "1          4.9         3.0          1.4         0.2  setosa\n",
152 |        "2          4.7         3.2          1.3         0.2  setosa\n",
153 |        "3          4.6         3.1          1.5         0.2  setosa\n",
154 |        "4          5.0         3.6          1.4         0.2  setosa"
155 |       ]
156 |      },
157 |      "execution_count": 47,
158 |      "metadata": {},
159 |      "output_type": "execute_result"
160 |     }
161 |    ],
162 |    "source": [
163 |     "# get the data from the link and parse it to convert it into a datafram-it's in tsv format\n",
164 |     "filename = 'https://gist.githubusercontent.com/mbostock/3887118/raw/2e68ffbeb23fe4dadd9b0f6bca62e9def6ee9e17/data.tsv'\n",
165 |     "iris = pd.read_csv(filename,sep=\"\\t\")\n",
166 |     "iris.head()"
167 |    ]
168 |   },
169 |   {
170 |    "cell_type": "code",
171 |    "execution_count": 48,
172 |    "metadata": {
173 |     "collapsed": true
174 |    },
175 |    "outputs": [],
176 |    "source": [
177 |     "# D3 accepts dictionaries , so let's convert data frame into dictionaries."
178 |    ]
179 |   },
180 |   {
181 |    "cell_type": "code",
182 |    "execution_count": 49,
183 |    "metadata": {},
184 |    "outputs": [
185 |     {
186 |      "data": {
187 |       "text/plain": [
188 |        "[{'petalLength': 1.4,\n",
189 |        "  'petalWidth': 0.2,\n",
190 |        "  'sepalLength': 5.1,\n",
191 |        "  'sepalWidth': 3.5,\n",
192 |        "  'species': 'setosa'},\n",
193 |        " {'petalLength': 1.4,\n",
194 |        "  'petalWidth': 0.2,\n",
195 |        "  'sepalLength': 4.9,\n",
196 |        "  'sepalWidth': 3.0,\n",
197 |        "  'species': 'setosa'},\n",
198 |        " {'petalLength': 1.3,\n",
199 |        "  'petalWidth': 0.2,\n",
200 |        "  'sepalLength': 4.7,\n",
201 |        "  'sepalWidth': 3.2,\n",
202 |        "  'species': 'setosa'},\n",
203 |        " {'petalLength': 1.5,\n",
204 |        "  'petalWidth': 0.2,\n",
205 |        "  'sepalLength': 4.6,\n",
206 |        "  'sepalWidth': 3.1,\n",
207 |        "  'species': 'setosa'},\n",
208 |        " {'petalLength': 1.4,\n",
209 |        "  'petalWidth': 0.2,\n",
210 |        "  'sepalLength': 5.0,\n",
211 |        "  'sepalWidth': 3.6,\n",
212 |        "  'species': 'setosa'}]"
213 |       ]
214 |      },
215 |      "execution_count": 49,
216 |      "metadata": {},
217 |      "output_type": "execute_result"
218 |     }
219 |    ],
220 |    "source": [
221 |     "iris_array_of_dicts = iris.to_dict(orient='records')\n",
222 |     "iris_array_of_dicts[:5]"
223 |    ]
224 |   },
225 |   {
226 |    "cell_type": "markdown",
227 |    "metadata": {},
228 |    "source": [
229 |     "## CSS,HTML,Javascript  based on bl.ocks example"
230 |    ]
231 |   },
232 |   {
233 |    "cell_type": "markdown",
234 |    "metadata": {},
235 |    "source": [
236 |     "Note that in the below css_text, we have removed the 'body' style reference from the original bl.ocks text. This is to avoid this style changing the rest of the notebook.`m\n",
237 |     "\n",
238 |     "You can get bl.ocks from here : https://bl.ocks.org/mbostock/3887118"
239 |    ]
240 |   },
241 |   {
242 |    "cell_type": "code",
243 |    "execution_count": 51,
244 |    "metadata": {
245 |     "collapsed": true
246 |    },
247 |    "outputs": [],
248 |    "source": [
249 |     "css_text = '''\n",
250 |     ".axis path,\n",
251 |     ".axis line {\n",
252 |     "  fill: none;\n",
253 |     "  stroke: #000;\n",
254 |     "  shape-rendering: crispEdges;\n",
255 |     "}\n",
256 |     "\n",
257 |     ".dot {\n",
258 |     "  stroke: #000;\n",
259 |     "}\n",
260 |     "'''"
261 |    ]
262 |   },
263 |   {
264 |    "cell_type": "markdown",
265 |    "metadata": {},
266 |    "source": [
267 |     "Next, let’s copy the java script and make two changes that are :\n",
268 |     "\n",
269 |     "* The first set of changes is to the width and height of the image\n",
270 |     "* The second change is simply to reference a different DOM element as the starting point. D3 will look for a specific DOM element to write things to. These block usually reference an external file like csv/tsv. The $ is going to be used in the templet engine to find and replace.\n",
271 |     "\n",
272 |     "\n",
273 |     "Note : //* — is used as comments , so those lines will not be executed and below that you can see the changes that were made."
274 |    ]
275 |   },
276 |   {
277 |    "cell_type": "code",
278 |    "execution_count": 52,
279 |    "metadata": {
280 |     "collapsed": true
281 |    },
282 |    "outputs": [],
283 |    "source": [
284 |     "js_text_template = Template('''\n",
285 |     "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
286 |     "// ****    width = 960 - margin.left - margin.right, ****\n",
287 |     "// ****    height = 500 - margin.top - margin.bottom; ****\n",
288 |     "    width = 720 - margin.left - margin.right,\n",
289 |     "    height = 375 - margin.top - margin.bottom;\n",
290 |     "\n",
291 |     "var x = d3.scale.linear()\n",
292 |     "    .range([0, width]);\n",
293 |     "\n",
294 |     "var y = d3.scale.linear()\n",
295 |     "    .range([height, 0]);\n",
296 |     "\n",
297 |     "var color = d3.scale.category10();\n",
298 |     "\n",
299 |     "var xAxis = d3.svg.axis()\n",
300 |     "    .scale(x)\n",
301 |     "    .orient(\"bottom\");\n",
302 |     "\n",
303 |     "var yAxis = d3.svg.axis()\n",
304 |     "    .scale(y)\n",
305 |     "    .orient(\"left\");\n",
306 |     "\n",
307 |     "// **** var svg = d3.select(\"body\").append(\"svg\") ****\n",
308 |     "var svg = d3.select(\"#$graphdiv\").append(\"svg\")\n",
309 |     "    .attr(\"width\", width + margin.left + margin.right)\n",
310 |     "    .attr(\"height\", height + margin.top + margin.bottom)\n",
311 |     "  .append(\"g\")\n",
312 |     "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
313 |     "\n",
314 |     "// **** d3.tsv(\"data.tsv\", function(error, data) { ****\n",
315 |     "// ****  if (error) throw error; ****\n",
316 |     "\n",
317 |     "var data = $python_data ;\n",
318 |     "\n",
319 |     "  data.forEach(function(d) {\n",
320 |     "    d.sepalLength = +d.sepalLength;\n",
321 |     "    d.sepalWidth = +d.sepalWidth;\n",
322 |     "  });\n",
323 |     "\n",
324 |     "  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();\n",
325 |     "  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();\n",
326 |     "\n",
327 |     "  svg.append(\"g\")\n",
328 |     "      .attr(\"class\", \"x axis\")\n",
329 |     "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
330 |     "      .call(xAxis)\n",
331 |     "    .append(\"text\")\n",
332 |     "      .attr(\"class\", \"label\")\n",
333 |     "      .attr(\"x\", width)\n",
334 |     "      .attr(\"y\", -6)\n",
335 |     "      .style(\"text-anchor\", \"end\")\n",
336 |     "      .text(\"Sepal Width (cm)\");\n",
337 |     "\n",
338 |     "  svg.append(\"g\")\n",
339 |     "      .attr(\"class\", \"y axis\")\n",
340 |     "      .call(yAxis)\n",
341 |     "    .append(\"text\")\n",
342 |     "      .attr(\"class\", \"label\")\n",
343 |     "      .attr(\"transform\", \"rotate(-90)\")\n",
344 |     "      .attr(\"y\", 6)\n",
345 |     "      .attr(\"dy\", \".71em\")\n",
346 |     "      .style(\"text-anchor\", \"end\")\n",
347 |     "      .text(\"Sepal Length (cm)\")\n",
348 |     "\n",
349 |     "  svg.selectAll(\".dot\")\n",
350 |     "      .data(data)\n",
351 |     "    .enter().append(\"circle\")\n",
352 |     "      .attr(\"class\", \"dot\")\n",
353 |     "      .attr(\"r\", 3.5)\n",
354 |     "      .attr(\"cx\", function(d) { return x(d.sepalWidth); })\n",
355 |     "      .attr(\"cy\", function(d) { return y(d.sepalLength); })\n",
356 |     "      .style(\"fill\", function(d) { return color(d.species); });\n",
357 |     "\n",
358 |     "  var legend = svg.selectAll(\".legend\")\n",
359 |     "      .data(color.domain())\n",
360 |     "    .enter().append(\"g\")\n",
361 |     "      .attr(\"class\", \"legend\")\n",
362 |     "      .attr(\"transform\", function(d, i) { return \"translate(0,\" + i * 20 + \")\"; });\n",
363 |     "\n",
364 |     "  legend.append(\"rect\")\n",
365 |     "      .attr(\"x\", width - 18)\n",
366 |     "      .attr(\"width\", 18)\n",
367 |     "      .attr(\"height\", 18)\n",
368 |     "      .style(\"fill\", color);\n",
369 |     "\n",
370 |     "  legend.append(\"text\")\n",
371 |     "      .attr(\"x\", width - 24)\n",
372 |     "      .attr(\"y\", 9)\n",
373 |     "      .attr(\"dy\", \".35em\")\n",
374 |     "      .style(\"text-anchor\", \"end\")\n",
375 |     "      .text(function(d) { return d; });\n",
376 |     "\n",
377 |     "// **** }); ****\n",
378 |     "\n",
379 |     "''')"
380 |    ]
381 |   },
382 |   {
383 |    "cell_type": "code",
384 |    "execution_count": 53,
385 |    "metadata": {
386 |     "collapsed": true
387 |    },
388 |    "outputs": [],
389 |    "source": [
390 |     "# Now let’s make a template for the html string\n",
391 |     "html_template = Template('''\n",
392 |     "<style> $css_text </style>\n",
393 |     "<div id=\"graph-div\"></div>\n",
394 |     "<script> $js_text </script>\n",
395 |     "''')\n"
396 |    ]
397 |   },
398 |   {
399 |    "cell_type": "markdown",
400 |    "metadata": {},
401 |    "source": [
402 |     "You can notice I have put css text for the style which we created earlier.Then we use div instead of a body and use that id to reference later .First we have the template engine for the java script where we give that data and create a connection for graphdive by referencing the id .Now for the next step ,add the css and the java script to the HTML template engine which will combine it to execute the output(the scatter plot)"
403 |    ]
404 |   },
405 |   {
406 |    "cell_type": "code",
407 |    "execution_count": 54,
408 |    "metadata": {},
409 |    "outputs": [
410 |     {
411 |      "data": {
412 |       "text/html": [
413 |        "\n",
414 |        "<style> \n",
415 |        ".axis path,\n",
416 |        ".axis line {\n",
417 |        "  fill: none;\n",
418 |        "  stroke: #000;\n",
419 |        "  shape-rendering: crispEdges;\n",
420 |        "}\n",
421 |        "\n",
422 |        ".dot {\n",
423 |        "  stroke: #000;\n",
424 |        "}\n",
425 |        " </style>\n",
426 |        "<div id=\"graph-div\"></div>\n",
427 |        "<script> \n",
428 |        "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
429 |        "// ****    width = 960 - margin.left - margin.right, ****\n",
430 |        "// ****    height = 500 - margin.top - margin.bottom; ****\n",
431 |        "    width = 720 - margin.left - margin.right,\n",
432 |        "    height = 375 - margin.top - margin.bottom;\n",
433 |        "\n",
434 |        "var x = d3.scale.linear()\n",
435 |        "    .range([0, width]);\n",
436 |        "\n",
437 |        "var y = d3.scale.linear()\n",
438 |        "    .range([height, 0]);\n",
439 |        "\n",
440 |        "var color = d3.scale.category10();\n",
441 |        "\n",
442 |        "var xAxis = d3.svg.axis()\n",
443 |        "    .scale(x)\n",
444 |        "    .orient(\"bottom\");\n",
445 |        "\n",
446 |        "var yAxis = d3.svg.axis()\n",
447 |        "    .scale(y)\n",
448 |        "    .orient(\"left\");\n",
449 |        "\n",
450 |        "// **** var svg = d3.select(\"body\").append(\"svg\") ****\n",
451 |        "var svg = d3.select(\"#graph-div\").append(\"svg\")\n",
452 |        "    .attr(\"width\", width + margin.left + margin.right)\n",
453 |        "    .attr(\"height\", height + margin.top + margin.bottom)\n",
454 |        "  .append(\"g\")\n",
455 |        "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
456 |        "\n",
457 |        "// **** d3.tsv(\"data.tsv\", function(error, data) { ****\n",
458 |        "// ****  if (error) throw error; ****\n",
459 |        "\n",
460 |        "var data = [{\"sepalLength\": 5.1, \"petalWidth\": 0.2, \"sepalWidth\": 3.5, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.2, \"sepalWidth\": 3.0, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.7, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.2, \"sepalWidth\": 3.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.6, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.4, \"sepalWidth\": 3.9, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.3, \"sepalWidth\": 3.4, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 4.4, \"petalWidth\": 0.2, \"sepalWidth\": 2.9, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.1, \"sepalWidth\": 3.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.7, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.1, \"sepalWidth\": 3.0, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.3, \"petalWidth\": 0.1, \"sepalWidth\": 3.0, \"petalLength\": 1.1, \"species\": \"setosa\"}, {\"sepalLength\": 5.8, \"petalWidth\": 0.2, \"sepalWidth\": 4.0, \"petalLength\": 1.2, \"species\": \"setosa\"}, {\"sepalLength\": 5.7, \"petalWidth\": 0.4, \"sepalWidth\": 4.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.4, \"sepalWidth\": 3.9, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.3, \"sepalWidth\": 3.5, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.7, \"petalWidth\": 0.3, \"sepalWidth\": 3.8, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.3, \"sepalWidth\": 3.8, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.4, \"sepalWidth\": 3.7, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.2, \"sepalWidth\": 3.6, \"petalLength\": 1.0, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.5, \"sepalWidth\": 3.3, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.9, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.0, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.4, \"sepalWidth\": 3.4, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.2, \"petalWidth\": 0.2, \"sepalWidth\": 3.5, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.2, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.7, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.2, \"sepalWidth\": 3.1, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.4, \"sepalWidth\": 3.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.2, \"petalWidth\": 0.1, \"sepalWidth\": 4.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.5, \"petalWidth\": 0.2, \"sepalWidth\": 4.2, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.2, \"sepalWidth\": 3.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.2, \"species\": \"setosa\"}, {\"sepalLength\": 5.5, \"petalWidth\": 0.2, \"sepalWidth\": 3.5, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.1, \"sepalWidth\": 3.6, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.0, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.3, \"sepalWidth\": 3.5, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.5, \"petalWidth\": 0.3, \"sepalWidth\": 2.3, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.6, \"sepalWidth\": 3.5, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.4, \"sepalWidth\": 3.8, \"petalLength\": 1.9, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.3, \"sepalWidth\": 3.0, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.2, \"sepalWidth\": 3.8, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.3, \"petalWidth\": 0.2, \"sepalWidth\": 3.7, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.3, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 7.0, \"petalWidth\": 1.4, \"sepalWidth\": 3.2, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.5, \"sepalWidth\": 3.2, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.9, \"petalWidth\": 1.5, \"sepalWidth\": 3.1, \"petalLength\": 4.9, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.3, \"sepalWidth\": 2.3, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.5, \"petalWidth\": 1.5, \"sepalWidth\": 2.8, \"petalLength\": 4.6, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.3, \"sepalWidth\": 2.8, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.6, \"sepalWidth\": 3.3, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 4.9, \"petalWidth\": 1.0, \"sepalWidth\": 2.4, \"petalLength\": 3.3, \"species\": \"versicolor\"}, {\"sepalLength\": 6.6, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.6, \"species\": \"versicolor\"}, {\"sepalLength\": 5.2, \"petalWidth\": 1.4, \"sepalWidth\": 2.7, \"petalLength\": 3.9, \"species\": \"versicolor\"}, {\"sepalLength\": 5.0, \"petalWidth\": 1.0, \"sepalWidth\": 2.0, \"petalLength\": 3.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.9, \"petalWidth\": 1.5, \"sepalWidth\": 3.0, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.0, \"sepalWidth\": 2.2, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.4, \"sepalWidth\": 2.9, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 3.6, \"species\": \"versicolor\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.4, \"sepalWidth\": 3.1, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.5, \"sepalWidth\": 3.0, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.0, \"sepalWidth\": 2.7, \"petalLength\": 4.1, \"species\": \"versicolor\"}, {\"sepalLength\": 6.2, \"petalWidth\": 1.5, \"sepalWidth\": 2.2, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.1, \"sepalWidth\": 2.5, \"petalLength\": 3.9, \"species\": \"versicolor\"}, {\"sepalLength\": 5.9, \"petalWidth\": 1.8, \"sepalWidth\": 3.2, \"petalLength\": 4.8, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.3, \"sepalWidth\": 2.8, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.5, \"sepalWidth\": 2.5, \"petalLength\": 4.9, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.2, \"sepalWidth\": 2.8, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.3, \"species\": \"versicolor\"}, {\"sepalLength\": 6.6, \"petalWidth\": 1.4, \"sepalWidth\": 3.0, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 6.8, \"petalWidth\": 1.4, \"sepalWidth\": 2.8, \"petalLength\": 4.8, \"species\": \"versicolor\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.7, \"sepalWidth\": 3.0, \"petalLength\": 5.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.5, \"sepalWidth\": 2.9, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.0, \"sepalWidth\": 2.6, \"petalLength\": 3.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.1, \"sepalWidth\": 2.4, \"petalLength\": 3.8, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.0, \"sepalWidth\": 2.4, \"petalLength\": 3.7, \"species\": \"versicolor\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.2, \"sepalWidth\": 2.7, \"petalLength\": 3.9, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.6, \"sepalWidth\": 2.7, \"petalLength\": 5.1, \"species\": \"versicolor\"}, {\"sepalLength\": 5.4, \"petalWidth\": 1.5, \"sepalWidth\": 3.0, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.6, \"sepalWidth\": 3.4, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.5, \"sepalWidth\": 3.1, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.3, \"sepalWidth\": 2.3, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.3, \"sepalWidth\": 3.0, \"petalLength\": 4.1, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.3, \"sepalWidth\": 2.5, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.2, \"sepalWidth\": 2.6, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.4, \"sepalWidth\": 3.0, \"petalLength\": 4.6, \"species\": \"versicolor\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.2, \"sepalWidth\": 2.6, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 5.0, \"petalWidth\": 1.0, \"sepalWidth\": 2.3, \"petalLength\": 3.3, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.3, \"sepalWidth\": 2.7, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.2, \"sepalWidth\": 3.0, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 6.2, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.3, \"species\": \"versicolor\"}, {\"sepalLength\": 5.1, \"petalWidth\": 1.1, \"sepalWidth\": 2.5, \"petalLength\": 3.0, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.3, \"sepalWidth\": 2.8, \"petalLength\": 4.1, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 2.5, \"sepalWidth\": 3.3, \"petalLength\": 6.0, \"species\": \"virginica\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.9, \"sepalWidth\": 2.7, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 7.1, \"petalWidth\": 2.1, \"sepalWidth\": 3.0, \"petalLength\": 5.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.8, \"sepalWidth\": 2.9, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 2.2, \"sepalWidth\": 3.0, \"petalLength\": 5.8, \"species\": \"virginica\"}, {\"sepalLength\": 7.6, \"petalWidth\": 2.1, \"sepalWidth\": 3.0, \"petalLength\": 6.6, \"species\": \"virginica\"}, {\"sepalLength\": 4.9, \"petalWidth\": 1.7, \"sepalWidth\": 2.5, \"petalLength\": 4.5, \"species\": \"virginica\"}, {\"sepalLength\": 7.3, \"petalWidth\": 1.8, \"sepalWidth\": 2.9, \"petalLength\": 6.3, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.8, \"sepalWidth\": 2.5, \"petalLength\": 5.8, \"species\": \"virginica\"}, {\"sepalLength\": 7.2, \"petalWidth\": 2.5, \"sepalWidth\": 3.6, \"petalLength\": 6.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 2.0, \"sepalWidth\": 3.2, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.9, \"sepalWidth\": 2.7, \"petalLength\": 5.3, \"species\": \"virginica\"}, {\"sepalLength\": 6.8, \"petalWidth\": 2.1, \"sepalWidth\": 3.0, \"petalLength\": 5.5, \"species\": \"virginica\"}, {\"sepalLength\": 5.7, \"petalWidth\": 2.0, \"sepalWidth\": 2.5, \"petalLength\": 5.0, \"species\": \"virginica\"}, {\"sepalLength\": 5.8, \"petalWidth\": 2.4, \"sepalWidth\": 2.8, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 2.3, \"sepalWidth\": 3.2, \"petalLength\": 5.3, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 5.5, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.2, \"sepalWidth\": 3.8, \"petalLength\": 6.7, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.3, \"sepalWidth\": 2.6, \"petalLength\": 6.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.5, \"sepalWidth\": 2.2, \"petalLength\": 5.0, \"species\": \"virginica\"}, {\"sepalLength\": 6.9, \"petalWidth\": 2.3, \"sepalWidth\": 3.2, \"petalLength\": 5.7, \"species\": \"virginica\"}, {\"sepalLength\": 5.6, \"petalWidth\": 2.0, \"sepalWidth\": 2.8, \"petalLength\": 4.9, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.0, \"sepalWidth\": 2.8, \"petalLength\": 6.7, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.8, \"sepalWidth\": 2.7, \"petalLength\": 4.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.1, \"sepalWidth\": 3.3, \"petalLength\": 5.7, \"species\": \"virginica\"}, {\"sepalLength\": 7.2, \"petalWidth\": 1.8, \"sepalWidth\": 3.2, \"petalLength\": 6.0, \"species\": \"virginica\"}, {\"sepalLength\": 6.2, \"petalWidth\": 1.8, \"sepalWidth\": 2.8, \"petalLength\": 4.8, \"species\": \"virginica\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 4.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 2.1, \"sepalWidth\": 2.8, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 7.2, \"petalWidth\": 1.6, \"sepalWidth\": 3.0, \"petalLength\": 5.8, \"species\": \"virginica\"}, {\"sepalLength\": 7.4, \"petalWidth\": 1.9, \"sepalWidth\": 2.8, \"petalLength\": 6.1, \"species\": \"virginica\"}, {\"sepalLength\": 7.9, \"petalWidth\": 2.0, \"sepalWidth\": 3.8, \"petalLength\": 6.4, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 2.2, \"sepalWidth\": 2.8, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.5, \"sepalWidth\": 2.8, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.4, \"sepalWidth\": 2.6, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.3, \"sepalWidth\": 3.0, \"petalLength\": 6.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 2.4, \"sepalWidth\": 3.4, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.8, \"sepalWidth\": 3.1, \"petalLength\": 5.5, \"species\": \"virginica\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 4.8, \"species\": \"virginica\"}, {\"sepalLength\": 6.9, \"petalWidth\": 2.1, \"sepalWidth\": 3.1, \"petalLength\": 5.4, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.4, \"sepalWidth\": 3.1, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.9, \"petalWidth\": 2.3, \"sepalWidth\": 3.1, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.9, \"sepalWidth\": 2.7, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.8, \"petalWidth\": 2.3, \"sepalWidth\": 3.2, \"petalLength\": 5.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.5, \"sepalWidth\": 3.3, \"petalLength\": 5.7, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.3, \"sepalWidth\": 3.0, \"petalLength\": 5.2, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.9, \"sepalWidth\": 2.5, \"petalLength\": 5.0, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 2.0, \"sepalWidth\": 3.0, \"petalLength\": 5.2, \"species\": \"virginica\"}, {\"sepalLength\": 6.2, \"petalWidth\": 2.3, \"sepalWidth\": 3.4, \"petalLength\": 5.4, \"species\": \"virginica\"}, {\"sepalLength\": 5.9, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 5.1, \"species\": \"virginica\"}] ;\n",
461 |        "\n",
462 |        "  data.forEach(function(d) {\n",
463 |        "    d.sepalLength = +d.sepalLength;\n",
464 |        "    d.sepalWidth = +d.sepalWidth;\n",
465 |        "  });\n",
466 |        "\n",
467 |        "  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();\n",
468 |        "  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();\n",
469 |        "\n",
470 |        "  svg.append(\"g\")\n",
471 |        "      .attr(\"class\", \"x axis\")\n",
472 |        "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
473 |        "      .call(xAxis)\n",
474 |        "    .append(\"text\")\n",
475 |        "      .attr(\"class\", \"label\")\n",
476 |        "      .attr(\"x\", width)\n",
477 |        "      .attr(\"y\", -6)\n",
478 |        "      .style(\"text-anchor\", \"end\")\n",
479 |        "      .text(\"Sepal Width (cm)\");\n",
480 |        "\n",
481 |        "  svg.append(\"g\")\n",
482 |        "      .attr(\"class\", \"y axis\")\n",
483 |        "      .call(yAxis)\n",
484 |        "    .append(\"text\")\n",
485 |        "      .attr(\"class\", \"label\")\n",
486 |        "      .attr(\"transform\", \"rotate(-90)\")\n",
487 |        "      .attr(\"y\", 6)\n",
488 |        "      .attr(\"dy\", \".71em\")\n",
489 |        "      .style(\"text-anchor\", \"end\")\n",
490 |        "      .text(\"Sepal Length (cm)\")\n",
491 |        "\n",
492 |        "  svg.selectAll(\".dot\")\n",
493 |        "      .data(data)\n",
494 |        "    .enter().append(\"circle\")\n",
495 |        "      .attr(\"class\", \"dot\")\n",
496 |        "      .attr(\"r\", 3.5)\n",
497 |        "      .attr(\"cx\", function(d) { return x(d.sepalWidth); })\n",
498 |        "      .attr(\"cy\", function(d) { return y(d.sepalLength); })\n",
499 |        "      .style(\"fill\", function(d) { return color(d.species); });\n",
500 |        "\n",
501 |        "  var legend = svg.selectAll(\".legend\")\n",
502 |        "      .data(color.domain())\n",
503 |        "    .enter().append(\"g\")\n",
504 |        "      .attr(\"class\", \"legend\")\n",
505 |        "      .attr(\"transform\", function(d, i) { return \"translate(0,\" + i * 20 + \")\"; });\n",
506 |        "\n",
507 |        "  legend.append(\"rect\")\n",
508 |        "      .attr(\"x\", width - 18)\n",
509 |        "      .attr(\"width\", 18)\n",
510 |        "      .attr(\"height\", 18)\n",
511 |        "      .style(\"fill\", color);\n",
512 |        "\n",
513 |        "  legend.append(\"text\")\n",
514 |        "      .attr(\"x\", width - 24)\n",
515 |        "      .attr(\"y\", 9)\n",
516 |        "      .attr(\"dy\", \".35em\")\n",
517 |        "      .style(\"text-anchor\", \"end\")\n",
518 |        "      .text(function(d) { return d; });\n",
519 |        "\n",
520 |        "// **** }); ****\n",
521 |        "\n",
522 |        " </script>\n"
523 |       ],
524 |       "text/plain": [
525 |        "<IPython.core.display.HTML object>"
526 |       ]
527 |      },
528 |      "execution_count": 54,
529 |      "metadata": {},
530 |      "output_type": "execute_result"
531 |     }
532 |    ],
533 |    "source": [
534 |     "js_text = js_text_template.substitute({'python_data': json.dumps(iris_array_of_dicts),\n",
535 |     "                                       'graphdiv': 'graph-div'})\n",
536 |     "HTML(html_template.substitute({'css_text': css_text, 'js_text': js_text}))"
537 |    ]
538 |   }
539 |  ],
540 |  "metadata": {
541 |   "anaconda-cloud": {},
542 |   "kernelspec": {
543 |    "display_name": "Python [default]",
544 |    "language": "python",
545 |    "name": "python2"
546 |   },
547 |   "language_info": {
548 |    "codemirror_mode": {
549 |     "name": "ipython",
550 |     "version": 2
551 |    },
552 |    "file_extension": ".py",
553 |    "mimetype": "text/x-python",
554 |    "name": "python",
555 |    "nbconvert_exporter": "python",
556 |    "pygments_lexer": "ipython2",
557 |    "version": "2.7.13"
558 |   },
559 |   "toc": {
560 |    "nav_menu": {},
561 |    "number_sections": true,
562 |    "sideBar": true,
563 |    "skip_h1_title": false,
564 |    "toc_cell": false,
565 |    "toc_position": {},
566 |    "toc_section_display": "block",
567 |    "toc_window_display": false
568 |   }
569 |  },
570 |  "nbformat": 4,
571 |  "nbformat_minor": 2
572 | }
573 | 


--------------------------------------------------------------------------------
/.ipynb_checkpoints/SCATTER PLOT-checkpoint.ipynb:
--------------------------------------------------------------------------------
  1 | {
  2 |  "cells": [
  3 |   {
  4 |    "cell_type": "markdown",
  5 |    "metadata": {},
  6 |    "source": [
  7 |     "# IRIS DATA: SIMPLE SCATTER PLOT USING D3 IN JUYPTER NOTEBOOK"
  8 |    ]
  9 |   },
 10 |   {
 11 |    "cell_type": "markdown",
 12 |    "metadata": {},
 13 |    "source": [
 14 |     "## Introduction"
 15 |    ]
 16 |   },
 17 |   {
 18 |    "cell_type": "markdown",
 19 |    "metadata": {},
 20 |    "source": [
 21 |     "This code is based on the blog explanation. The blog explains the various steps involved. Blog Link :\n",
 22 |     "\n",
 23 |     "\n",
 24 |     "Now let us use the famous Iris data set to represent a scatter plot.\n",
 25 |     "We will use the bl.ocks template from here ,to construct and customize the scatterplot in order to learn more about it .The link to the data set is here\n",
 26 |     "(https://gist.githubusercontent.com/mbostock/3887118/raw/2e68ffbeb23fe4dadd9b0f6bca62e9def6ee9e17/data.tsv) and it is in the tsv format.\n",
 27 |     "\n",
 28 |     "Please refer to the blog for the explanation of this note book ."
 29 |    ]
 30 |   },
 31 |   {
 32 |    "cell_type": "code",
 33 |    "execution_count": 55,
 34 |    "metadata": {
 35 |     "collapsed": true
 36 |    },
 37 |    "outputs": [],
 38 |    "source": [
 39 |     "# load the Preliminaries\n",
 40 |     "from IPython.core.display import display, HTML\n",
 41 |     "from string import Template\n",
 42 |     "import pandas as pd\n",
 43 |     "import json, random"
 44 |    ]
 45 |   },
 46 |   {
 47 |    "cell_type": "code",
 48 |    "execution_count": 56,
 49 |    "metadata": {},
 50 |    "outputs": [
 51 |     {
 52 |      "data": {
 53 |       "text/html": [
 54 |        "<script src=\"./d3.min.js\"></script>"
 55 |       ],
 56 |       "text/plain": [
 57 |        "<IPython.core.display.HTML object>"
 58 |       ]
 59 |      },
 60 |      "execution_count": 56,
 61 |      "metadata": {},
 62 |      "output_type": "execute_result"
 63 |     }
 64 |    ],
 65 |    "source": [
 66 |     "# Get the D3 host locally. \n",
 67 |     "HTML('<script src=\"./d3.min.js\"></script>')"
 68 |    ]
 69 |   },
 70 |   {
 71 |    "cell_type": "code",
 72 |    "execution_count": 47,
 73 |    "metadata": {},
 74 |    "outputs": [
 75 |     {
 76 |      "data": {
 77 |       "text/html": [
 78 |        "<div>\n",
 79 |        "<style>\n",
 80 |        "    .dataframe thead tr:only-child th {\n",
 81 |        "        text-align: right;\n",
 82 |        "    }\n",
 83 |        "\n",
 84 |        "    .dataframe thead th {\n",
 85 |        "        text-align: left;\n",
 86 |        "    }\n",
 87 |        "\n",
 88 |        "    .dataframe tbody tr th {\n",
 89 |        "        vertical-align: top;\n",
 90 |        "    }\n",
 91 |        "</style>\n",
 92 |        "<table border=\"1\" class=\"dataframe\">\n",
 93 |        "  <thead>\n",
 94 |        "    <tr style=\"text-align: right;\">\n",
 95 |        "      <th></th>\n",
 96 |        "      <th>sepalLength</th>\n",
 97 |        "      <th>sepalWidth</th>\n",
 98 |        "      <th>petalLength</th>\n",
 99 |        "      <th>petalWidth</th>\n",
100 |        "      <th>species</th>\n",
101 |        "    </tr>\n",
102 |        "  </thead>\n",
103 |        "  <tbody>\n",
104 |        "    <tr>\n",
105 |        "      <th>0</th>\n",
106 |        "      <td>5.1</td>\n",
107 |        "      <td>3.5</td>\n",
108 |        "      <td>1.4</td>\n",
109 |        "      <td>0.2</td>\n",
110 |        "      <td>setosa</td>\n",
111 |        "    </tr>\n",
112 |        "    <tr>\n",
113 |        "      <th>1</th>\n",
114 |        "      <td>4.9</td>\n",
115 |        "      <td>3.0</td>\n",
116 |        "      <td>1.4</td>\n",
117 |        "      <td>0.2</td>\n",
118 |        "      <td>setosa</td>\n",
119 |        "    </tr>\n",
120 |        "    <tr>\n",
121 |        "      <th>2</th>\n",
122 |        "      <td>4.7</td>\n",
123 |        "      <td>3.2</td>\n",
124 |        "      <td>1.3</td>\n",
125 |        "      <td>0.2</td>\n",
126 |        "      <td>setosa</td>\n",
127 |        "    </tr>\n",
128 |        "    <tr>\n",
129 |        "      <th>3</th>\n",
130 |        "      <td>4.6</td>\n",
131 |        "      <td>3.1</td>\n",
132 |        "      <td>1.5</td>\n",
133 |        "      <td>0.2</td>\n",
134 |        "      <td>setosa</td>\n",
135 |        "    </tr>\n",
136 |        "    <tr>\n",
137 |        "      <th>4</th>\n",
138 |        "      <td>5.0</td>\n",
139 |        "      <td>3.6</td>\n",
140 |        "      <td>1.4</td>\n",
141 |        "      <td>0.2</td>\n",
142 |        "      <td>setosa</td>\n",
143 |        "    </tr>\n",
144 |        "  </tbody>\n",
145 |        "</table>\n",
146 |        "</div>"
147 |       ],
148 |       "text/plain": [
149 |        "   sepalLength  sepalWidth  petalLength  petalWidth species\n",
150 |        "0          5.1         3.5          1.4         0.2  setosa\n",
151 |        "1          4.9         3.0          1.4         0.2  setosa\n",
152 |        "2          4.7         3.2          1.3         0.2  setosa\n",
153 |        "3          4.6         3.1          1.5         0.2  setosa\n",
154 |        "4          5.0         3.6          1.4         0.2  setosa"
155 |       ]
156 |      },
157 |      "execution_count": 47,
158 |      "metadata": {},
159 |      "output_type": "execute_result"
160 |     }
161 |    ],
162 |    "source": [
163 |     "# get the data from the link and parse it to convert it into a datafram-it's in tsv format\n",
164 |     "filename = 'https://gist.githubusercontent.com/mbostock/3887118/raw/2e68ffbeb23fe4dadd9b0f6bca62e9def6ee9e17/data.tsv'\n",
165 |     "iris = pd.read_csv(filename,sep=\"\\t\")\n",
166 |     "iris.head()"
167 |    ]
168 |   },
169 |   {
170 |    "cell_type": "code",
171 |    "execution_count": 48,
172 |    "metadata": {
173 |     "collapsed": true
174 |    },
175 |    "outputs": [],
176 |    "source": [
177 |     "# D3 accepts dictionaries , so let's convert data frame into dictionaries."
178 |    ]
179 |   },
180 |   {
181 |    "cell_type": "code",
182 |    "execution_count": 49,
183 |    "metadata": {},
184 |    "outputs": [
185 |     {
186 |      "data": {
187 |       "text/plain": [
188 |        "[{'petalLength': 1.4,\n",
189 |        "  'petalWidth': 0.2,\n",
190 |        "  'sepalLength': 5.1,\n",
191 |        "  'sepalWidth': 3.5,\n",
192 |        "  'species': 'setosa'},\n",
193 |        " {'petalLength': 1.4,\n",
194 |        "  'petalWidth': 0.2,\n",
195 |        "  'sepalLength': 4.9,\n",
196 |        "  'sepalWidth': 3.0,\n",
197 |        "  'species': 'setosa'},\n",
198 |        " {'petalLength': 1.3,\n",
199 |        "  'petalWidth': 0.2,\n",
200 |        "  'sepalLength': 4.7,\n",
201 |        "  'sepalWidth': 3.2,\n",
202 |        "  'species': 'setosa'},\n",
203 |        " {'petalLength': 1.5,\n",
204 |        "  'petalWidth': 0.2,\n",
205 |        "  'sepalLength': 4.6,\n",
206 |        "  'sepalWidth': 3.1,\n",
207 |        "  'species': 'setosa'},\n",
208 |        " {'petalLength': 1.4,\n",
209 |        "  'petalWidth': 0.2,\n",
210 |        "  'sepalLength': 5.0,\n",
211 |        "  'sepalWidth': 3.6,\n",
212 |        "  'species': 'setosa'}]"
213 |       ]
214 |      },
215 |      "execution_count": 49,
216 |      "metadata": {},
217 |      "output_type": "execute_result"
218 |     }
219 |    ],
220 |    "source": [
221 |     "iris_array_of_dicts = iris.to_dict(orient='records')\n",
222 |     "iris_array_of_dicts[:5]"
223 |    ]
224 |   },
225 |   {
226 |    "cell_type": "markdown",
227 |    "metadata": {},
228 |    "source": [
229 |     "## CSS,HTML,Javascript  based on bl.ocks example"
230 |    ]
231 |   },
232 |   {
233 |    "cell_type": "markdown",
234 |    "metadata": {},
235 |    "source": [
236 |     "Note that in the below css_text, we have removed the 'body' style reference from the original bl.ocks text. This is to avoid this style changing the rest of the notebook.`m\n",
237 |     "\n",
238 |     "You can get bl.ocks from here : https://bl.ocks.org/mbostock/3887118"
239 |    ]
240 |   },
241 |   {
242 |    "cell_type": "code",
243 |    "execution_count": 51,
244 |    "metadata": {
245 |     "collapsed": true
246 |    },
247 |    "outputs": [],
248 |    "source": [
249 |     "css_text = '''\n",
250 |     ".axis path,\n",
251 |     ".axis line {\n",
252 |     "  fill: none;\n",
253 |     "  stroke: #000;\n",
254 |     "  shape-rendering: crispEdges;\n",
255 |     "}\n",
256 |     "\n",
257 |     ".dot {\n",
258 |     "  stroke: #000;\n",
259 |     "}\n",
260 |     "'''"
261 |    ]
262 |   },
263 |   {
264 |    "cell_type": "markdown",
265 |    "metadata": {},
266 |    "source": [
267 |     "Next, let’s copy the java script and make two changes that are :\n",
268 |     "\n",
269 |     "* The first set of changes is to the width and height of the image\n",
270 |     "* The second change is simply to reference a different DOM element as the starting point. D3 will look for a specific DOM element to write things to. These block usually reference an external file like csv/tsv. The $ is going to be used in the templet engine to find and replace.\n",
271 |     "\n",
272 |     "\n",
273 |     "Note : //* — is used as comments , so those lines will not be executed and below that you can see the changes that were made."
274 |    ]
275 |   },
276 |   {
277 |    "cell_type": "code",
278 |    "execution_count": 52,
279 |    "metadata": {
280 |     "collapsed": true
281 |    },
282 |    "outputs": [],
283 |    "source": [
284 |     "js_text_template = Template('''\n",
285 |     "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
286 |     "// ****    width = 960 - margin.left - margin.right, ****\n",
287 |     "// ****    height = 500 - margin.top - margin.bottom; ****\n",
288 |     "    width = 720 - margin.left - margin.right,\n",
289 |     "    height = 375 - margin.top - margin.bottom;\n",
290 |     "\n",
291 |     "var x = d3.scale.linear()\n",
292 |     "    .range([0, width]);\n",
293 |     "\n",
294 |     "var y = d3.scale.linear()\n",
295 |     "    .range([height, 0]);\n",
296 |     "\n",
297 |     "var color = d3.scale.category10();\n",
298 |     "\n",
299 |     "var xAxis = d3.svg.axis()\n",
300 |     "    .scale(x)\n",
301 |     "    .orient(\"bottom\");\n",
302 |     "\n",
303 |     "var yAxis = d3.svg.axis()\n",
304 |     "    .scale(y)\n",
305 |     "    .orient(\"left\");\n",
306 |     "\n",
307 |     "// **** var svg = d3.select(\"body\").append(\"svg\") ****\n",
308 |     "var svg = d3.select(\"#$graphdiv\").append(\"svg\")\n",
309 |     "    .attr(\"width\", width + margin.left + margin.right)\n",
310 |     "    .attr(\"height\", height + margin.top + margin.bottom)\n",
311 |     "  .append(\"g\")\n",
312 |     "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
313 |     "\n",
314 |     "// **** d3.tsv(\"data.tsv\", function(error, data) { ****\n",
315 |     "// ****  if (error) throw error; ****\n",
316 |     "\n",
317 |     "var data = $python_data ;\n",
318 |     "\n",
319 |     "  data.forEach(function(d) {\n",
320 |     "    d.sepalLength = +d.sepalLength;\n",
321 |     "    d.sepalWidth = +d.sepalWidth;\n",
322 |     "  });\n",
323 |     "\n",
324 |     "  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();\n",
325 |     "  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();\n",
326 |     "\n",
327 |     "  svg.append(\"g\")\n",
328 |     "      .attr(\"class\", \"x axis\")\n",
329 |     "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
330 |     "      .call(xAxis)\n",
331 |     "    .append(\"text\")\n",
332 |     "      .attr(\"class\", \"label\")\n",
333 |     "      .attr(\"x\", width)\n",
334 |     "      .attr(\"y\", -6)\n",
335 |     "      .style(\"text-anchor\", \"end\")\n",
336 |     "      .text(\"Sepal Width (cm)\");\n",
337 |     "\n",
338 |     "  svg.append(\"g\")\n",
339 |     "      .attr(\"class\", \"y axis\")\n",
340 |     "      .call(yAxis)\n",
341 |     "    .append(\"text\")\n",
342 |     "      .attr(\"class\", \"label\")\n",
343 |     "      .attr(\"transform\", \"rotate(-90)\")\n",
344 |     "      .attr(\"y\", 6)\n",
345 |     "      .attr(\"dy\", \".71em\")\n",
346 |     "      .style(\"text-anchor\", \"end\")\n",
347 |     "      .text(\"Sepal Length (cm)\")\n",
348 |     "\n",
349 |     "  svg.selectAll(\".dot\")\n",
350 |     "      .data(data)\n",
351 |     "    .enter().append(\"circle\")\n",
352 |     "      .attr(\"class\", \"dot\")\n",
353 |     "      .attr(\"r\", 3.5)\n",
354 |     "      .attr(\"cx\", function(d) { return x(d.sepalWidth); })\n",
355 |     "      .attr(\"cy\", function(d) { return y(d.sepalLength); })\n",
356 |     "      .style(\"fill\", function(d) { return color(d.species); });\n",
357 |     "\n",
358 |     "  var legend = svg.selectAll(\".legend\")\n",
359 |     "      .data(color.domain())\n",
360 |     "    .enter().append(\"g\")\n",
361 |     "      .attr(\"class\", \"legend\")\n",
362 |     "      .attr(\"transform\", function(d, i) { return \"translate(0,\" + i * 20 + \")\"; });\n",
363 |     "\n",
364 |     "  legend.append(\"rect\")\n",
365 |     "      .attr(\"x\", width - 18)\n",
366 |     "      .attr(\"width\", 18)\n",
367 |     "      .attr(\"height\", 18)\n",
368 |     "      .style(\"fill\", color);\n",
369 |     "\n",
370 |     "  legend.append(\"text\")\n",
371 |     "      .attr(\"x\", width - 24)\n",
372 |     "      .attr(\"y\", 9)\n",
373 |     "      .attr(\"dy\", \".35em\")\n",
374 |     "      .style(\"text-anchor\", \"end\")\n",
375 |     "      .text(function(d) { return d; });\n",
376 |     "\n",
377 |     "// **** }); ****\n",
378 |     "\n",
379 |     "''')"
380 |    ]
381 |   },
382 |   {
383 |    "cell_type": "code",
384 |    "execution_count": 53,
385 |    "metadata": {
386 |     "collapsed": true
387 |    },
388 |    "outputs": [],
389 |    "source": [
390 |     "# Now let’s make a template for the html string\n",
391 |     "html_template = Template('''\n",
392 |     "<style> $css_text </style>\n",
393 |     "<div id=\"graph-div\"></div>\n",
394 |     "<script> $js_text </script>\n",
395 |     "''')\n"
396 |    ]
397 |   },
398 |   {
399 |    "cell_type": "markdown",
400 |    "metadata": {},
401 |    "source": [
402 |     "You can notice I have put css text for the style which we created earlier.Then we use div instead of a body and use that id to reference later .First we have the template engine for the java script where we give that data and create a connection for graphdive by referencing the id .Now for the next step ,add the css and the java script to the HTML template engine which will combine it to execute the output(the scatter plot)"
403 |    ]
404 |   },
405 |   {
406 |    "cell_type": "code",
407 |    "execution_count": 54,
408 |    "metadata": {},
409 |    "outputs": [
410 |     {
411 |      "data": {
412 |       "text/html": [
413 |        "\n",
414 |        "<style> \n",
415 |        ".axis path,\n",
416 |        ".axis line {\n",
417 |        "  fill: none;\n",
418 |        "  stroke: #000;\n",
419 |        "  shape-rendering: crispEdges;\n",
420 |        "}\n",
421 |        "\n",
422 |        ".dot {\n",
423 |        "  stroke: #000;\n",
424 |        "}\n",
425 |        " </style>\n",
426 |        "<div id=\"graph-div\"></div>\n",
427 |        "<script> \n",
428 |        "var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
429 |        "// ****    width = 960 - margin.left - margin.right, ****\n",
430 |        "// ****    height = 500 - margin.top - margin.bottom; ****\n",
431 |        "    width = 720 - margin.left - margin.right,\n",
432 |        "    height = 375 - margin.top - margin.bottom;\n",
433 |        "\n",
434 |        "var x = d3.scale.linear()\n",
435 |        "    .range([0, width]);\n",
436 |        "\n",
437 |        "var y = d3.scale.linear()\n",
438 |        "    .range([height, 0]);\n",
439 |        "\n",
440 |        "var color = d3.scale.category10();\n",
441 |        "\n",
442 |        "var xAxis = d3.svg.axis()\n",
443 |        "    .scale(x)\n",
444 |        "    .orient(\"bottom\");\n",
445 |        "\n",
446 |        "var yAxis = d3.svg.axis()\n",
447 |        "    .scale(y)\n",
448 |        "    .orient(\"left\");\n",
449 |        "\n",
450 |        "// **** var svg = d3.select(\"body\").append(\"svg\") ****\n",
451 |        "var svg = d3.select(\"#graph-div\").append(\"svg\")\n",
452 |        "    .attr(\"width\", width + margin.left + margin.right)\n",
453 |        "    .attr(\"height\", height + margin.top + margin.bottom)\n",
454 |        "  .append(\"g\")\n",
455 |        "    .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
456 |        "\n",
457 |        "// **** d3.tsv(\"data.tsv\", function(error, data) { ****\n",
458 |        "// ****  if (error) throw error; ****\n",
459 |        "\n",
460 |        "var data = [{\"sepalLength\": 5.1, \"petalWidth\": 0.2, \"sepalWidth\": 3.5, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.2, \"sepalWidth\": 3.0, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.7, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.2, \"sepalWidth\": 3.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.6, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.4, \"sepalWidth\": 3.9, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.3, \"sepalWidth\": 3.4, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 4.4, \"petalWidth\": 0.2, \"sepalWidth\": 2.9, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.1, \"sepalWidth\": 3.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.7, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.1, \"sepalWidth\": 3.0, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.3, \"petalWidth\": 0.1, \"sepalWidth\": 3.0, \"petalLength\": 1.1, \"species\": \"setosa\"}, {\"sepalLength\": 5.8, \"petalWidth\": 0.2, \"sepalWidth\": 4.0, \"petalLength\": 1.2, \"species\": \"setosa\"}, {\"sepalLength\": 5.7, \"petalWidth\": 0.4, \"sepalWidth\": 4.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.4, \"sepalWidth\": 3.9, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.3, \"sepalWidth\": 3.5, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.7, \"petalWidth\": 0.3, \"sepalWidth\": 3.8, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.3, \"sepalWidth\": 3.8, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.4, \"sepalWidth\": 3.7, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.2, \"sepalWidth\": 3.6, \"petalLength\": 1.0, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.5, \"sepalWidth\": 3.3, \"petalLength\": 1.7, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.9, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.0, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.4, \"sepalWidth\": 3.4, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.2, \"petalWidth\": 0.2, \"sepalWidth\": 3.5, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.2, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.7, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.2, \"sepalWidth\": 3.1, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.4, \"petalWidth\": 0.4, \"sepalWidth\": 3.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.2, \"petalWidth\": 0.1, \"sepalWidth\": 4.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.5, \"petalWidth\": 0.2, \"sepalWidth\": 4.2, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.2, \"sepalWidth\": 3.1, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.2, \"species\": \"setosa\"}, {\"sepalLength\": 5.5, \"petalWidth\": 0.2, \"sepalWidth\": 3.5, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.9, \"petalWidth\": 0.1, \"sepalWidth\": 3.6, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 4.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.0, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.2, \"sepalWidth\": 3.4, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.3, \"sepalWidth\": 3.5, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.5, \"petalWidth\": 0.3, \"sepalWidth\": 2.3, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 4.4, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.3, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.6, \"sepalWidth\": 3.5, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.4, \"sepalWidth\": 3.8, \"petalLength\": 1.9, \"species\": \"setosa\"}, {\"sepalLength\": 4.8, \"petalWidth\": 0.3, \"sepalWidth\": 3.0, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.1, \"petalWidth\": 0.2, \"sepalWidth\": 3.8, \"petalLength\": 1.6, \"species\": \"setosa\"}, {\"sepalLength\": 4.6, \"petalWidth\": 0.2, \"sepalWidth\": 3.2, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 5.3, \"petalWidth\": 0.2, \"sepalWidth\": 3.7, \"petalLength\": 1.5, \"species\": \"setosa\"}, {\"sepalLength\": 5.0, \"petalWidth\": 0.2, \"sepalWidth\": 3.3, \"petalLength\": 1.4, \"species\": \"setosa\"}, {\"sepalLength\": 7.0, \"petalWidth\": 1.4, \"sepalWidth\": 3.2, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.5, \"sepalWidth\": 3.2, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.9, \"petalWidth\": 1.5, \"sepalWidth\": 3.1, \"petalLength\": 4.9, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.3, \"sepalWidth\": 2.3, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.5, \"petalWidth\": 1.5, \"sepalWidth\": 2.8, \"petalLength\": 4.6, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.3, \"sepalWidth\": 2.8, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.6, \"sepalWidth\": 3.3, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 4.9, \"petalWidth\": 1.0, \"sepalWidth\": 2.4, \"petalLength\": 3.3, \"species\": \"versicolor\"}, {\"sepalLength\": 6.6, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.6, \"species\": \"versicolor\"}, {\"sepalLength\": 5.2, \"petalWidth\": 1.4, \"sepalWidth\": 2.7, \"petalLength\": 3.9, \"species\": \"versicolor\"}, {\"sepalLength\": 5.0, \"petalWidth\": 1.0, \"sepalWidth\": 2.0, \"petalLength\": 3.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.9, \"petalWidth\": 1.5, \"sepalWidth\": 3.0, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.0, \"sepalWidth\": 2.2, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.4, \"sepalWidth\": 2.9, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 3.6, \"species\": \"versicolor\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.4, \"sepalWidth\": 3.1, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.5, \"sepalWidth\": 3.0, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.0, \"sepalWidth\": 2.7, \"petalLength\": 4.1, \"species\": \"versicolor\"}, {\"sepalLength\": 6.2, \"petalWidth\": 1.5, \"sepalWidth\": 2.2, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.1, \"sepalWidth\": 2.5, \"petalLength\": 3.9, \"species\": \"versicolor\"}, {\"sepalLength\": 5.9, \"petalWidth\": 1.8, \"sepalWidth\": 3.2, \"petalLength\": 4.8, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.3, \"sepalWidth\": 2.8, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.5, \"sepalWidth\": 2.5, \"petalLength\": 4.9, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.2, \"sepalWidth\": 2.8, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.3, \"species\": \"versicolor\"}, {\"sepalLength\": 6.6, \"petalWidth\": 1.4, \"sepalWidth\": 3.0, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 6.8, \"petalWidth\": 1.4, \"sepalWidth\": 2.8, \"petalLength\": 4.8, \"species\": \"versicolor\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.7, \"sepalWidth\": 3.0, \"petalLength\": 5.0, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.5, \"sepalWidth\": 2.9, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.0, \"sepalWidth\": 2.6, \"petalLength\": 3.5, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.1, \"sepalWidth\": 2.4, \"petalLength\": 3.8, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.0, \"sepalWidth\": 2.4, \"petalLength\": 3.7, \"species\": \"versicolor\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.2, \"sepalWidth\": 2.7, \"petalLength\": 3.9, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.6, \"sepalWidth\": 2.7, \"petalLength\": 5.1, \"species\": \"versicolor\"}, {\"sepalLength\": 5.4, \"petalWidth\": 1.5, \"sepalWidth\": 3.0, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.6, \"sepalWidth\": 3.4, \"petalLength\": 4.5, \"species\": \"versicolor\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.5, \"sepalWidth\": 3.1, \"petalLength\": 4.7, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.3, \"sepalWidth\": 2.3, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.3, \"sepalWidth\": 3.0, \"petalLength\": 4.1, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.3, \"sepalWidth\": 2.5, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 5.5, \"petalWidth\": 1.2, \"sepalWidth\": 2.6, \"petalLength\": 4.4, \"species\": \"versicolor\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.4, \"sepalWidth\": 3.0, \"petalLength\": 4.6, \"species\": \"versicolor\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.2, \"sepalWidth\": 2.6, \"petalLength\": 4.0, \"species\": \"versicolor\"}, {\"sepalLength\": 5.0, \"petalWidth\": 1.0, \"sepalWidth\": 2.3, \"petalLength\": 3.3, \"species\": \"versicolor\"}, {\"sepalLength\": 5.6, \"petalWidth\": 1.3, \"sepalWidth\": 2.7, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.2, \"sepalWidth\": 3.0, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.2, \"species\": \"versicolor\"}, {\"sepalLength\": 6.2, \"petalWidth\": 1.3, \"sepalWidth\": 2.9, \"petalLength\": 4.3, \"species\": \"versicolor\"}, {\"sepalLength\": 5.1, \"petalWidth\": 1.1, \"sepalWidth\": 2.5, \"petalLength\": 3.0, \"species\": \"versicolor\"}, {\"sepalLength\": 5.7, \"petalWidth\": 1.3, \"sepalWidth\": 2.8, \"petalLength\": 4.1, \"species\": \"versicolor\"}, {\"sepalLength\": 6.3, \"petalWidth\": 2.5, \"sepalWidth\": 3.3, \"petalLength\": 6.0, \"species\": \"virginica\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.9, \"sepalWidth\": 2.7, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 7.1, \"petalWidth\": 2.1, \"sepalWidth\": 3.0, \"petalLength\": 5.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.8, \"sepalWidth\": 2.9, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 2.2, \"sepalWidth\": 3.0, \"petalLength\": 5.8, \"species\": \"virginica\"}, {\"sepalLength\": 7.6, \"petalWidth\": 2.1, \"sepalWidth\": 3.0, \"petalLength\": 6.6, \"species\": \"virginica\"}, {\"sepalLength\": 4.9, \"petalWidth\": 1.7, \"sepalWidth\": 2.5, \"petalLength\": 4.5, \"species\": \"virginica\"}, {\"sepalLength\": 7.3, \"petalWidth\": 1.8, \"sepalWidth\": 2.9, \"petalLength\": 6.3, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 1.8, \"sepalWidth\": 2.5, \"petalLength\": 5.8, \"species\": \"virginica\"}, {\"sepalLength\": 7.2, \"petalWidth\": 2.5, \"sepalWidth\": 3.6, \"petalLength\": 6.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 2.0, \"sepalWidth\": 3.2, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.9, \"sepalWidth\": 2.7, \"petalLength\": 5.3, \"species\": \"virginica\"}, {\"sepalLength\": 6.8, \"petalWidth\": 2.1, \"sepalWidth\": 3.0, \"petalLength\": 5.5, \"species\": \"virginica\"}, {\"sepalLength\": 5.7, \"petalWidth\": 2.0, \"sepalWidth\": 2.5, \"petalLength\": 5.0, \"species\": \"virginica\"}, {\"sepalLength\": 5.8, \"petalWidth\": 2.4, \"sepalWidth\": 2.8, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 2.3, \"sepalWidth\": 3.2, \"petalLength\": 5.3, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 5.5, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.2, \"sepalWidth\": 3.8, \"petalLength\": 6.7, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.3, \"sepalWidth\": 2.6, \"petalLength\": 6.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.5, \"sepalWidth\": 2.2, \"petalLength\": 5.0, \"species\": \"virginica\"}, {\"sepalLength\": 6.9, \"petalWidth\": 2.3, \"sepalWidth\": 3.2, \"petalLength\": 5.7, \"species\": \"virginica\"}, {\"sepalLength\": 5.6, \"petalWidth\": 2.0, \"sepalWidth\": 2.8, \"petalLength\": 4.9, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.0, \"sepalWidth\": 2.8, \"petalLength\": 6.7, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.8, \"sepalWidth\": 2.7, \"petalLength\": 4.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.1, \"sepalWidth\": 3.3, \"petalLength\": 5.7, \"species\": \"virginica\"}, {\"sepalLength\": 7.2, \"petalWidth\": 1.8, \"sepalWidth\": 3.2, \"petalLength\": 6.0, \"species\": \"virginica\"}, {\"sepalLength\": 6.2, \"petalWidth\": 1.8, \"sepalWidth\": 2.8, \"petalLength\": 4.8, \"species\": \"virginica\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 4.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 2.1, \"sepalWidth\": 2.8, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 7.2, \"petalWidth\": 1.6, \"sepalWidth\": 3.0, \"petalLength\": 5.8, \"species\": \"virginica\"}, {\"sepalLength\": 7.4, \"petalWidth\": 1.9, \"sepalWidth\": 2.8, \"petalLength\": 6.1, \"species\": \"virginica\"}, {\"sepalLength\": 7.9, \"petalWidth\": 2.0, \"sepalWidth\": 3.8, \"petalLength\": 6.4, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 2.2, \"sepalWidth\": 2.8, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.5, \"sepalWidth\": 2.8, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.1, \"petalWidth\": 1.4, \"sepalWidth\": 2.6, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 7.7, \"petalWidth\": 2.3, \"sepalWidth\": 3.0, \"petalLength\": 6.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 2.4, \"sepalWidth\": 3.4, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.4, \"petalWidth\": 1.8, \"sepalWidth\": 3.1, \"petalLength\": 5.5, \"species\": \"virginica\"}, {\"sepalLength\": 6.0, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 4.8, \"species\": \"virginica\"}, {\"sepalLength\": 6.9, \"petalWidth\": 2.1, \"sepalWidth\": 3.1, \"petalLength\": 5.4, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.4, \"sepalWidth\": 3.1, \"petalLength\": 5.6, \"species\": \"virginica\"}, {\"sepalLength\": 6.9, \"petalWidth\": 2.3, \"sepalWidth\": 3.1, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 5.8, \"petalWidth\": 1.9, \"sepalWidth\": 2.7, \"petalLength\": 5.1, \"species\": \"virginica\"}, {\"sepalLength\": 6.8, \"petalWidth\": 2.3, \"sepalWidth\": 3.2, \"petalLength\": 5.9, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.5, \"sepalWidth\": 3.3, \"petalLength\": 5.7, \"species\": \"virginica\"}, {\"sepalLength\": 6.7, \"petalWidth\": 2.3, \"sepalWidth\": 3.0, \"petalLength\": 5.2, \"species\": \"virginica\"}, {\"sepalLength\": 6.3, \"petalWidth\": 1.9, \"sepalWidth\": 2.5, \"petalLength\": 5.0, \"species\": \"virginica\"}, {\"sepalLength\": 6.5, \"petalWidth\": 2.0, \"sepalWidth\": 3.0, \"petalLength\": 5.2, \"species\": \"virginica\"}, {\"sepalLength\": 6.2, \"petalWidth\": 2.3, \"sepalWidth\": 3.4, \"petalLength\": 5.4, \"species\": \"virginica\"}, {\"sepalLength\": 5.9, \"petalWidth\": 1.8, \"sepalWidth\": 3.0, \"petalLength\": 5.1, \"species\": \"virginica\"}] ;\n",
461 |        "\n",
462 |        "  data.forEach(function(d) {\n",
463 |        "    d.sepalLength = +d.sepalLength;\n",
464 |        "    d.sepalWidth = +d.sepalWidth;\n",
465 |        "  });\n",
466 |        "\n",
467 |        "  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();\n",
468 |        "  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();\n",
469 |        "\n",
470 |        "  svg.append(\"g\")\n",
471 |        "      .attr(\"class\", \"x axis\")\n",
472 |        "      .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
473 |        "      .call(xAxis)\n",
474 |        "    .append(\"text\")\n",
475 |        "      .attr(\"class\", \"label\")\n",
476 |        "      .attr(\"x\", width)\n",
477 |        "      .attr(\"y\", -6)\n",
478 |        "      .style(\"text-anchor\", \"end\")\n",
479 |        "      .text(\"Sepal Width (cm)\");\n",
480 |        "\n",
481 |        "  svg.append(\"g\")\n",
482 |        "      .attr(\"class\", \"y axis\")\n",
483 |        "      .call(yAxis)\n",
484 |        "    .append(\"text\")\n",
485 |        "      .attr(\"class\", \"label\")\n",
486 |        "      .attr(\"transform\", \"rotate(-90)\")\n",
487 |        "      .attr(\"y\", 6)\n",
488 |        "      .attr(\"dy\", \".71em\")\n",
489 |        "      .style(\"text-anchor\", \"end\")\n",
490 |        "      .text(\"Sepal Length (cm)\")\n",
491 |        "\n",
492 |        "  svg.selectAll(\".dot\")\n",
493 |        "      .data(data)\n",
494 |        "    .enter().append(\"circle\")\n",
495 |        "      .attr(\"class\", \"dot\")\n",
496 |        "      .attr(\"r\", 3.5)\n",
497 |        "      .attr(\"cx\", function(d) { return x(d.sepalWidth); })\n",
498 |        "      .attr(\"cy\", function(d) { return y(d.sepalLength); })\n",
499 |        "      .style(\"fill\", function(d) { return color(d.species); });\n",
500 |        "\n",
501 |        "  var legend = svg.selectAll(\".legend\")\n",
502 |        "      .data(color.domain())\n",
503 |        "    .enter().append(\"g\")\n",
504 |        "      .attr(\"class\", \"legend\")\n",
505 |        "      .attr(\"transform\", function(d, i) { return \"translate(0,\" + i * 20 + \")\"; });\n",
506 |        "\n",
507 |        "  legend.append(\"rect\")\n",
508 |        "      .attr(\"x\", width - 18)\n",
509 |        "      .attr(\"width\", 18)\n",
510 |        "      .attr(\"height\", 18)\n",
511 |        "      .style(\"fill\", color);\n",
512 |        "\n",
513 |        "  legend.append(\"text\")\n",
514 |        "      .attr(\"x\", width - 24)\n",
515 |        "      .attr(\"y\", 9)\n",
516 |        "      .attr(\"dy\", \".35em\")\n",
517 |        "      .style(\"text-anchor\", \"end\")\n",
518 |        "      .text(function(d) { return d; });\n",
519 |        "\n",
520 |        "// **** }); ****\n",
521 |        "\n",
522 |        " </script>\n"
523 |       ],
524 |       "text/plain": [
525 |        "<IPython.core.display.HTML object>"
526 |       ]
527 |      },
528 |      "execution_count": 54,
529 |      "metadata": {},
530 |      "output_type": "execute_result"
531 |     }
532 |    ],
533 |    "source": [
534 |     "js_text = js_text_template.substitute({'python_data': json.dumps(iris_array_of_dicts),\n",
535 |     "                                       'graphdiv': 'graph-div'})\n",
536 |     "HTML(html_template.substitute({'css_text': css_text, 'js_text': js_text}))"
537 |    ]
538 |   }
539 |  ],
540 |  "metadata": {
541 |   "anaconda-cloud": {},
542 |   "kernelspec": {
543 |    "display_name": "Python [default]",
544 |    "language": "python",
545 |    "name": "python2"
546 |   },
547 |   "language_info": {
548 |    "codemirror_mode": {
549 |     "name": "ipython",
550 |     "version": 2
551 |    },
552 |    "file_extension": ".py",
553 |    "mimetype": "text/x-python",
554 |    "name": "python",
555 |    "nbconvert_exporter": "python",
556 |    "pygments_lexer": "ipython2",
557 |    "version": "2.7.13"
558 |   },
559 |   "toc": {
560 |    "nav_menu": {},
561 |    "number_sections": true,
562 |    "sideBar": true,
563 |    "skip_h1_title": false,
564 |    "toc_cell": false,
565 |    "toc_position": {},
566 |    "toc_section_display": "block",
567 |    "toc_window_display": false
568 |   }
569 |  },
570 |  "nbformat": 4,
571 |  "nbformat_minor": 2
572 | }
573 | 


--------------------------------------------------------------------------------