{"id":2451,"date":"2013-01-30T12:05:55","date_gmt":"2013-01-30T03:05:55","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2451"},"modified":"2018-04-02T15:42:05","modified_gmt":"2018-04-02T06:42:05","slug":"post-2451","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3v4\/2451","title":{"rendered":"\u3010D3.js\u3011\u5168\u56fd\u306e\u71b1\u4e2d\u75c7\u767a\u751f\u6570\u3092\u8868\u793a\u3057\u3066\u307f\u305f\uff08tSV\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\uff09"},"content":{"rendered":"<p><a href=\"https:\/\/bl.ocks.org\/shimizu\/400a0c7b29429dd527303bb9c0fdb77d\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/01\/Heatstroke-e1359513926393.jpg\" alt=\"Heatstroke\" width=\"600\" height=\"314\" class=\"aligncenter size-full wp-image-2452\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/01\/Heatstroke-e1359513926393.jpg 600w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/01\/Heatstroke-e1359513926393-287x150.jpg 287w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>\u3068\u308a\u3042\u3048\u305a\u3001\u8272\u3005\u3084\u3063\u3066\u307f\u3066\u899a\u3048\u3088\u3046\uff01\u3063\u3066\u3053\u3068\u3067\u3002<br \/>\n\u300c<a href=\"http:\/\/tenbou.nies.go.jp\/gis\/\">\u56fd\u7acb\u74b0\u5883\u7814\u7a76\u6240<\/a>\u300d\u3088\u308a\u3044\u305f\u3060\u3044\u305f\u71b1\u4e2d\u75c7\u767a\u751f\u6570\u306e\u30c7\u30fc\u30bf\u3092\u53ef\u8996\u5316\u3002<br \/>\n\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305ftsv\u30d5\u30a1\u30a4\u30eb\u306e\u6587\u5b57\u30b3\u30fc\u30c9\u3092UTF8\u306b\u30b3\u30f3\u30d0\u30fc\u30c8\u3057\u3066D3\u306b\u8aad\u307f\u8fbc\u307e\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" > \/\/\u71b1\u4e2d\u75c7\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\nd3.tsv(\"2017_3_6_16_38.tsv\", function(data) {\n    \n    \/\/\u6587\u5b57\u30c7\u30fc\u30bf\u3092\u6570\u5024\u306b\u5909\u63db\n    data.forEach(function(d){\n        d['\u6307\u6a19\u5024(\u5358\u4f4d:\u4eba\/10\u4e07\u4eba)'] = +d['\u6307\u6a19\u5024(\u5358\u4f4d:\u4eba\/10\u4e07\u4eba)'] * 100000;\n    });\n    \n    \n    var svg = d3.select('svg');\n    var w =  svg.node().clientWidth;\n    var h = svg.node().clientHeight;\n    \n    var radius = (w\/11); \/\/\u30b5\u30fc\u30af\u30eb\u306e\u534a\u5f84\n    var margin = radius\/4; \/\/\u30b5\u30fc\u30af\u30eb\u9593\u306e\u30de\u30fc\u30b8\u30f3\n    \n    \/\/\u30b9\u30c6\u30fc\u30b8\u3092\u8a2d\u7f6e\n    var stage = svg.append(\"g\")\n        .attr(\"transform\", \"translate(\"+[radius\/2,radius\/2]+\")\") \/\/top\u3068left\u3092\u534a\u5f84\u5206\u305a\u3089\u3059\n    \n    \/\/\u30bd\u30fc\u30c8\u3092\u5207\u308a\u66ff\u3048\u308b\u95a2\u6570\n    var sort = SortToggle();\n    \n    \/\/\u30c7\u30fc\u30bf\u306e\u6700\u5927\u5024\u3092\u53d6\u5f97\n    var dmax =  d3.max(data.map(function(d) { return d['\u6307\u6a19\u5024(\u5358\u4f4d:\u4eba\/10\u4e07\u4eba)']; }))\n\n    \/\/0\u301c\u30c7\u30fc\u30bf\u306e\u6700\u5927\u5024\u307e\u3067\u3092\u30010\u301c\u534a\u5f84\u306e\u5927\u304d\u3055\u306b\u6b63\u898f\u5316\n    var rScale = d3.scaleSqrt().domain([0, dmax]).range([0, radius-margin]);\n\n    render(data)\n    \n    d3.select('body')\n       .on('click', function(){ \/\/body\u306b\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u8a2d\u7f6e\n            render(sort(data));\n       })\n\n       \n    \/\/\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b       \n    function render(data){\n        \/\/\u30b5\u30fc\u30af\u30eb\u3001\u770c\u540d\u30e9\u30d9\u30eb\u3001\u767a\u751f\u6570\u30e9\u30d9\u30eb\u3092\u307e\u3068\u3081\u308b\u89aa\u8981\u7d20\u3068\u3057\u3066group\u8981\u7d20\u3092\u30bb\u30ec\u30af\u30c8\u3059\u308b\n        var updateGroup = stage.selectAll(\".group\").data(data, function(d){ return d['\u90fd\u9053\u5e9c\u770c\u540d']});\n        \n        var enterGroup = updateGroup.enter().append(\"g\").attr(\"class\", \"group\")\n            .attr(\"transform\", \"translate(\"+[w\/2-(radius\/2), (radius*5)\/2]+\")\") \/\/\u65b0\u898f\u8ffd\u52a0\u6642\u306e\u521d\u671f\u4f4d\u7f6e\u3092\u30b9\u30c6\u30fc\u30b8\u306e\u4e2d\u5fc3\u306b\u3059\u308b\n        \n        \/\/\u30b5\u30fc\u30af\u30eb\u3092\u30b0\u30eb\u30fc\u30d7\u306e\u76f4\u4e0b\u306b\u8ffd\u52a0\n        enterGroup.append(\"circle\")\n            .attr('opacity',0.6)\n            .attr('fill', 'red')\n            .attr('r', function(d){ return rScale(d['\u6307\u6a19\u5024(\u5358\u4f4d:\u4eba\/10\u4e07\u4eba)']) })\n        \n        \/\/\u770c\u540d\u30e9\u30d9\u30eb\u3092\u30b0\u30eb\u30fc\u30d7\u76f4\u4e0b\u306b\u8ffd\u52a0\n        enterGroup.append('text')\n            .attr(\"fill\", \"black\")\n            .attr(\"y\", \"-0.5em\")\n            .text(function(d){ return d['\u90fd\u9053\u5e9c\u770c\u540d'] })\n        \n        \/\/\u767a\u751f\u6570\u30e9\u30d9\u30eb\u3092\u30b0\u30eb\u30fc\u30d7\u76f4\u4e0b\u306b\u8ffd\u52a0\n        enterGroup.append('text')\n            .attr(\"fill\", \"black\")\n            .attr(\"y\", \"0.5em\")\n            .text(function(d){ return ~~(d['\u6307\u6a19\u5024(\u5358\u4f4d:\u4eba\/10\u4e07\u4eba)']\/10000) + \"\u4e07\u4eba\" })\n            \n        \n        \/\/\u65e2\u5b58\u30a8\u30ec\u30e1\u30f3\u30c8\u3068\u8ffd\u52a0\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u4f4d\u7f6e\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\n        updateGroup.merge(enterGroup)\n            .attr(\"fill\", \"red\")\n            .transition() \/\/\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u958b\u59cb\n            .duration(1000) \/\/1000ms\u304b\u3051\u3066\u79fb\u52d5\u3059\u308b\n            .attr(\"transform\", function(d, i){\n                var x =  (i % 10) * radius;\n                var y = ~~(i \/ 10) * radius;\n\n                return \"translate(\"+[x,y]+\")\";\n            });\n             \n    }\n    \n    \n    \/\/\u30bd\u30fc\u30c8\u3092\u5207\u308a\u66ff\u3048\u308b\n    function SortToggle(){\n        var sortNext = 0;\n        return function (data){\n            switch(sortNext){\n                case 0:\n                    data.sort(function(a,b){return a['\u5730\u65b9\u81ea\u6cbb\u4f53\u30b3\u30fc\u30c9'] - b['\u5730\u65b9\u81ea\u6cbb\u4f53\u30b3\u30fc\u30c9'] });\n                    break;\n                case 1:\n                    data.sort(function(a,b){return a['\u6307\u6a19\u5024(\u5358\u4f4d:\u4eba\/10\u4e07\u4eba)'] - b['\u6307\u6a19\u5024(\u5358\u4f4d:\u4eba\/10\u4e07\u4eba)']});\n                    break;\n                \n            }\n            sortNext++;\n            if(sortNext > 1) sortNext = 0;\n            return data;\n        }\n\n    }\n           \n    <\/pre>\n<p>d3.tsv\u3067tsv\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3068\uff11\u884c\u76ee\u3092\u30ad\u30fc\u3068\u3057\u305f\u9023\u60f3\u914d\u5217\u304c\u8fd4\u3063\u3066\u304d\u307e\u3059\u3002\u3042\u3068\u306f\u305d\u308c\u3092\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u3068\u3057\u3066\u4f7f\u7528\u3059\u308b\u3060\u3051\u3002\u7c21\u5358\uff01<\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/csv\/\">example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3068\u308a\u3042\u3048\u305a\u3001\u8272\u3005\u3084\u3063\u3066\u307f\u3066\u899a\u3048\u3088\u3046\uff01\u3063\u3066\u3053\u3068\u3067\u3002 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":2452,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[],"class_list":["post-2451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3v4","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2451","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=2451"}],"version-history":[{"count":11,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2451\/revisions"}],"predecessor-version":[{"id":5830,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2451\/revisions\/5830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2452"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}