{"id":4183,"date":"2015-04-06T11:25:10","date_gmt":"2015-04-06T02:25:10","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=4183"},"modified":"2015-07-20T09:13:31","modified_gmt":"2015-07-20T00:13:31","slug":"post-4183","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/4183","title":{"rendered":"\u65e5\u672c\u306b\u9ad8\u901f\u9053\u8def\u304c\u51fa\u6765\u308b\u307e\u3067"},"content":{"rendered":"<p><a href=\"http:\/\/i.imgur.com\/Iqe1Lq4.gif\">Japan and her National highways.<\/a><\/p>\n<p>\u3068\u3044\u3046Gif\u753b\u50cf\u3092\u898b\u3064\u3051\u3001\u3053\u308c\u3068\u4f3c\u305f\u3088\u3046\u306a\u3082\u306e\u3092D3.js\u3067\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p><a href=\"http:\/\/shimz.me\/datavis\/japan\/highway\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/04\/kyoju000002.jpg\" alt=\"\u9ad8\u901f\u9053\u8def \u958b\u696d\u6642\u7cfb\u5217\u8868\u793a\" width=\"590\" height=\"464\" class=\"aligncenter size-full wp-image-4184\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/04\/kyoju000002.jpg 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/04\/kyoju000002-191x150.jpg 191w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/datavis\/japan\/highway\/\">example<\/a><\/p>\n<p>\u56fd\u571f\u6570\u5024\u60c5\u5831\u306e\u300c<a href=\"http:\/\/nlftp.mlit.go.jp\/ksj\/gml\/datalist\/KsjTmplt-N06.html\">\u9ad8\u901f\u9053\u8def\u6642\u7cfb\u5217\u30c7\u30fc\u30bf<\/a>\u300d\u304b\u3089\u53d6\u5f97\u3057\u305f\u9ad8\u901f\u9053\u8def\u60c5\u5831\u3092\u958b\u696d\u5e74\u6bce\u306b\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >d3.json(\"highway.topojson\",  function(json){\r\n\tdraw(json);\r\n})\t\r\n\r\nfunction draw(json){\r\n\t\/\/geojson\u30c7\u30fc\u30bf\u306b\u5909\u63db\r\n\tvar geodata = topojson.feature(json, json.objects.highway);\r\n\r\n\t\/\/\u958b\u696d\u5e74\u306e\u30ea\u30b9\u30c8\u3092\u53d6\u5f97\r\n\tvar yearList = d3.keys(d3.nest()\r\n\t\t.key(function(d) { return d.properties[\"N06_002\"]; })\r\n\t\t.map(geodata.features));\r\n\t\r\n\t\/\/\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u8981\u7d20\u8ffd\u52a0\t\r\n\tvar tooltip = d3.select(\"body\")\r\n\t\t.append(\"div\")\r\n\t\t.attr(\"class\", \"tooltip\")\r\n\t\t.style(\"position\", \"absolute\")\r\n\t\t.style(\"z-index\", \"10\")\r\n\t\t.style(\"visibility\", \"hidden\")\r\n\t\t\t\r\n\t\/\/svg\u8981\u53d6\u5f97\r\n\tvar svg = d3.select(\"svg\");\r\n\t\r\n\t\/\/\u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u95a2\u6570\u751f\u6210\r\n\tvar projection = d3.geo\r\n\t\t.mercator()\t\t\/\/\u6295\u5f71\u6cd5\u306e\u6307\u5b9a\r\n\t\t.scale(2500)\t\/\/\u30b9\u30b1\u30fc\u30eb\uff08\u30ba\u30fc\u30e0\uff09\u306e\u6307\u5b9a\r\n\t\t.translate([500 , 500]) \/\/\u8868\u793a\u4f4d\u7f6e\u8abf\u6574\r\n\t\t.center([139.0634281, 36.3894816]); \/\/\u4e2d\u5fc3\u306e\u5ea7\u6a19\u3092\u6307\u5b9a\r\n\t\r\n\t\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u751f\u6210\r\n\tvar path = d3.geo.path().projection(projection);\u3000\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\r\n\t\r\n\t\/\/\u9053\u8def\u63cf\u753b\r\n\tsvg.selectAll(\"path\")\r\n\t\t.data(geodata.features)\r\n\t\t.enter()\r\n\t\t.append(\"path\")\r\n\t\t.attr({\r\n\t\t\t\"class\": function(d){ return \"load l\" + d.properties[\"N06_002\"] },\r\n\t\t\t\"d\":path,\r\n\t\t\t\"fill\":\"none\",\r\n\t\t\t\"stroke\":\"red\",\r\n\t\t\t\"stroke-width\": 2,\r\n\t\t\t\"stroke-opacity\": 0\t\/\/\u6700\u521d\u306f\u900f\u660e\u306b\u3057\u3066\u304a\u304f\r\n\t\t})\r\n\t\t.on(\"mouseover\", function(d) {\r\n\t\t\ttooltip.style(\"visibility\", \"visible\");\r\n\t\t})\r\n\t\t.on(\"mouseout\", function(d) {\r\n\t\t\ttooltip.style(\"visibility\", \"hidden\");\t\t\r\n\t\t})\r\n\t\t.on(\"mousemove\", function(d){\r\n\t\t\tvar content = \"&lt;center&gt;\" +\r\n\t\t\t\t\"&lt;h2&gt;\" + d.properties[\"N06_007\"] + \"&lt;\/h2&gt;\" +\r\n\t\t\t\t\"&lt;p&gt;\" + d.properties[\"N06_002\"] + \"\u5e74\u958b\u696d&lt;\/p&gt;\" +\r\n\t\t\t\t\"&lt;\/center&gt;\";\r\n\t\t\ttooltip\r\n\t\t\t .style(\"top\", (d3.event.pageY-10)+\"px\")\r\n\t\t\t .style(\"left\",(d3.event.pageX+10)+\"px\")\r\n\t\t\t .html(content);\r\n\t\t});\r\n\t\t\r\n\t\r\n\t\/\/\u5e74\u8868\u793a\u7528\u30c6\u30ad\u30b9\u30c8\u8981\u7d20\u8ffd\u52a0\t\r\n\tvar text = svg.append(\"text\")\r\n\t\t.attr({\r\n\t\t\t\"font-size\":80,\r\n\t\t\t\"x\":50,\r\n\t\t\t\"y\":200\r\n\t\t})\r\n\t\t.text(yearList[0]);\r\n\t\r\n\t\/\/\u9053\u8def\u3092\u8868\u793a\u3059\u308b\t\r\n\tvar show = function(year){\r\n\t\ttext.text(year);\r\n\t\tvar load = d3.selectAll(\".l\"+year).transition().duration(1000).attr({\r\n\t\t\t\"stroke\": \"red\",\r\n\t\t\t\"stroke-opacity\":1\r\n\t\t}).call(endall, function() { \r\n\t\t\t d3.selectAll(\".l\"+year).attr(\"stroke\", \"black\");  \/\/\u8868\u793a\u304c\u5b8c\u4e86\u3057\u305f\u3089\u9ed2\u304f\u3059\u308b\r\n\t\t}); \r\n\t\t\r\n\t}\r\n\t\r\n\t\/\/\u3086\u3063\u304f\u308a\u30eb\u30fc\u30d7\r\n\tvar loop = function(array, callback, interval){\r\n\t\tarray.forEach(function(d, i){\r\n\t\t\tsetTimeout(function(){\r\n\t\t\t\tcallback(d);\r\n\t\t\t}, i * interval);\r\n\t\t});\r\n\t}\r\n\t\r\n\t\/\/1100ms \u4e8b\u306byearList\u306e\u5024\u3092show\u95a2\u6570\u306b\u6e21\u3057\u3066\u5b9f\u884c\u3059\u308b\r\n\tloop(yearList, show, 1100);\r\n\t\r\n\t\/\/\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u7d42\u4e86\u5f8c\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u5b9f\u884c\u3059\u308b\u30d8\u30eb\u30d1\u30fc\u95a2\u6570\r\n\tfunction endall(transition, callback) { \r\n\t\tvar n = 0; \r\n\t\ttransition \r\n\t\t\t.each(function() { ++n; }) \r\n\t\t\t.each(\"end\", function() { if (!--n) callback.apply(this, arguments); }); \r\n\t};\r\n\t\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Japan and her National hi&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4184,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,51],"tags":[],"class_list":["post-4183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","category-datavis","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=4183"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4183\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/4184"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=4183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=4183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=4183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}