\n",
"
\n",
"
\n",
"
\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### スプレッドシートの表示\n",
"スプレッドシート（表）を表示します。"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"d3.csv(\"data/d3.csv\",function(error,data) { createSpreadsheet(data, \"#spreadsheet\")});\n",
" \n",
" function createSpreadsheet(incData, target) {\n",
" \n",
" var keyValues = d3.keys(incData[0])\n",
" \n",
" d3.select(target)\n",
" .append(\"div\")\n",
" .attr(\"class\", \"table\")\n",
"\n",
" d3.select(target).select(\"div.table\")\n",
" .append(\"div\")\n",
" .attr(\"class\", \"head\")\n",
" .selectAll(\"div.data\")\n",
" .data(keyValues)\n",
" .enter()\n",
" .append(\"div\")\n",
" .attr(\"class\", \"data\")\n",
" .html(function (d) {return d})\n",
" .style(\"left\", function(d,i) {return (i * 100) + \"px\"});\n",
"\n",
" d3.select(target).select(\"div.table\")\n",
" .selectAll(\"div.datarow\")\n",
" .data(incData)\n",
" .enter()\n",
" .append(\"div\")\n",
" .attr(\"class\", \"datarow\")\n",
" .style(\"top\", function(d,i) {return \"18px\"});\n",
" \n",
" d3.select(target).selectAll(\"div.datarow\")\n",
" .selectAll(\"div.data\")\n",
" .data(function(d) {return d3.entries(d)})\n",
" .enter()\n",
" .append(\"div\")\n",
" .attr(\"class\", \"data\")\n",
" .html(function (d) {return d.value})\n",
" .style(\"left\", function(d,i,j) {return (i * 100) + \"px\"});\n",
" }"
],
"text/plain": [
"
"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"d3.csv(\"data/d3.csv\",function(error,data) { createSpreadsheet(data, \"#spreadsheet\")});\n",
" \n",
" function createSpreadsheet(incData, target) {\n",
" \n",
" var keyValues = d3.keys(incData[0])\n",
" \n",
" d3.select(target)\n",
" .append(\"div\")\n",
" .attr(\"class\", \"table\")\n",
"\n",
" d3.select(target).select(\"div.table\")\n",
" .append(\"div\")\n",
" .attr(\"class\", \"head\")\n",
" .selectAll(\"div.data\")\n",
" .data(keyValues)\n",
" .enter()\n",
" .append(\"div\")\n",
" .attr(\"class\", \"data\")\n",
" .html(function (d) {return d})\n",
" .style(\"left\", function(d,i) {return (i * 100) + \"px\"});\n",
"\n",
" d3.select(target).select(\"div.table\")\n",
" .selectAll(\"div.datarow\")\n",
" .data(incData)\n",
" .enter()\n",
" .append(\"div\")\n",
" .attr(\"class\", \"datarow\")\n",
" .style(\"top\", function(d,i) {return \"18px\"});\n",
" \n",
" d3.select(target).selectAll(\"div.datarow\")\n",
" .selectAll(\"div.data\")\n",
" .data(function(d) {return d3.entries(d)})\n",
" .enter()\n",
" .append(\"div\")\n",
" .attr(\"class\", \"data\")\n",
" .html(function (d) {return d.value})\n",
" .style(\"left\", function(d,i,j) {return (i * 100) + \"px\"});\n",
" }"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 小学校区の表示\n",
"次に小学校区を表示します。"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"var width = 450, height = 350;\n",
"var takaokaBoundingBox = {geometry: {coordinates: [[[136.904778, 36.822525], [137.072662, 36.822525], [137.072662, 36.658552], [136.904778, 36.658552], [136.904778, 36.822525]]], type: \"Polygon\"}, id: 999999, properties:{}, type: \"Feature\"};\n",
"\n",
"d3.select(\"#map\").select(\"svg\").attr(\"style\", \"width:450px;height:350px;border:1px lightgray solid;\");\n",
"d3.select(\"#map\").select(\"svg\").append(\"g\").attr(\"id\", \"tiles\");\n",
"d3.select(\"#map\").select(\"svg\").append(\"g\").attr(\"id\", \"vectors\");\n",
"\n",
"var tile = d3.geo.tile()\n",
" .size([width, height]);\n",
"\n",
"var projection = d3.geo.mercator()\n",
" .scale((1 << 19) / 2 / Math.PI)\n",
" .translate([width / 2, height / 2]);\n",
"\n",
"var center = projection([137.025970, 36.754062]);\n",
"\n",
"var path = d3.geo.path()\n",
" .projection(projection);\n",
"var zoom = d3.behavior.zoom()\n",
" .scale(projection.scale() * 2 * Math.PI)\n",
" .translate([width - center[0], height - center[1]])\n",
" .on(\"zoom\", redraw);\n",
"d3.select(\"#map\").select(\"svg\").call(zoom);\n",
"projection\n",
" .scale(1 / 2 / Math.PI)\n",
" .translate([0, 0]);\n",
"\n",
"var geoPath = d3.geo.path().projection(projection);\n",
"\n",
"d3.json('data/A27-10_16-g_SchoolDistrict.json', function (schoolDistnct) {\n",
" var data = schoolDistnct.features.filter(function(d) { \n",
" return d.properties.A27_006==\"高岡市立\"; \n",
" });\n",
"\n",
" d3.select(\"#map\").select(\"#vectors\").selectAll(\"path.countries\").data(data)\n",
" .enter()\n",
" .append(\"path\")\n",
" .attr(\"d\", geoPath)\n",
" .attr(\"class\", \"countries\")\n",
" .style(\"fill\", \"red\")\n",
" .style(\"stroke-width\", 3)\n",
" .style(\"stroke\", \"black\")\n",
" .style(\"fill-opacity\", .25) \n",
" \n",
"}); \n",
"\n",
"redraw();\n",
"\n",
"function redraw() {\n",
" var tiles = tile\n",
" .scale(zoom.scale())\n",
" .translate(zoom.translate())();\n",
" \n",
" var image = d3.select(\"#map\").select(\"#tiles\")\n",
" .attr(\"transform\",\n",
" \"scale(\" + tiles.scale + \") translate(\" + tiles.translate + \")\")\n",
" .selectAll(\"image\")\n",
" .data(tiles, function(d) { return d; });\n",
" \n",
" image.exit()\n",
" .remove();\n",
"\n",
" image.enter().append(\"image\")\n",
" .attr(\"xlink:href\",\n",
" function(d) { return \"http://\" \n",
" + [\"a\", \"b\", \"c\"][Math.random() * 3 | 0] \n",
" + \".tile.openstreetmap.org/\" + d[2] + \"/\" + d[0] + \"/\" + d[1] \n",
" + \".png\"; }) \n",
" .attr(\"width\", 1)\n",
" .attr(\"height\", 1)\n",
" .attr(\"x\", function(d) { return d[0]; })\n",
" .attr(\"y\", function(d) { return d[1]; });\n",
" \n",
" projection\n",
" .scale(zoom.scale() / 2 / Math.PI)\n",
" .translate(zoom.translate());\n",
"\n",
" d3.select(\"#map\").selectAll(\"path\")\n",
" .attr(\"d\", geoPath);\n",
"}"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"var width = 450, height = 350;\n",
"var takaokaBoundingBox = {geometry: {coordinates: [[[136.904778, 36.822525], [137.072662, 36.822525], [137.072662, 36.658552], [136.904778, 36.658552], [136.904778, 36.822525]]], type: \"Polygon\"}, id: 999999, properties:{}, type: \"Feature\"};\n",
"\n",
"d3.select(\"#map\").select(\"svg\").attr(\"style\", \"width:450px;height:350px;border:1px lightgray solid;\");\n",
"d3.select(\"#map\").select(\"svg\").append(\"g\").attr(\"id\", \"tiles\");\n",
"d3.select(\"#map\").select(\"svg\").append(\"g\").attr(\"id\", \"vectors\");\n",
"\n",
"var tile = d3.geo.tile()\n",
" .size([width, height]);\n",
"\n",
"var projection = d3.geo.mercator()\n",
" .scale((1 << 19) / 2 / Math.PI)\n",
" .translate([width / 2, height / 2]);\n",
"\n",
"var center = projection([137.025970, 36.754062]);\n",
"\n",
"var path = d3.geo.path()\n",
" .projection(projection);\n",
"var zoom = d3.behavior.zoom()\n",
" .scale(projection.scale() * 2 * Math.PI)\n",
" .translate([width - center[0], height - center[1]])\n",
" .on(\"zoom\", redraw);\n",
"d3.select(\"#map\").select(\"svg\").call(zoom);\n",
"projection\n",
" .scale(1 / 2 / Math.PI)\n",
" .translate([0, 0]);\n",
"\n",
"var geoPath = d3.geo.path().projection(projection);\n",
"\n",
"d3.json('data/A27-10_16-g_SchoolDistrict.json', function (schoolDistnct) {\n",
" var data = schoolDistnct.features.filter(function(d) { \n",
" return d.properties.A27_006==\"高岡市立\"; \n",
" });\n",
"\n",
" d3.select(\"#map\").select(\"#vectors\").selectAll(\"path.countries\").data(data)\n",
" .enter()\n",
" .append(\"path\")\n",
" .attr(\"d\", geoPath)\n",
" .attr(\"class\", \"countries\")\n",
" .style(\"fill\", \"red\")\n",
" .style(\"stroke-width\", 3)\n",
" .style(\"stroke\", \"black\")\n",
" .style(\"fill-opacity\", .25) \n",
" \n",
"}); \n",
"\n",
"redraw();\n",
"\n",
"function redraw() {\n",
" var tiles = tile\n",
" .scale(zoom.scale())\n",
" .translate(zoom.translate())();\n",
" \n",
" var image = d3.select(\"#map\").select(\"#tiles\")\n",
" .attr(\"transform\",\n",
" \"scale(\" + tiles.scale + \") translate(\" + tiles.translate + \")\")\n",
" .selectAll(\"image\")\n",
" .data(tiles, function(d) { return d; });\n",
" \n",
" image.exit()\n",
" .remove();\n",
"\n",
" image.enter().append(\"image\")\n",
" .attr(\"xlink:href\",\n",
" function(d) { return \"http://\" \n",
" + [\"a\", \"b\", \"c\"][Math.random() * 3 | 0] \n",
" + \".tile.openstreetmap.org/\" + d[2] + \"/\" + d[0] + \"/\" + d[1] \n",
" + \".png\"; }) \n",
" .attr(\"width\", 1)\n",
" .attr(\"height\", 1)\n",
" .attr(\"x\", function(d) { return d[0]; })\n",
" .attr(\"y\", function(d) { return d[1]; });\n",
" \n",
" projection\n",
" .scale(zoom.scale() / 2 / Math.PI)\n",
" .translate(zoom.translate());\n",
"\n",
" d3.select(\"#map\").selectAll(\"path\")\n",
" .attr(\"d\", geoPath);\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 円グラフの表示\n",
"次に各地域ごとの人口を円グラフで表示します。"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"var width = 350,\n",
" height = 350,\n",
" radius = Math.min(width, height) / 2;\n",
"var maxValue = 17744;\n",
"d3.select(\"#chart\").select(\"svg\").attr(\"style\", \"width:350px; height:350px;border:1px lightgray solid;\");\n",
"\n",
"var color = d3.scale.linear()\n",
" .interpolate(d3.interpolateHcl)\n",
" .domain([0,maxValue]).range([\"yellow\", \"red\"]);\n",
"\n",
"var arc = d3.svg.arc()\n",
" .outerRadius(radius - 10)\n",
" .innerRadius(0);\n",
"\n",
"var labelArc = d3.svg.arc()\n",
" .outerRadius(radius - 40)\n",
" .innerRadius(radius - 40);\n",
"\n",
"var pie = d3.layout.pie()\n",
" .value(function(d) { d.selected = false; return d.population; });\n",
"\n",
"var svg = d3.select(\"#chart\").select(\"svg\")\n",
" .attr(\"width\", width)\n",
" .attr(\"height\", height)\n",
" .append(\"g\")\n",
" .attr(\"transform\", \"translate(\" + width / 2 + \",\" + height / 2 + \")\");\n",
"\n",
"d3.csv(\"data/d3.csv\", type, function(error, data) {\n",
" var g = svg.selectAll(\".arc\")\n",
" .data(pie(data))\n",
" .enter().append(\"g\")\n",
" .attr(\"class\", \"arc\");\n",
"\n",
" g.append(\"path\")\n",
" .attr(\"d\", arc)\n",
" .style(\"stroke\", \"lightgray\")\n",
" .style(\"fill\", function(d) { return color(d.data.population); });\n",
"\n",
"});\n",
"\n",
"function type(d) {\n",
" d.population = +d.population;\n",
" return d;\n",
"}"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"var width = 350,\n",
" height = 350,\n",
" radius = Math.min(width, height) / 2;\n",
"var maxValue = 17744;\n",
"d3.select(\"#chart\").select(\"svg\").attr(\"style\", \"width:350px; height:350px;border:1px lightgray solid;\");\n",
"\n",
"var color = d3.scale.linear()\n",
" .interpolate(d3.interpolateHcl)\n",
" .domain([0,maxValue]).range([\"yellow\", \"red\"]);\n",
"\n",
"var arc = d3.svg.arc()\n",
" .outerRadius(radius - 10)\n",
" .innerRadius(0);\n",
"\n",
"var labelArc = d3.svg.arc()\n",
" .outerRadius(radius - 40)\n",
" .innerRadius(radius - 40);\n",
"\n",
"var pie = d3.layout.pie()\n",
" .value(function(d) { d.selected = false; return d.population; });\n",
"\n",
"var svg = d3.select(\"#chart\").select(\"svg\")\n",
" .attr(\"width\", width)\n",
" .attr(\"height\", height)\n",
" .append(\"g\")\n",
" .attr(\"transform\", \"translate(\" + width / 2 + \",\" + height / 2 + \")\");\n",
"\n",
"d3.csv(\"data/d3.csv\", type, function(error, data) {\n",
" var g = svg.selectAll(\".arc\")\n",
" .data(pie(data))\n",
" .enter().append(\"g\")\n",
" .attr(\"class\", \"arc\");\n",
"\n",
" g.append(\"path\")\n",
" .attr(\"d\", arc)\n",
" .style(\"stroke\", \"lightgray\")\n",
" .style(\"fill\", function(d) { return color(d.data.population); });\n",
"\n",
"});\n",
"\n",
"function type(d) {\n",
" d.population = +d.population;\n",
" return d;\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 地図にマウスイベントを追加\n",
"地図にマウスオーバイベントを追加して、マウスの位置の小学校区と表の該当する行を青色に変えて表示します。\n",
"また、スプレッドシートが大きく画面では全て表示できないので、mouse-overイベントでその小学校区の情報を表示します。"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"d3.select(\"#vectors\").selectAll(\"path.countries\")\n",
" .on(\"mouseover\", hover)\n",
" .on(\"mouseout\", mouseOut);\n",
"\n",
"var explode = function(x,index) {\n",
" var offset = 10;\n",
" var angle = (x.startAngle + x.endAngle) / 2;\n",
" var xOff = Math.sin(angle)*offset;\n",
" var yOff = -Math.cos(angle)*offset;\n",
" return \"translate(\"+xOff+\",\"+yOff+\")\";\n",
"};\n",
"\n",
"var inplode = function(x,index) {\n",
" var offset = -0;\n",
" var angle = (x.startAngle + x.endAngle) / 2;\n",
" var xOff = Math.sin(angle)*offset;\n",
" var yOff = -Math.cos(angle)*offset;\n",
" return \"translate(\"+xOff+\",\"+yOff+\")\";\n",
"};\n",
"\n",
"function hover(hoverD) {\n",
" d3.select(\"#chart\").selectAll(\"path\")\n",
" .filter( function (d) { d.data.selected = d.data.schoolDistrict == hoverD.properties.A27_007; return d.data.selected; })\n",
" .transition()\n",
" .duration(500)\n",
" .attr(\"transform\", explode);\n",
" d3.selectAll(\"div.datarow\")\n",
" .filter( function (d) { return d.schoolDistrict == hoverD.properties.A27_007})\n",
" .style(\"background\", \"#94B8FF\")\n",
" .style(\"display\", \"block\");\n",
" d3.select(\"#vectors\").selectAll(\"path.countries\")\n",
" .filter( function (d) { return d == hoverD; })\n",
" .style(\"fill\", \"blue\");\n",
"};\n",
"\n",
"function mouseOut() {\n",
" d3.select(\"#chart\").selectAll(\"path\")\n",
" .filter( function (d) { return d.data.selected; })\n",
" .transition()\n",
" .duration(500)\n",
" .attr(\"transform\", inplode);\n",
" d3.selectAll(\"div.datarow\").style(\"display\", \"none\");\n",
" d3.select(\"#vectors\").selectAll(\"path.countries\").style(\"fill\", \"red\");\n",
"};"
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"d3.select(\"#vectors\").selectAll(\"path.countries\")\n",
" .on(\"mouseover\", hover)\n",
" .on(\"mouseout\", mouseOut);\n",
"\n",
"var explode = function(x,index) {\n",
" var offset = 10;\n",
" var angle = (x.startAngle + x.endAngle) / 2;\n",
" var xOff = Math.sin(angle)*offset;\n",
" var yOff = -Math.cos(angle)*offset;\n",
" return \"translate(\"+xOff+\",\"+yOff+\")\";\n",
"};\n",
"\n",
"var inplode = function(x,index) {\n",
" var offset = -0;\n",
" var angle = (x.startAngle + x.endAngle) / 2;\n",
" var xOff = Math.sin(angle)*offset;\n",
" var yOff = -Math.cos(angle)*offset;\n",
" return \"translate(\"+xOff+\",\"+yOff+\")\";\n",
"};\n",
"\n",
"function hover(hoverD) {\n",
" d3.select(\"#chart\").selectAll(\"path\")\n",
" .filter( function (d) { d.data.selected = d.data.schoolDistrict == hoverD.properties.A27_007; return d.data.selected; })\n",
" .transition()\n",
" .duration(500)\n",
" .attr(\"transform\", explode);\n",
" d3.selectAll(\"div.datarow\")\n",
" .filter( function (d) { return d.schoolDistrict == hoverD.properties.A27_007})\n",
" .style(\"background\", \"#94B8FF\")\n",
" .style(\"display\", \"block\");\n",
" d3.select(\"#vectors\").selectAll(\"path.countries\")\n",
" .filter( function (d) { return d == hoverD; })\n",
" .style(\"fill\", \"blue\");\n",
"};\n",
"\n",
"function mouseOut() {\n",
" d3.select(\"#chart\").selectAll(\"path\")\n",
" .filter( function (d) { return d.data.selected; })\n",
" .transition()\n",
" .duration(500)\n",
" .attr(\"transform\", inplode);\n",
" d3.selectAll(\"div.datarow\").style(\"display\", \"none\");\n",
" d3.select(\"#vectors\").selectAll(\"path.countries\").style(\"fill\", \"red\");\n",
"};"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": 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": 0
}