{"id":2797,"date":"2013-05-04T15:46:05","date_gmt":"2013-05-04T06:46:05","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2797"},"modified":"2017-02-01T11:06:08","modified_gmt":"2017-02-01T02:06:08","slug":"post-2797","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2797","title":{"rendered":"\u3010D3.js\u3011\u30b0\u30e9\u30d5\u3068\u5730\u56f3\u3092\u9023\u52d5\u3055\u305b\u308b"},"content":{"rendered":"

\u6563\u5e03\u56f3\u4e0a\u3067\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u3068\u3001\u9078\u629e\u3057\u305f\u7bc4\u56f2\u306e\u90fd\u9053\u5e9c\u770c\u306b\u8272\u304c\u4ed8\u304d\u307e\u3059\u3002
\n\"jpanmap20140221\"<\/a><\/p>\n

d3.svg.brush<\/a>\u3092\u4f7f\u3063\u3066\u3001\u6563\u5e03\u56f3\u3068\u5730\u56f3\u3092\u9023\u52d5\u3055\u305b\u308b\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n

example<\/a><\/p>\n

\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306e\u4f5c\u6210<\/h2>\n

\u6709\u52b9\u6c42\u4eba\u500d\u7387\u3068\u5145\u8db3\u7387\u306e\u60c5\u5831\u306f\u300c\u793e\u4f1a\u751f\u6d3b\u7d71\u8a08\u6307\u6a19<\/a>\u300d\u3088\u308a\u3002
\n\u90fd\u9053\u5e9c\u770c\u306e\u5730\u56f3\u30c7\u30fc\u30bf\u306f\u4ee5\u4e0b\u3088\u308a\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002
\n\u90fd\u9053\u5e9c\u770c\u8272\u5857\u308a\u7528shape\u30d5\u30a1\u30a4\u30eb\uff08\u82f1\u8a9e\u8868\u8a18\uff09<\/a><\/p>\n

\u793e\u4f1a\u751f\u6d3b\u7d71\u8a08\u6307\u6a19\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u300c\u52b4\u50cd\u300d\u7d71\u8a08\u8868\u3092Excel\u4e0a\u3067\u7de8\u96c6\u3057\u3066csv\u306b\u3002
\n\u4f5c\u6210\u3057\u305fcsv\u3068\u90fd\u9053\u5e9c\u770c\u8272\u5857\u308a\u7528shape\u30d5\u30a1\u30a4\u30eb\u3092Quantum GIS<\/a>\u306b\u8aad\u307f\u8fbc\u307f\u7d50\u5408\u3002(\u7d50\u5408\u306e\u65b9\u6cd5\u306f\u4ee5\u4e0b\u3092)
\n\u5c5e\u6027\u30c7\u30fc\u30bf\u306bCSV\u307e\u305f\u306fDBF\u30d5\u30a1\u30a4\u30eb\u3092\u7d50\u5408\u3057\u305f\u3044<\/a><\/p>\n

\u7d50\u5408\u3057\u305f\u30c7\u30fc\u30bf\u3092geojson\u3067\u51fa\u529b\u3057\u3001\u3055\u3089\u306btopojson\u306b\u5909\u63db\u3057\u307e\u3059\u3002
\ntopojson\u3078\u306e\u5909\u63db\u306f\u300cTopoJSON\u3092\u4f7f\u3046<\/a>\u300d\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\n\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306f\u4ee5\u4e0b\u3002<\/p>\n

todofuken.topojson<\/span><\/p>\n

\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n
\r\nd3.json("todofuken.topojson", function(json) {\r\n  d3main(json);\r\n});\r\n\r\n\r\nfunction d3main(json){\r\n    var plotsize = 320;\u3000\/\/\u6563\u5e03\u56f3\u306e\u7e26\u6a2a\u30b5\u30a4\u30ba\r\n    var baseColor = "#fef4f4"; \/\/\u5730\u56f3\u3001circle\u306e\u30d9\u30fc\u30b9\u30ab\u30e9\u30fc\r\n  \r\n    \/\/\u5857\u308a\u5206\u3051\u30ab\u30e9\u30fc\u306e\u8a2d\u5b9a    \r\n    var colorList = ["#ce6dbd", "#f7b6d2", "#8ca252", "#ff7f0e", "#de9ed6", "#d62728", "#e377c2", "#e7ba52", "#2ca02c", "#e377c2", "#f7b6d2", "#c7c7c7", "#ffbb78", "#e7cb94", "#dbdb8d", "#8c564b", "#b5cf6b", "#843c39", "#7b4173", "#aec7e8", "#ffbb78", "#8c564b", "#bd9e39", "#dbdb8d", "#c5b0d5", "#7f7f7f", "#9edae5", "#c49c94", "#c49c94", "#393b79", "#9467bd", "#5254a3", "#a55194", "#637939", "#17becf", "#cedb9c", "#1f77b4", "#1f77b4", "#9467bd", "#ff9896", "#ff7f0e", "#9c9ede", "#ad494a", "#ff9896", "#98df8a", "#17becf", "#7f7f7f", "#bcbd22", "#98df8a", "#bcbd22", "#c5b0d5", "#2ca02c", "#8c6d31", "#aec7e8", "#6b6ecf", "#d6616b", "#e7969c", "#c7c7c7", "#d62728", "#9edae5"];\r\n\t\r\n\t\/\/\u30ab\u30e9\u30fc\u30b9\u30b1\u30fc\u30eb\r\n    var colorScale = d3.scale.ordinal().domain([1,47]).range(colorList); \r\n  \r\n    \/\/dataSet\u306e\u6e96\u5099\r\n    var geodata = topojson.object(json, json.objects.todofuken).geometries; \/\/topojosn\u30c7\u30fc\u30bf\r\n    \/\/var geodata = json.features; \/\/geojson\u3092\u4f7f\u3046\u5834\u5408\u306f\u3053\u3061\u3089\r\n\r\n    \/\/\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306e\u578b\u5909\u63db  \r\n    geodata.forEach(function(d) {\r\n        d.properties.jobs_ratio = parseFloat(d.properties.jobs_ratio);\r\n        d.properties.fullness_rate = parseFloat(d.properties.fullness_rate);\r\n    });\r\n  \r\n    \/\/\u6709\u52b9\u6c42\u4eba\u500d\u7387\u306e\u6700\u5927\u5024\u53d6\u5f97\r\n    var jobs_ratioMax = d3.max(geodata, function(d){\r\n        return d.properties.jobs_ratio;\r\n    });\r\n\r\n    \/\/\u5145\u8db3\u7387\u306e\u6700\u5927\u5024\u53d6\u5f97  \r\n    var fullness_rateMax = d3.max(geodata, function(d){\r\n        return d.properties.fullness_rate;\r\n    });\r\n\r\n    \/\/scale\u95a2\u6570(\u6b63\u898f\u5316)\u751f\u6210  \r\n    var xScale = d3.scale.linear().domain([0, fullness_rateMax+1]).range([0, plotsize]);\r\n    var yScale = d3.scale.linear().domain([jobs_ratioMax+0.05,  0]).range([0, plotsize]);\r\n  \r\n    \/\/axis\u95a2\u6570(\u76ee\u76db\u308a)\u306e\u751f\u6210    \r\n    var xAxis = d3.svg.axis().scale(xScale).orient('bottom');\r\n    var yAxis = d3.svg.axis().scale(yScale).orient('left');\r\n\r\n\r\n    \/\/\u5730\u56f3\u6295\u5f71\u6cd5\u8a2d\u5b9a  \r\n    var projection = d3.geo\r\n        .mercator()\t\t\/\/\u6295\u5f71\u6cd5\u306e\u6307\u5b9a\r\n        .scale(1500)\t\/\/\u30b9\u30b1\u30fc\u30eb\uff08\u30ba\u30fc\u30e0\uff09\u306e\u6307\u5b9a\r\n        .translate([600,350]) \/\/\u8868\u793a\u4f4d\u7f6e\u8abf\u6574 x,y\r\n        .center([139.0032936, 36.3219088]); \/\/\u4e2d\u5fc3\u306e\u5ea7\u6a19\u3092\u6307\u5b9a\r\n\r\n    \/\/geo\u30c7\u30fc\u30bf\u2192svg path\u5909\u63db\u95a2\u6570\u751f\u6210\r\n    var path = d3.geo.path().projection(projection);\r\n  \r\n    \/\/\u8868\u793a\u30b9\u30c6\u30fc\u30b8\r\n    var svg = d3.select("svg");\r\n\r\n    \/\/map\u3092\u4f5c\u6210\u3059\u308b\u30b0\u30eb\u30fc\u30d7\r\n    var mapGroup = svg.select('#map');\r\n  \r\n    \/\/map\u8868\u793a\r\n    var map = mapGroup.append("svg:g")\r\n        .selectAll("path")\r\n        .data(geodata)\r\n        .enter()\r\n        .append("svg:path")\r\n        .attr('class', function(d){ return d.properties.ObjName } )\r\n        .attr({\r\n          "d": function(d){ return path(d)},\r\n          "fill": baseColor,\r\n          "fill-opacity": 1,\r\n          "stroke": "black"\r\n        })\r\n        .on('mouseover', function(){\r\n            d3.selectAll( "."+d3.select(this).attr('class') ) \/\/\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3057\u305f\u30a8\u30ea\u30a2\u3068\u540c\u3058class\u540d\u306e\u8981\u7d20\u3092\u9078\u629e\r\n            .attr("fill", "red");\r\n        })\r\n        .on('mouseout', function(){\r\n            d3.selectAll( "."+d3.select(this).attr('class') )\r\n            .attr("fill", baseColor); \/\/\u30d0\u30b0\u3042\u308a\u3000\u3042\u3068\u3067\u76f4\u3059\r\n        });\r\n    \r\n    \r\n    \r\n    \/\/\u6563\u5e03\u56f3\u3092\u4f5c\u6210\u3059\u308b\u30b0\u30eb\u30fc\u30d7\r\n    var plotGroup = svg.select('#plot').attr("transform", "translate(" + [100, 10] + ")");\r\n\r\n        \r\n    \/*\r\n     *circle\u3088\u308a\u4e0b\u306e\u30ec\u30a4\u30e4\u30fc\u306bbrush\u3092\u8868\u793a\u3057\u305f\u3044\u306e\u3067\u5148\u306b\u4f5c\u6210\u3059\u308b\r\n     *circle\u306e\u4e0a\u306bbrush\u3092\u8868\u793a\u3059\u308b\u3068\u3001\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u304c\u53d6\u5f97\u3067\u304d\u306a\u304f\u306a\u308b\u305f\u3081\u3002\r\n     *\/\t \r\n    \/\/brash\u30a4\u30d9\u30f3\u30c8\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\r\n    var brushed = function() {\r\n        var select = brush.extent();\r\n        var rightBotom = select[0];\r\n        var leftTop = select[1];\r\n        circle.attr("fill", fillFnc);      \r\n        map.attr("fill",fillFnc);\r\n     \r\n        \/\/\u9078\u629e\u7bc4\u56f2\u5185\u3092\u8272\u5857\u308a \r\n        function fillFnc(d,i){\r\n            if(\r\n               d.properties.fullness_rate > rightBotom[0]\r\n               &&  d.properties.jobs_ratio > rightBotom[1]\r\n               && d.properties.fullness_rate < leftTop[0]\r\n               &&  d.properties.jobs_ratio < leftTop[1]\r\n               )  return colorScale(d.properties.jis);\r\n            return baseColor;\r\n        }\r\n    }\t \r\n\t \r\n    var brush = d3.svg.brush() \/\/brush\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\r\n        .x(xScale) \/\/x\u8ef8\u3092\u9078\u629e\u53ef\u80fd\u7bc4\u56f2\u306b\u6307\u5b9a\r\n        .y(yScale)\r\n        .on("brush", brushed);\r\n    \r\n    var brushFGroup = plotGroup.append("g") \/\/brush\u30b0\u30eb\u30fc\u30d7\u3092\u4f5c\u6210\r\n        .attr("class", "brush")\r\n        .call(brush) \/\/brush\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30b0\u30eb\u30fc\u30d7\u306b\u9069\u7528\r\n        .selectAll("rect")\r\n        \r\n\r\n\r\n        \r\n    \/\/circle\u3092\u4f5c\u6210\u3059\u308b\u30b0\u30eb\u30fc\u30d7\r\n    var circlegroup = plotGroup.append('g');\r\n    \r\n    \/\/circle\u8868\u793a\r\n    var circle = circlegroup.selectAll('circle')\r\n        .data(geodata)\r\n        .enter()\r\n        .append('circle')\r\n        .attr('class', function(d){ return "tipsy " + d.properties.ObjName } )\r\n        .attr({\r\n            r:5,\r\n            cx:function(d){ return  xScale( d.properties.fullness_rate )},\r\n            cy:function(d){ return yScale( d.properties.jobs_ratio )},\r\n            fill: baseColor\r\n        })\r\n     \r\n     \/\/\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b\u305f\u3081title\u8981\u7d20\u3092\u8ffd\u52a0 \r\n    var tooltip = circle.append('title').text(function(d){ return d.properties.pref});  \r\n\r\n    \r\n     \/\/x\u76ee\u76db\u8ef8\u8868\u793a\r\n    var xAxisLine = plotGroup.append("g") \r\n        .attr("class", "x axis")\r\n        .attr("transform", "translate(0," + plotsize + ")")\r\n        .call(xAxis);\r\n    \r\n    \/\/x\u76ee\u76db\u8ef8\u30bf\u30a4\u30c8\u30eb\u8868\u793a\r\n    var xAxisTitle = xAxisLine.append('text')\r\n        .attr({\r\n            y:40,\r\n            x:Math.floor(plotsize\/2)-30\r\n        })\r\n        .text('\u5145\u8db3\u7387\uff08\uff05\uff09')  \r\n    \r\n    \/\/y\u76ee\u76db\u8ef8\r\n    var yAxisLine = plotGroup.append("g") \r\n        .attr("class", "y axis")\r\n        .attr("transform", "translate(0," + 0 + ")")\r\n        .call(yAxis);\r\n    \r\n    \/\/y\u76ee\u76db\u8ef8\u30bf\u30a4\u30c8\u30eb\u8868\u793a\r\n    var yAxisTitle = yAxisLine.append('text')\r\n        .attr({\r\n            "transform":'rotate(-90 -60, 0) translate(-240)' \r\n        })\r\n        .text('\u6709\u52b9\u6c42\u4eba\u500d\u7387\uff08\uff05\uff09')           \r\n     \r\n\r\n \r\n}<\/pre>\n
example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6563\u5e03\u56f3\u4e0a\u3067\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u3068\u3001\u9078\u629e\u3057\u305f\u7bc4\u56f2\u306e\u90fd\u9053\u5e9c\u770c\u306b…<\/p>\n","protected":false},"author":1,"featured_media":2798,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-2797","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2797","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=2797"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2797\/revisions"}],"predecessor-version":[{"id":2815,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2797\/revisions\/2815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2798"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}