{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"<img src=\"states_outlines.png\" width=\"500\"/>\n",
"\n",
"# US states outlines\n",
"\n",
"The following proof of concept exercise illustrates how to combine\n",
"dual canvas features in a relatively complex visualization.\n",
"\n",
"The visualization overlays state border polygons onto a map image\n",
"and adds a mouse over event handler which shows the name of the state\n",
"under the mouse in a floating dialog."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"# https://stackoverflow.com/questions/1814169/geographical-boundaries-of-states-provinces-google-maps-polygon\n",
"\n",
"# Parse State border polygons from XML\n",
"xml_file = \"states.xml\"\n",
"import xml.etree.ElementTree as ET\n",
"tree = ET.parse(xml_file)\n",
"root = tree.getroot()\n",
"name_to_boundary = {}\n",
"allpoints = []\n",
"for state in root:\n",
" name = state.attrib[\"name\"]\n",
" #print name\n",
" boundary = []\n",
" for point in state:\n",
" lat = float(point.attrib[\"lat\"])\n",
" lng = float(point.attrib[\"lng\"])\n",
" #pt = [lat, lng]\n",
" pt = [lng, lat]\n",
" boundary.append(pt)\n",
" allpoints.append(pt)\n",
" name_to_boundary[name] = boundary"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false,
"deletable": true,
"editable": true,
"scrolled": true
},
"outputs": [],
"source": [
"# Draw a color map image with state polygons and borders\n",
"from jp_doodle import dual_canvas\n",
"from IPython.display import display\n",
"\n",
"states = dual_canvas.DualCanvasWidget(width=520, height=320)\n",
"states.check_jquery()\n",
"\n",
"states.text(text=\"Longitude\", y=-60, x=250, align=\"center\", font=\"bold 20px Arial\",)\n",
"states.text(text=\"Latitude\", y=150, x=-50, align=\"center\", degrees=90, font=\"bold 20px Arial\",)\n",
"minlng = min(x[0] for x in allpoints)\n",
"maxlng = max(x[0] for x in allpoints)\n",
"minlat = min(x[1] for x in allpoints)\n",
"maxlat = max(x[1] for x in allpoints)\n",
"display(states)\n",
"\n",
"# image underlay\n",
"earth_image = 'Earthmap1000x500.jpg'\n",
"# local link does not work (as written) in Jupyter Lab\n",
"earth_image = 'https://upload.wikimedia.org/wikipedia/commons/a/ac/Earthmap1000x500.jpg'\n",
"def latitude_pixel(lat):\n",
" \"pixel from top edge = (90 - latitude) / 0,36\"\n",
" return (90.0 - lat) / 0.36\n",
"def longitude_pixel(lng):\n",
" \"pixel from left hand side = (180 + longitude) / 0,36\"\n",
" return (180 + lng) / 0.36\n",
"sx = longitude_pixel(minlng)\n",
"sy = latitude_pixel(maxlat)\n",
"sWidth = (maxlng - minlng) / 0.36\n",
"sHeight = (maxlat - minlat) / 0.36\n",
"\n",
"\n",
"states.name_image_url(\"earth\", earth_image)\n",
"states.named_image(\"earth\", 0,0,500,300, degrees=0, \n",
" sx=sx, sy=sy, sWidth=sWidth, sHeight=sHeight)\n",
"\n",
"# States polygons overlay.\n",
"frame = states.frame_region(0,0,500,300,minlng, minlat, maxlng, maxlat)\n",
"for name in name_to_boundary:\n",
" points = name_to_boundary[name]\n",
" # add semi-transparent filled polygon for state interior\n",
" frame.polygon(points=points, name=name, color=\"rgba(100,200,0,0.5)\")\n",
" # add unnamed state border\n",
" frame.polygon(points=points, color=\"#38f\", fill=False)\n",
"\n",
"# add reference axes\n",
"frame.right_axis(\n",
" min_value= minlat,\n",
" max_value= maxlat,\n",
" max_tick_count= 6,\n",
" axis_origin= dict(x=maxlng+2, y=0),\n",
" tick_line_config= dict(color=\"#66f\"),\n",
" tick_text_config= dict(color=\"#875\"),\n",
")\n",
"\n",
"frame.bottom_axis(\n",
" min_value= minlng,\n",
" max_value= maxlng,\n",
" max_tick_count= 8,\n",
" axis_origin= dict(x=0, y= minlat-2),\n",
" tick_line_config= dict(color=\"#66f\"),\n",
" tick_text_config= dict(color=\"#875\", align=\"center\", valign=\"center\", degrees=0),\n",
" add_end_points= True,\n",
")\n",
"\n",
"#print minlng, minlat, maxlng, maxlat\n",
"states.fit()\n",
"\n",
"# Use javascript to add mouse over event handling and a pop-up dialog.\n",
"\n",
"states.js_init(\"\"\"\n",
"\n",
"// Text info area and JQueryUI dialog\n",
"var info = $(\"<div>info here</div>\").appendTo(element);\n",
"var dialog = $(\"<div>dialog text</div>\").appendTo(element);\n",
"dialog.dialog();\n",
"\n",
"// https://stackoverflow.com/questions/17358622/dialog-box-hide-and-show-jquery\n",
"dialog.dialog(\"open\");\n",
"// Using dialog.parent().hide() and *.show() avoids scrolling anomalies.\n",
"dialog.parent().hide()\n",
"\n",
"element.text\n",
"var last_name = null\n",
"count = 0;\n",
"var mouse_move = function(event) {\n",
" count += 1;\n",
" var name = event.canvas_name;\n",
" var pos = { my: \"left+10 top+10\", at: \"left bottom\", of: event }\n",
" dialog.dialog(\"option\", \"position\", pos);\n",
" if ((last_name) && ((last_name!=name) || event.type==\"mouseout\")) {\n",
" // obscure the interior)\n",
" element.change(last_name, {color: \"rgba(100,200,0,0.5)\"})\n",
" last_name = null;\n",
" dialog.parent().hide();\n",
" }\n",
" if (name) {\n",
" // make the interior transparent\n",
" element.change(name, {color: \"rgba(0,0,0,0)\"})\n",
" last_name = name;\n",
" dialog.html(\"<div>\"+name+\"</div>\");\n",
" dialog.parent().show();\n",
" }\n",
" info.html(\"<div>name=\"+name+\"; last_name=\"+last_name\n",
" +\"; count=\"+count+\"</div>\");\n",
"}\n",
"element.on_canvas_event(\"mousemove\", mouse_move);\n",
"\"\"\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true,
"deletable": true,
"editable": true
},
"outputs": [],
"source": [
"# https://commons.wikimedia.org/wiki/File:Earthmap1000x500.jpg\n",
"#pixel from top edge = (90 - latitude) / 0,36\n",
"#pixel from left hand side = (180 + longitude) / 0,36"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false,
"deletable": true,
"editable": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 2",
"language": "python",
"name": "python2"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 2
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython2",
"version": "2.7.13"
}
},
"nbformat": 4,
"nbformat_minor": 2
}