Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{
"metadata": {
"name": "",
"signature": "sha256:53400d77ba7c32c0cc425b9c26b94a2bf7c3ed3c199a7b07c9c6526e9d844d8d"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "code",
"collapsed": false,
"input": [
"import json\n",
"import numpy as np\n",
"import matplotlib.pyplot as plt\n",
"\n",
"%matplotlib inline\n",
"\n",
"import mpld3\n",
"from mpld3 import plugins, utils"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 1
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"class VoronoiHighlightLines(plugins.PluginBase):\n",
" \"\"\"A plugin to highlight lines on hover\n",
" \n",
" \n",
" see also http://bl.ocks.org/mbostock/8033015\n",
" \n",
" \"\"\"\n",
"\n",
" JAVASCRIPT = \"\"\"\n",
" mpld3.register_plugin(\"voronoi_highlightlines\", VoronoiHighlightLines);\n",
" VoronoiHighlightLines.prototype = Object.create(mpld3.Plugin.prototype);\n",
" VoronoiHighlightLines.prototype.constructor = VoronoiHighlightLines;\n",
" VoronoiHighlightLines.prototype.requiredProps = [\"line_ids\"];\n",
" VoronoiHighlightLines.prototype.defaultProps = {alpha_bg:0.3, alpha_fg:1.0}\n",
" function VoronoiHighlightLines(fig, props){\n",
" mpld3.Plugin.call(this, fig, props);\n",
" };\n",
"\n",
" VoronoiHighlightLines.prototype.draw = function(){\n",
" var alpha_fg = this.props.alpha_fg;\n",
" var alpha_bg = this.props.alpha_bg; \n",
" \n",
" // get the data for the voronoi mesh\n",
" data = new Array();\n",
" for(var i=0; i<this.props.line_ids.length; i++){\n",
" var line_instance = mpld3.get_element(this.props.line_ids[i], this.fig);\n",
" \n",
" for (j=1; j<line_instance.data.length; j++){\n",
" var obj = {}\n",
" obj.x = line_instance.data[j][line_instance.props.xindex]\n",
" obj.y = line_instance.data[j][line_instance.props.yindex]\n",
" obj.line_instance = line_instance\n",
" obj.line_id = this.props.line_ids[i]\n",
" obj.label_id = i\n",
" obj.fig = this.fig\n",
" data.push(obj)\n",
" }\n",
" }\n",
"\n",
" var ax = mpld3.get_element(this.props.line_ids[0], this.fig).ax\n",
"\n",
" // we hide the transform from data coordinates to svg\n",
" // coordinates in the voronoi\n",
" var transform_x = function(d){return ax.x(d)+ax.position[0]};\n",
" var transform_y = function(d){return ax.y(d)+ax.position[1]};\n",
" \n",
" var voronoi = d3.geom.voronoi()\n",
" .x(function(d) { return transform_x(d.x); })\n",
" .y(function(d) { return transform_y(d.y); }) \n",
" .clipExtent([ax.position, [ax.position[0]+ax.width, ax.position[1]+ax.height]]);\n",
"\n",
" \n",
"\n",
" var voronoiGroup = this.fig.canvas.append(\"svg:g\")\n",
" .attr(\"class\", \"voronoi\");\n",
" \n",
" voronoiGroup.selectAll(\"path\")\n",
" .data(voronoi(d3.nest()\n",
" .key(function(d) { return d.x + \",\" + d.y; })\n",
" .rollup(function(v) { return v[0]; })\n",
" .entries(data)\n",
" .map(function(d) { return d.values; })))\n",
" .enter().append(\"path\")\n",
" .attr(\"d\", function(d) { \n",
" var ret = \"M\" + d.join(\" L\") + \"Z\";\n",
" return ret; })\n",
" .datum(function(d) {return d.point; })\n",
" .on(\"mouseover\", mouseover)\n",
" .on(\"mouseout\", mouseout);\n",
" \n",
" \n",
" function mouseover(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_fg); \n",
" }\n",
"\n",
" function mouseout(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_bg); \n",
" } \n",
" };\n",
" \"\"\"\n",
"\n",
" def __init__(self, lines, css):\n",
" \n",
" self.css_ = css or \"\"\n",
"\n",
" self.lines = lines\n",
" self.dict_ = {\"type\": \"voronoi_highlightlines\",\n",
" \"line_ids\": [utils.get_id(line) for line in lines],\n",
" \"alpha_bg\": lines[0].get_alpha(),\n",
" \"alpha_fg\": 1.0}\n",
"\n",
"\n",
"# controls the coloring etc. of the voronoi mesh\n",
"css = \"\"\"\n",
".voronoi path \n",
"{\n",
" fill: none;\n",
" pointer-events: all;\n",
" stroke: red;\n",
" stroke-opacity: .1; \n",
"}\n",
"\"\"\"\n",
" \n",
"np.random.seed(100)\n",
"\n",
"x = np.random.laplace(size=(2, 10))\n",
"y = np.random.laplace(size=(2, 10))\n",
"\n",
"fig, ax = plt.subplots()\n",
"lines = ax.plot(x, y, 'k', linewidth=4, alpha=.5)\n",
"\n",
"plugins.clear(fig)\n",
"plugins.connect(fig, VoronoiHighlightLines(lines, css))\n",
"\n",
"mpld3.display()\n",
"\n"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"\n",
"<style>\n",
"\n",
".voronoi path \n",
"{\n",
" fill: none;\n",
" pointer-events: all;\n",
" stroke: red;\n",
" stroke-opacity: .1; \n",
"}\n",
"\n",
"</style>\n",
"\n",
"<div id=\"fig_el29296612281128121086209\"></div>\n",
"<script>\n",
"function mpld3_load_lib(url, callback){\n",
" var s = document.createElement('script');\n",
" s.src = url;\n",
" s.async = true;\n",
" s.onreadystatechange = s.onload = callback;\n",
" s.onerror = function(){console.warn(\"failed to load library \" + url);};\n",
" document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
"}\n",
"\n",
"if(typeof(mpld3) !== \"undefined\" && mpld3._mpld3IsLoaded){\n",
" // already loaded: just create the figure\n",
" !function(mpld3){\n",
" \n",
" mpld3.register_plugin(\"voronoi_highlightlines\", VoronoiHighlightLines);\n",
" VoronoiHighlightLines.prototype = Object.create(mpld3.Plugin.prototype);\n",
" VoronoiHighlightLines.prototype.constructor = VoronoiHighlightLines;\n",
" VoronoiHighlightLines.prototype.requiredProps = [\"line_ids\"];\n",
" VoronoiHighlightLines.prototype.defaultProps = {alpha_bg:0.3, alpha_fg:1.0}\n",
" function VoronoiHighlightLines(fig, props){\n",
" mpld3.Plugin.call(this, fig, props);\n",
" };\n",
"\n",
" VoronoiHighlightLines.prototype.draw = function(){\n",
" var alpha_fg = this.props.alpha_fg;\n",
" var alpha_bg = this.props.alpha_bg; \n",
" \n",
" // get the data for the voronoi mesh\n",
" data = new Array();\n",
" for(var i=0; i<this.props.line_ids.length; i++){\n",
" var line_instance = mpld3.get_element(this.props.line_ids[i], this.fig);\n",
" \n",
" for (j=1; j<line_instance.data.length; j++){\n",
" var obj = {}\n",
" obj.x = line_instance.data[j][line_instance.props.xindex]\n",
" obj.y = line_instance.data[j][line_instance.props.yindex]\n",
" obj.line_instance = line_instance\n",
" obj.line_id = this.props.line_ids[i]\n",
" obj.label_id = i\n",
" obj.fig = this.fig\n",
" data.push(obj)\n",
" }\n",
" }\n",
"\n",
" var ax = mpld3.get_element(this.props.line_ids[0], this.fig).ax\n",
"\n",
" // we hide the transform from data coordinates to svg\n",
" // coordinates in the voronoi\n",
" var transform_x = function(d){return ax.x(d)+ax.position[0]};\n",
" var transform_y = function(d){return ax.y(d)+ax.position[1]};\n",
" \n",
" var voronoi = d3.geom.voronoi()\n",
" .x(function(d) { return transform_x(d.x); })\n",
" .y(function(d) { return transform_y(d.y); }) \n",
" .clipExtent([ax.position, [ax.position[0]+ax.width, ax.position[1]+ax.height]]);\n",
"\n",
" \n",
"\n",
" var voronoiGroup = this.fig.canvas.append(\"svg:g\")\n",
" .attr(\"class\", \"voronoi\");\n",
" \n",
" voronoiGroup.selectAll(\"path\")\n",
" .data(voronoi(d3.nest()\n",
" .key(function(d) { return d.x + \",\" + d.y; })\n",
" .rollup(function(v) { return v[0]; })\n",
" .entries(data)\n",
" .map(function(d) { return d.values; })))\n",
" .enter().append(\"path\")\n",
" .attr(\"d\", function(d) { \n",
" var ret = \"M\" + d.join(\" L\") + \"Z\";\n",
" return ret; })\n",
" .datum(function(d) {return d.point; })\n",
" .on(\"mouseover\", mouseover)\n",
" .on(\"mouseout\", mouseout);\n",
" \n",
" \n",
" function mouseover(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_fg); \n",
" }\n",
"\n",
" function mouseout(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_bg); \n",
" } \n",
" };\n",
" \n",
" mpld3.draw_figure(\"fig_el29296612281128121086209\", {\"axes\": [{\"xlim\": [-5.0, 4.0], \"yscale\": \"linear\", \"axesbg\": \"#FFFFFF\", \"texts\": [], \"zoomable\": true, \"images\": [], \"xdomain\": [-5.0, 4.0], \"ylim\": [-5.0, 4.0], \"paths\": [], \"sharey\": [], \"sharex\": [], \"axesbgalpha\": null, \"axes\": [{\"scale\": \"linear\", \"tickformat\": null, \"grid\": {\"gridOn\": false}, \"fontsize\": 10.0, \"position\": \"bottom\", \"nticks\": 10, \"tickvalues\": null}, {\"scale\": \"linear\", \"tickformat\": null, \"grid\": {\"gridOn\": false}, \"fontsize\": 10.0, \"position\": \"left\", \"nticks\": 10, \"tickvalues\": null}], \"lines\": [{\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data01\", \"id\": \"el2929663034320\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data02\", \"id\": \"el2929666438800\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data03\", \"id\": \"el2929666439376\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data04\", \"id\": \"el2929666439824\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data05\", \"id\": \"el2929666440272\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data06\", \"id\": \"el2929666440720\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data07\", \"id\": \"el2929666441168\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data08\", \"id\": \"el2929666449872\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data09\", \"id\": \"el2929666450320\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data10\", \"id\": \"el2929666450768\"}], \"markers\": [], \"id\": \"el2929636071440\", \"ydomain\": [-5.0, 4.0], \"collections\": [], \"xscale\": \"linear\", \"bbox\": [0.125, 0.125, 0.77500000000000002, 0.77500000000000002]}], \"height\": 320.0, \"width\": 480.0, \"plugins\": [{\"line_ids\": [\"el2929663034320\", \"el2929666438800\", \"el2929666439376\", \"el2929666439824\", \"el2929666440272\", \"el2929666440720\", \"el2929666441168\", \"el2929666449872\", \"el2929666450320\", \"el2929666450768\"], \"alpha_fg\": 1.0, \"type\": \"voronoi_highlightlines\", \"alpha_bg\": 0.5}], \"data\": {\"data10\": [[0.16273855226544243, -3.4897026651233123], [-0.6012108784612044, 0.16700308454559007]], \"data08\": [[1.0547069220341905, -0.6834885617759904], [-1.0674566296583776, -2.1212308569366884]], \"data09\": [[-1.296771150404587, 0.8948351013119847], [1.0008945478705795, 1.5191032237783906]], \"data06\": [[-1.4141251020669192, -0.2934800582270773], [3.1523292294200234, 1.5178762353327664]], \"data07\": [[0.41778797792955563, -4.476160212892489], [0.9764821770621639, 3.2660123501986558]], \"data04\": [[1.1697397158984613, -0.39716380906911775], [-1.5289932197434748, -0.26933555066322934]], \"data05\": [[-4.6630416606130405, -1.047479420816889], [-0.822356531818682, -2.6179520368504705]], \"data02\": [[-0.5856591433442802, 2.120760653448642], [-0.8713072223192523, 0.23270042066671262]], \"data03\": [[-0.16365465477992086, 1.0086767744100886], [-0.9924796855761052, -1.5592422087643882]], \"data01\": [[0.09081118740513912, -0.1468675047723893], [1.5262182962880018, 0.2202561661469102]]}, \"id\": \"el2929661228112\"});\n",
" }(mpld3);\n",
"}else if(typeof define === \"function\" && define.amd){\n",
" // require.js is available: use it to load d3/mpld3\n",
" require.config({paths: {d3: \"https://mpld3.github.io/js/d3.v3.min\"}});\n",
" require([\"d3\"], function(d3){\n",
" window.d3 = d3;\n",
" mpld3_load_lib(\"https://mpld3.github.io/js/mpld3.v0.3git.js\", function(){\n",
" \n",
" mpld3.register_plugin(\"voronoi_highlightlines\", VoronoiHighlightLines);\n",
" VoronoiHighlightLines.prototype = Object.create(mpld3.Plugin.prototype);\n",
" VoronoiHighlightLines.prototype.constructor = VoronoiHighlightLines;\n",
" VoronoiHighlightLines.prototype.requiredProps = [\"line_ids\"];\n",
" VoronoiHighlightLines.prototype.defaultProps = {alpha_bg:0.3, alpha_fg:1.0}\n",
" function VoronoiHighlightLines(fig, props){\n",
" mpld3.Plugin.call(this, fig, props);\n",
" };\n",
"\n",
" VoronoiHighlightLines.prototype.draw = function(){\n",
" var alpha_fg = this.props.alpha_fg;\n",
" var alpha_bg = this.props.alpha_bg; \n",
" \n",
" // get the data for the voronoi mesh\n",
" data = new Array();\n",
" for(var i=0; i<this.props.line_ids.length; i++){\n",
" var line_instance = mpld3.get_element(this.props.line_ids[i], this.fig);\n",
" \n",
" for (j=1; j<line_instance.data.length; j++){\n",
" var obj = {}\n",
" obj.x = line_instance.data[j][line_instance.props.xindex]\n",
" obj.y = line_instance.data[j][line_instance.props.yindex]\n",
" obj.line_instance = line_instance\n",
" obj.line_id = this.props.line_ids[i]\n",
" obj.label_id = i\n",
" obj.fig = this.fig\n",
" data.push(obj)\n",
" }\n",
" }\n",
"\n",
" var ax = mpld3.get_element(this.props.line_ids[0], this.fig).ax\n",
"\n",
" // we hide the transform from data coordinates to svg\n",
" // coordinates in the voronoi\n",
" var transform_x = function(d){return ax.x(d)+ax.position[0]};\n",
" var transform_y = function(d){return ax.y(d)+ax.position[1]};\n",
" \n",
" var voronoi = d3.geom.voronoi()\n",
" .x(function(d) { return transform_x(d.x); })\n",
" .y(function(d) { return transform_y(d.y); }) \n",
" .clipExtent([ax.position, [ax.position[0]+ax.width, ax.position[1]+ax.height]]);\n",
"\n",
" \n",
"\n",
" var voronoiGroup = this.fig.canvas.append(\"svg:g\")\n",
" .attr(\"class\", \"voronoi\");\n",
" \n",
" voronoiGroup.selectAll(\"path\")\n",
" .data(voronoi(d3.nest()\n",
" .key(function(d) { return d.x + \",\" + d.y; })\n",
" .rollup(function(v) { return v[0]; })\n",
" .entries(data)\n",
" .map(function(d) { return d.values; })))\n",
" .enter().append(\"path\")\n",
" .attr(\"d\", function(d) { \n",
" var ret = \"M\" + d.join(\" L\") + \"Z\";\n",
" return ret; })\n",
" .datum(function(d) {return d.point; })\n",
" .on(\"mouseover\", mouseover)\n",
" .on(\"mouseout\", mouseout);\n",
" \n",
" \n",
" function mouseover(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_fg); \n",
" }\n",
"\n",
" function mouseout(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_bg); \n",
" } \n",
" };\n",
" \n",
" mpld3.draw_figure(\"fig_el29296612281128121086209\", {\"axes\": [{\"xlim\": [-5.0, 4.0], \"yscale\": \"linear\", \"axesbg\": \"#FFFFFF\", \"texts\": [], \"zoomable\": true, \"images\": [], \"xdomain\": [-5.0, 4.0], \"ylim\": [-5.0, 4.0], \"paths\": [], \"sharey\": [], \"sharex\": [], \"axesbgalpha\": null, \"axes\": [{\"scale\": \"linear\", \"tickformat\": null, \"grid\": {\"gridOn\": false}, \"fontsize\": 10.0, \"position\": \"bottom\", \"nticks\": 10, \"tickvalues\": null}, {\"scale\": \"linear\", \"tickformat\": null, \"grid\": {\"gridOn\": false}, \"fontsize\": 10.0, \"position\": \"left\", \"nticks\": 10, \"tickvalues\": null}], \"lines\": [{\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data01\", \"id\": \"el2929663034320\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data02\", \"id\": \"el2929666438800\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data03\", \"id\": \"el2929666439376\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data04\", \"id\": \"el2929666439824\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data05\", \"id\": \"el2929666440272\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data06\", \"id\": \"el2929666440720\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data07\", \"id\": \"el2929666441168\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data08\", \"id\": \"el2929666449872\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data09\", \"id\": \"el2929666450320\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data10\", \"id\": \"el2929666450768\"}], \"markers\": [], \"id\": \"el2929636071440\", \"ydomain\": [-5.0, 4.0], \"collections\": [], \"xscale\": \"linear\", \"bbox\": [0.125, 0.125, 0.77500000000000002, 0.77500000000000002]}], \"height\": 320.0, \"width\": 480.0, \"plugins\": [{\"line_ids\": [\"el2929663034320\", \"el2929666438800\", \"el2929666439376\", \"el2929666439824\", \"el2929666440272\", \"el2929666440720\", \"el2929666441168\", \"el2929666449872\", \"el2929666450320\", \"el2929666450768\"], \"alpha_fg\": 1.0, \"type\": \"voronoi_highlightlines\", \"alpha_bg\": 0.5}], \"data\": {\"data10\": [[0.16273855226544243, -3.4897026651233123], [-0.6012108784612044, 0.16700308454559007]], \"data08\": [[1.0547069220341905, -0.6834885617759904], [-1.0674566296583776, -2.1212308569366884]], \"data09\": [[-1.296771150404587, 0.8948351013119847], [1.0008945478705795, 1.5191032237783906]], \"data06\": [[-1.4141251020669192, -0.2934800582270773], [3.1523292294200234, 1.5178762353327664]], \"data07\": [[0.41778797792955563, -4.476160212892489], [0.9764821770621639, 3.2660123501986558]], \"data04\": [[1.1697397158984613, -0.39716380906911775], [-1.5289932197434748, -0.26933555066322934]], \"data05\": [[-4.6630416606130405, -1.047479420816889], [-0.822356531818682, -2.6179520368504705]], \"data02\": [[-0.5856591433442802, 2.120760653448642], [-0.8713072223192523, 0.23270042066671262]], \"data03\": [[-0.16365465477992086, 1.0086767744100886], [-0.9924796855761052, -1.5592422087643882]], \"data01\": [[0.09081118740513912, -0.1468675047723893], [1.5262182962880018, 0.2202561661469102]]}, \"id\": \"el2929661228112\"});\n",
" });\n",
" });\n",
"}else{\n",
" // require.js not available: dynamically load d3 & mpld3\n",
" mpld3_load_lib(\"https://mpld3.github.io/js/d3.v3.min.js\", function(){\n",
" mpld3_load_lib(\"https://mpld3.github.io/js/mpld3.v0.3git.js\", function(){\n",
" \n",
" mpld3.register_plugin(\"voronoi_highlightlines\", VoronoiHighlightLines);\n",
" VoronoiHighlightLines.prototype = Object.create(mpld3.Plugin.prototype);\n",
" VoronoiHighlightLines.prototype.constructor = VoronoiHighlightLines;\n",
" VoronoiHighlightLines.prototype.requiredProps = [\"line_ids\"];\n",
" VoronoiHighlightLines.prototype.defaultProps = {alpha_bg:0.3, alpha_fg:1.0}\n",
" function VoronoiHighlightLines(fig, props){\n",
" mpld3.Plugin.call(this, fig, props);\n",
" };\n",
"\n",
" VoronoiHighlightLines.prototype.draw = function(){\n",
" var alpha_fg = this.props.alpha_fg;\n",
" var alpha_bg = this.props.alpha_bg; \n",
" \n",
" // get the data for the voronoi mesh\n",
" data = new Array();\n",
" for(var i=0; i<this.props.line_ids.length; i++){\n",
" var line_instance = mpld3.get_element(this.props.line_ids[i], this.fig);\n",
" \n",
" for (j=1; j<line_instance.data.length; j++){\n",
" var obj = {}\n",
" obj.x = line_instance.data[j][line_instance.props.xindex]\n",
" obj.y = line_instance.data[j][line_instance.props.yindex]\n",
" obj.line_instance = line_instance\n",
" obj.line_id = this.props.line_ids[i]\n",
" obj.label_id = i\n",
" obj.fig = this.fig\n",
" data.push(obj)\n",
" }\n",
" }\n",
"\n",
" var ax = mpld3.get_element(this.props.line_ids[0], this.fig).ax\n",
"\n",
" // we hide the transform from data coordinates to svg\n",
" // coordinates in the voronoi\n",
" var transform_x = function(d){return ax.x(d)+ax.position[0]};\n",
" var transform_y = function(d){return ax.y(d)+ax.position[1]};\n",
" \n",
" var voronoi = d3.geom.voronoi()\n",
" .x(function(d) { return transform_x(d.x); })\n",
" .y(function(d) { return transform_y(d.y); }) \n",
" .clipExtent([ax.position, [ax.position[0]+ax.width, ax.position[1]+ax.height]]);\n",
"\n",
" \n",
"\n",
" var voronoiGroup = this.fig.canvas.append(\"svg:g\")\n",
" .attr(\"class\", \"voronoi\");\n",
" \n",
" voronoiGroup.selectAll(\"path\")\n",
" .data(voronoi(d3.nest()\n",
" .key(function(d) { return d.x + \",\" + d.y; })\n",
" .rollup(function(v) { return v[0]; })\n",
" .entries(data)\n",
" .map(function(d) { return d.values; })))\n",
" .enter().append(\"path\")\n",
" .attr(\"d\", function(d) { \n",
" var ret = \"M\" + d.join(\" L\") + \"Z\";\n",
" return ret; })\n",
" .datum(function(d) {return d.point; })\n",
" .on(\"mouseover\", mouseover)\n",
" .on(\"mouseout\", mouseout);\n",
" \n",
" \n",
" function mouseover(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_fg); \n",
" }\n",
"\n",
" function mouseout(d) {\n",
" d3.select(d.line_instance.path[0][0])\n",
" .style(\"stroke-opacity\", alpha_bg); \n",
" } \n",
" };\n",
" \n",
" mpld3.draw_figure(\"fig_el29296612281128121086209\", {\"axes\": [{\"xlim\": [-5.0, 4.0], \"yscale\": \"linear\", \"axesbg\": \"#FFFFFF\", \"texts\": [], \"zoomable\": true, \"images\": [], \"xdomain\": [-5.0, 4.0], \"ylim\": [-5.0, 4.0], \"paths\": [], \"sharey\": [], \"sharex\": [], \"axesbgalpha\": null, \"axes\": [{\"scale\": \"linear\", \"tickformat\": null, \"grid\": {\"gridOn\": false}, \"fontsize\": 10.0, \"position\": \"bottom\", \"nticks\": 10, \"tickvalues\": null}, {\"scale\": \"linear\", \"tickformat\": null, \"grid\": {\"gridOn\": false}, \"fontsize\": 10.0, \"position\": \"left\", \"nticks\": 10, \"tickvalues\": null}], \"lines\": [{\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data01\", \"id\": \"el2929663034320\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data02\", \"id\": \"el2929666438800\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data03\", \"id\": \"el2929666439376\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data04\", \"id\": \"el2929666439824\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data05\", \"id\": \"el2929666440272\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data06\", \"id\": \"el2929666440720\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data07\", \"id\": \"el2929666441168\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data08\", \"id\": \"el2929666449872\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data09\", \"id\": \"el2929666450320\"}, {\"color\": \"#000000\", \"yindex\": 1, \"coordinates\": \"data\", \"dasharray\": \"none\", \"zorder\": 2, \"alpha\": 0.5, \"xindex\": 0, \"linewidth\": 4, \"data\": \"data10\", \"id\": \"el2929666450768\"}], \"markers\": [], \"id\": \"el2929636071440\", \"ydomain\": [-5.0, 4.0], \"collections\": [], \"xscale\": \"linear\", \"bbox\": [0.125, 0.125, 0.77500000000000002, 0.77500000000000002]}], \"height\": 320.0, \"width\": 480.0, \"plugins\": [{\"line_ids\": [\"el2929663034320\", \"el2929666438800\", \"el2929666439376\", \"el2929666439824\", \"el2929666440272\", \"el2929666440720\", \"el2929666441168\", \"el2929666449872\", \"el2929666450320\", \"el2929666450768\"], \"alpha_fg\": 1.0, \"type\": \"voronoi_highlightlines\", \"alpha_bg\": 0.5}], \"data\": {\"data10\": [[0.16273855226544243, -3.4897026651233123], [-0.6012108784612044, 0.16700308454559007]], \"data08\": [[1.0547069220341905, -0.6834885617759904], [-1.0674566296583776, -2.1212308569366884]], \"data09\": [[-1.296771150404587, 0.8948351013119847], [1.0008945478705795, 1.5191032237783906]], \"data06\": [[-1.4141251020669192, -0.2934800582270773], [3.1523292294200234, 1.5178762353327664]], \"data07\": [[0.41778797792955563, -4.476160212892489], [0.9764821770621639, 3.2660123501986558]], \"data04\": [[1.1697397158984613, -0.39716380906911775], [-1.5289932197434748, -0.26933555066322934]], \"data05\": [[-4.6630416606130405, -1.047479420816889], [-0.822356531818682, -2.6179520368504705]], \"data02\": [[-0.5856591433442802, 2.120760653448642], [-0.8713072223192523, 0.23270042066671262]], \"data03\": [[-0.16365465477992086, 1.0086767744100886], [-0.9924796855761052, -1.5592422087643882]], \"data01\": [[0.09081118740513912, -0.1468675047723893], [1.5262182962880018, 0.2202561661469102]]}, \"id\": \"el2929661228112\"});\n",
" })\n",
" });\n",
"}\n",
"</script>"
],
"metadata": {},
"output_type": "pyout",
"prompt_number": 4,
"text": [
"<IPython.core.display.HTML at 0x3c3be10>"
]
}
],
"prompt_number": 4
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": []
}
],
"metadata": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment