{"id":4272,"date":"2015-05-25T11:21:52","date_gmt":"2015-05-25T02:21:52","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=4272"},"modified":"2015-05-25T11:40:19","modified_gmt":"2015-05-25T02:40:19","slug":"post-4272","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/4272","title":{"rendered":"\u3010D3.js\u3011stereographic\u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3092\u4f7f\u3063\u3066\u5168\u5929\u7403\u8868\u793a"},"content":{"rendered":"<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example3\/stereographic\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/05\/stereographic150525.jpg\" alt=\"Past 7 Days - Earthquakes\" width=\"690\" height=\"359\" class=\"aligncenter size-full wp-image-4273\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/05\/stereographic150525.jpg 690w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/05\/stereographic150525-288x150.jpg 288w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example3\/stereographic\">example<\/a><\/p>\n<p>\u30a2\u30e1\u30ea\u30ab\u5730\u8cea\u8abf\u67fb\u6240(USGS)\u304c\u516c\u958b\u3057\u3066\u3044\u308b<a href=\"http:\/\/earthquake.usgs.gov\/earthquakes\/feed\/v1.0\/geojson.php\">\u904e\u53bb\uff17\u65e5\u9593\u306e\u5730\u9707\u30c7\u30fc\u30bf<\/a>\u3092\u5730\u56f3\u4e0a\u306b\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u5358\u7d14\u306b\u8868\u793a\u3059\u308b\u306e\u3082\u306a\u3093\u3060\u3063\u305f\u306e\u3067\u3001<a href=\"http:\/\/bl.ocks.org\/mbostock\/3757137\">d3.geo.stereographic<\/a>\u3092\u5229\u7528\u3057\u3066\u5168\u5929\u7403\u8868\u793a\u3068\u3044\u3046\u306e\u3092\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u30b0\u30ea\u30b0\u30ea\u52d5\u3044\u3066\u697d\u3057\u3044\u306e\u3067\u3059\u304c\u2026\u2026\u898b\u3084\u3059\u304f\u306f\u7121\u3044\u3067\u3059\u306d\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >d3.json('..\/..\/_geodata\/conuntries.geojson', function(data) {\t\r\n\td3.json('http:\/\/earthquake.usgs.gov\/earthquakes\/feed\/v1.0\/summary\/all_week.geojson', function(earthquakes){\r\n\t\tmain(data, earthquakes);\r\n\t});\r\n});\r\n\t\r\nfunction main(mapdata, earthquakes){\r\n\tvar div = d3.select('body').append('div').attr('id', 'stereographic');\r\n\r\n\tvar width = parseInt(div.style('width'), 10);\r\n\tvar height = parseInt(div.style('height'), 10);\r\n\r\n\tvar svg = div.append('svg')\r\n\t\t.attr('width', width)\r\n\t\t.attr('height', height);\r\n\r\n\t\/\/ \u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u306e\u56de\u8ee2\u89d2\u3092\u53ce\u7d0d\r\n\tvar rotate = {x: 0, y: 45};\r\n\r\n\t\/\/ \u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u8a2d\u5b9a(\u5168\u5929\u7403\u8868\u793a)\r\n\tvar projection = d3.geo.stereographic()\r\n\t\t.scale(4.5 * height \/ Math.PI)\r\n\t\t.translate([width \/ 2, height \/ 2])\r\n\t\t.clipAngle(120)\r\n\t\t.rotate([rotate.x, -rotate.y])\r\n\r\n\t\/\/ \u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u751f\u6210\r\n\tvar path = d3.geo.path().projection(projection);\r\n\t\t\r\n\t\r\n\t\/**********************************************************\r\n\t * \u30a2\u30a6\u30c8\u30e9\u30a4\u30f3(\u5916\u5468)\u3092\u8ffd\u52a0\r\n\t **********************************************************\/\r\n\tsvg.append('path').datum({type: 'Sphere'})\r\n\t\t.attr({\r\n\t\t\t'class': 'cellestial-globe',\r\n\t\t\t'd': path\r\n\t});\r\n\r\n\r\n\t\/**********************************************************\r\n\t * \u30b0\u30ea\u30c3\u30c9\u30e9\u30a4\u30f3\u3092\u8ffd\u52a0\r\n\t **********************************************************\/\r\n\tvar graticule = d3.geo.graticule();\r\n\r\n\tvar lines = svg.selectAll('path.graticule').data([graticule()])\r\n\t\t.enter().append('path')\r\n\t\t.attr({\r\n\t\t\t'class': 'graticule',\r\n\t\t\t'd': path,\r\n\t\t\t'stroke': 'gray'\r\n\t\t});\r\n\r\n\t\/**********************************************************\r\n\t * \u5730\u5f62\u3092\u8ffd\u52a0\r\n\t **********************************************************\/\r\n\tvar map = svg.selectAll('path.map').data(mapdata.features)\r\n\t\t.enter().append('path')\r\n\t\t.attr({\r\n\t\t\t'class': 'map',\r\n\t\t\t'd':path,\r\n\t\t\t'stroke': 'lime',\r\n\t\t\t'fill':'green',\r\n\t\t\t'fill-opacity':0.6\r\n\t\t})\r\n\r\n\t\/**********************************************************\r\n\t * \u9707\u5ea6\u30b5\u30fc\u30af\u30eb\u3092\u8ffd\u52a0\r\n\t **********************************************************\/\r\n\t\/\/\u9707\u5ea6\u30b9\u30b1\u30fc\u30eb\u8a2d\u5b9a\t\r\n\tvar earthquakesScale = d3.scale.sqrt().domain([0, 10]).rangeRound([0, 10])\r\n\t\t\r\n\t\/\/\u5730\u9707\u30b5\u30fc\u30af\u30eb\u8ffd\u52a0\t\r\n\tvar eqCircle = \tsvg.selectAll('circle.earthquake').data(earthquakes.features)\r\n\t\t.enter().append('circle')\r\n\t\t.attr({\r\n\t\t\t'class': 'earthquake',\r\n\t\t\t'r':function(d){return earthquakesScale(d.properties.mag) },\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.8\t\t\t\t\r\n\t\t});\r\n\t\t\r\n\t\/\/\u7def\u5ea6\u7d4c\u5ea6\u2192xy\u5ea7\u6a19\u5909\u63db\t\r\n\tearthquakes.features.forEach(function(d){\r\n\t\td.xy = projection(d.geometry.coordinates)\r\n\t});\r\n\t\r\n\teqCircle.attr({\r\n\t\t'cx': function(d){ return d.xy[0] },\r\n\t\t'cy': function(d){ return d.xy[1] }\t\t\t\r\n\t});\r\n\r\n\t\/**********************************************************\r\n\t * \u30c9\u30e9\u30c3\u30b0\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\r\n\t **********************************************************\/\r\n\t\t\t\r\n\t\/\/\u30c9\u30e9\u30c3\u30b0\u6642\u30d3\u30d8\u30a4\u30d3\u30a2\t\u8a2d\u5b9a\r\n\tvar dragBehavior = d3.behavior.drag()\r\n\t\t.origin(Object)\r\n\t\t.on('drag', drag);\r\n\r\n\t\/\/\u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u30a4\u30d9\u30f3\u30c8\u30ad\u30e3\u30c3\u30c1\u7528\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3092\u8ffd\u52a0\r\n\tvar overlay = svg.selectAll('rect').data([rotate])\r\n\t\t.enter().append('rect');\r\n\t\t\r\n\toverlay\r\n\t\t.attr('width', width)\r\n\t\t.attr('height', height)\r\n\t\t.attr('fill-opacity', 0);\r\n\t\t\r\n\toverlay.call(dragBehavior);\t\t\t\r\n\t\t\r\n\t\/\/\u30c9\u30e9\u30c3\u30b0\u6642\u51e6\u7406\t\r\n\tfunction drag(d) {\r\n\t\tprojection.rotate([(d.x = d3.event.x) \/ 2, -(d.y = d3.event.y) \/ 2]);\r\n\t\tlines.attr('d', path);\r\n\t\tmap.attr('d', path);\r\n\t\tearthquakes.features.forEach(function(d){\r\n\t\t\td.xy = projection(d.geometry.coordinates)\r\n\t\t});\r\n\t\teqCircle.attr({\r\n\t\t\t'cx': function(d){ return d.xy[0] },\r\n\t\t\t'cy': function(d){ return d.xy[1] }\t\t\t\r\n\t\t});\r\n\t}\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>example \u30a2\u30e1\u30ea\u30ab\u5730\u8cea\u8abf\u67fb\u6240(USGS)\u304c\u516c&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4273,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-4272","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\/4272","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=4272"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/4273"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=4272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=4272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=4272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}