山手線の行き先表示に関するデイリーポータルZの記事 をデータとして用い、アークダイアグラムで可視化した例。
駅を mouseover で関連のデータのみを表示する。
Last active
February 6, 2016 10:10
-
-
Save osoken/92fefc35273ff9855947 to your computer and use it in GitHub Desktop.
Yamanote direction signs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <body> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| var radius = 170; | |
| var data={}; | |
| var svg = d3.select('body').append('svg').attr({width:width,height:height}); | |
| var arc = function(d) | |
| { | |
| return 'M'+d.start_point.x+','+d.start_point.y+' A'+d.radius+','+d.radius+' 0 1,1 '+d.end_point.x+','+d.end_point.y; | |
| } | |
| var hue_scale = d3.scale.linear().domain([0,2*Math.PI]).range([0,360]); | |
| unfocus = function() | |
| { | |
| d3.selectAll('.station').style('opacity',1.0); | |
| d3.selectAll('.link').style('opacity',0.5); | |
| } | |
| focus = function(node) | |
| { | |
| var target = node.name; | |
| d3.selectAll('.station').style('opacity',function(d){return (d.name===target)?1.0:0.2;}); | |
| d3.selectAll('.link').style('opacity',function(d){return (d.source===target || d.target===target)?0.6:0.1;}); | |
| } | |
| d3.json('yamanote_stations.json', function(err, dat) | |
| { | |
| data = dat; | |
| var id_angle = d3.scale.linear().range([0,2*Math.PI]).domain([0,data.nodes.length]); | |
| var name_node = {}; | |
| data.nodes.forEach(function(d) | |
| { | |
| d.angle = id_angle(d.id); | |
| d.coord = [radius*Math.cos(d.angle),radius*Math.sin(d.angle)]; | |
| d.color = d3.hsl(hue_scale(d.angle),0.8,0.65); | |
| name_node[d.name] = d; | |
| }); | |
| data.links.forEach(function(d) | |
| { | |
| d.start_point = {x:name_node[d.source].coord[0],y:name_node[d.source].coord[1]}; | |
| d.end_point = {x:name_node[d.target].coord[0],y:name_node[d.target].coord[1]}; | |
| d.radius = Math.sqrt( (d.end_point.x-d.start_point.x)*(d.end_point.x-d.start_point.x)+(d.end_point.y-d.start_point.y)*(d.end_point.y-d.start_point.y) )/2; | |
| d.color = name_node[d.source].color; | |
| }); | |
| var link_layer = svg.append('g').attr('id','link_layer').attr('transform','translate('+width/2+','+height/2+')'); | |
| var text_layer = svg.append('g').attr('id','text_layer').attr('transform','translate('+width/2+','+height/2+')'); | |
| var text_nodes = text_layer.selectAll('g').data(data.nodes).enter().append('g') | |
| .classed('station',1) | |
| .attr('transform', function(d){return 'translate(' + d.coord[0] + ',' + d.coord[1] + ')';}) | |
| .on('mouseover',focus) | |
| .on('mouseout',unfocus); | |
| text_nodes.append('circle') | |
| .attr({x:0,y:0,r:18}) | |
| .classed('station_node',1) | |
| .style('fill', function(d){return d.color;}) | |
| .style('stroke', 'none'); | |
| text_nodes.append('text') | |
| .style({'text-anchor':'middle','dominant-baseline':'middle','font-size':'10px',fill:'#FFF'}) | |
| .classed('station_label',1) | |
| .text(function(d){return d.name;}); | |
| link_layer.selectAll('.link').data(data.links).enter().append('path') | |
| .classed('link',1) | |
| .style({'stroke-width':2,'fill':'none',opacity:0.5}) | |
| .style('stroke',function(d){return d.color;}) | |
| .attr('d',function(d){return arc(d);}); | |
| }); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"nodes":[ | |
| {"id":0,"longitude":139.766709,"latitude":35.681247,"name":"東京"}, | |
| {"id":1,"longitude":139.763261,"latitude":35.675037,"name":"有楽町"}, | |
| {"id":2,"longitude":139.758462,"latitude":35.666298,"name":"新橋"}, | |
| {"id":3,"longitude":139.757126,"latitude":35.655408,"name":"浜松町"}, | |
| {"id":4,"longitude":139.747602,"latitude":35.645737,"name":"田町"}, | |
| {"id":5,"longitude":139.738535,"latitude":35.628135,"name":"品川"}, | |
| {"id":6,"longitude":139.728246,"latitude":35.61994,"name":"大崎"}, | |
| {"id":7,"longitude":139.723909,"latitude":35.625805,"name":"五反田"}, | |
| {"id":8,"longitude":139.715729,"latitude":35.633407,"name":"目黒"}, | |
| {"id":9,"longitude":139.710123,"latitude":35.646684,"name":"恵比寿"}, | |
| {"id":10,"longitude":139.701722,"latitude":35.658081,"name":"渋谷"}, | |
| {"id":11,"longitude":139.702715,"latitude":35.671319,"name":"原宿"}, | |
| {"id":12,"longitude":139.702208,"latitude":35.683794,"name":"代々木"}, | |
| {"id":13,"longitude":139.700643,"latitude":35.689873,"name":"新宿"}, | |
| {"id":14,"longitude":139.700254,"latitude":35.700929,"name":"新大久保"}, | |
| {"id":15,"longitude":139.703967,"latitude":35.71331,"name":"高田馬場"}, | |
| {"id":16,"longitude":139.706281,"latitude":35.720393,"name":"目白"}, | |
| {"id":17,"longitude":139.711085,"latitude":35.730275,"name":"池袋"}, | |
| {"id":18,"longitude":139.72794,"latitude":35.731786,"name":"大塚"}, | |
| {"id":19,"longitude":139.740353,"latitude":35.733722,"name":"巣鴨"}, | |
| {"id":20,"longitude":139.748403,"latitude":35.737025,"name":"駒込"}, | |
| {"id":21,"longitude":139.761575,"latitude":35.737474,"name":"田端"}, | |
| {"id":22,"longitude":139.766713,"latitude":35.732174,"name":"西日暮里"}, | |
| {"id":23,"longitude":139.770877,"latitude":35.72739,"name":"日暮里"}, | |
| {"id":24,"longitude":139.778032,"latitude":35.721453,"name":"鶯谷"}, | |
| {"id":25,"longitude":139.776714,"latitude":35.713701,"name":"上野"}, | |
| {"id":26,"longitude":139.774717,"latitude":35.707195,"name":"御徒町"}, | |
| {"id":27,"longitude":139.773144,"latitude":35.698305,"name":"秋葉原"}, | |
| {"id":28,"longitude":139.770879,"latitude":35.69177,"name":"神田"} | |
| ], | |
| "links": | |
| [ | |
| {"source":"東京","target":"品川"}, | |
| {"source":"東京","target":"渋谷"}, | |
| {"source":"有楽町","target":"品川"}, | |
| {"source":"有楽町","target":"目黒"}, | |
| {"source":"有楽町","target":"渋谷"}, | |
| {"source":"新橋","target":"品川"}, | |
| {"source":"新橋","target":"渋谷"}, | |
| {"source":"新橋","target":"新宿"}, | |
| {"source":"浜松町","target":"品川"}, | |
| {"source":"浜松町","target":"渋谷"}, | |
| {"source":"浜松町","target":"新宿"}, | |
| {"source":"田町","target":"渋谷"}, | |
| {"source":"田町","target":"新宿"}, | |
| {"source":"田町","target":"池袋"}, | |
| {"source":"品川","target":"渋谷"}, | |
| {"source":"品川","target":"新宿"}, | |
| {"source":"品川","target":"池袋"}, | |
| {"source":"大崎","target":"渋谷"}, | |
| {"source":"大崎","target":"新宿"}, | |
| {"source":"大崎","target":"池袋"}, | |
| {"source":"五反田","target":"渋谷"}, | |
| {"source":"五反田","target":"新宿"}, | |
| {"source":"五反田","target":"池袋"}, | |
| {"source":"目黒","target":"渋谷"}, | |
| {"source":"目黒","target":"新宿"}, | |
| {"source":"目黒","target":"池袋"}, | |
| {"source":"恵比寿","target":"渋谷"}, | |
| {"source":"恵比寿","target":"新宿"}, | |
| {"source":"恵比寿","target":"池袋"}, | |
| {"source":"渋谷","target":"新宿"}, | |
| {"source":"渋谷","target":"池袋"}, | |
| {"source":"渋谷","target":"上野"}, | |
| {"source":"原宿","target":"新宿"}, | |
| {"source":"原宿","target":"池袋"}, | |
| {"source":"原宿","target":"上野"}, | |
| {"source":"代々木","target":"新宿"}, | |
| {"source":"代々木","target":"池袋"}, | |
| {"source":"代々木","target":"上野"}, | |
| {"source":"新宿","target":"池袋"}, | |
| {"source":"新宿","target":"田端"}, | |
| {"source":"新宿","target":"上野"}, | |
| {"source":"新大久保","target":"池袋"}, | |
| {"source":"新大久保","target":"田端"}, | |
| {"source":"新大久保","target":"上野"}, | |
| {"source":"高田馬場","target":"池袋"}, | |
| {"source":"高田馬場","target":"田端"}, | |
| {"source":"高田馬場","target":"上野"}, | |
| {"source":"目白","target":"池袋"}, | |
| {"source":"目白","target":"上野"}, | |
| {"source":"目白","target":"東京"}, | |
| {"source":"池袋","target":"田端"}, | |
| {"source":"池袋","target":"上野"}, | |
| {"source":"池袋","target":"東京"}, | |
| {"source":"大塚","target":"田端"}, | |
| {"source":"大塚","target":"上野"}, | |
| {"source":"大塚","target":"東京"}, | |
| {"source":"巣鴨","target":"田端"}, | |
| {"source":"巣鴨","target":"上野"}, | |
| {"source":"巣鴨","target":"東京"}, | |
| {"source":"駒込","target":"田端"}, | |
| {"source":"駒込","target":"上野"}, | |
| {"source":"駒込","target":"東京"}, | |
| {"source":"田端","target":"上野"}, | |
| {"source":"田端","target":"東京"}, | |
| {"source":"田端","target":"品川"}, | |
| {"source":"西日暮里","target":"東京"}, | |
| {"source":"西日暮里","target":"品川"}, | |
| {"source":"西日暮里","target":"五反田"}, | |
| {"source":"日暮里","target":"上野"}, | |
| {"source":"日暮里","target":"東京"}, | |
| {"source":"日暮里","target":"品川"}, | |
| {"source":"日暮里","target":"目黒"}, | |
| {"source":"鶯谷","target":"東京"}, | |
| {"source":"鶯谷","target":"品川"}, | |
| {"source":"鶯谷","target":"目黒"}, | |
| {"source":"上野","target":"東京"}, | |
| {"source":"上野","target":"品川"}, | |
| {"source":"上野","target":"目黒"}, | |
| {"source":"御徒町","target":"秋葉原"}, | |
| {"source":"御徒町","target":"東京"}, | |
| {"source":"御徒町","target":"品川"}, | |
| {"source":"御徒町","target":"目黒"}, | |
| {"source":"秋葉原","target":"東京"}, | |
| {"source":"秋葉原","target":"目黒"}, | |
| {"source":"神田","target":"東京"}, | |
| {"source":"神田","target":"品川"}, | |
| {"source":"神田","target":"渋谷"}, | |
| {"source":"東京","target":"上野"}, | |
| {"source":"東京","target":"池袋"}, | |
| {"source":"神田","target":"上野"}, | |
| {"source":"神田","target":"田端"}, | |
| {"source":"神田","target":"巣鴨"}, | |
| {"source":"神田","target":"池袋"}, | |
| {"source":"秋葉原","target":"上野"}, | |
| {"source":"秋葉原","target":"池袋"}, | |
| {"source":"御徒町","target":"上野"}, | |
| {"source":"御徒町","target":"田端"}, | |
| {"source":"御徒町","target":"池袋"}, | |
| {"source":"上野","target":"田端"}, | |
| {"source":"上野","target":"池袋"}, | |
| {"source":"上野","target":"新宿"}, | |
| {"source":"鶯谷","target":"池袋"}, | |
| {"source":"鶯谷","target":"新宿"}, | |
| {"source":"鶯谷","target":"渋谷"}, | |
| {"source":"日暮里","target":"池袋"}, | |
| {"source":"日暮里","target":"新宿"}, | |
| {"source":"日暮里","target":"渋谷"}, | |
| {"source":"西日暮里","target":"田端"}, | |
| {"source":"西日暮里","target":"池袋"}, | |
| {"source":"西日暮里","target":"新宿"}, | |
| {"source":"田端","target":"巣鴨"}, | |
| {"source":"田端","target":"池袋"}, | |
| {"source":"田端","target":"新宿"}, | |
| {"source":"駒込","target":"池袋"}, | |
| {"source":"駒込","target":"新宿"}, | |
| {"source":"駒込","target":"渋谷"}, | |
| {"source":"巣鴨","target":"池袋"}, | |
| {"source":"巣鴨","target":"新宿"}, | |
| {"source":"巣鴨","target":"渋谷"}, | |
| {"source":"大塚","target":"池袋"}, | |
| {"source":"大塚","target":"新宿"}, | |
| {"source":"大塚","target":"渋谷"}, | |
| {"source":"池袋","target":"新宿"}, | |
| {"source":"池袋","target":"渋谷"}, | |
| {"source":"池袋","target":"品川"}, | |
| {"source":"目白","target":"新宿"}, | |
| {"source":"目白","target":"渋谷"}, | |
| {"source":"目白","target":"品川"}, | |
| {"source":"高田馬場","target":"新宿"}, | |
| {"source":"高田馬場","target":"渋谷"}, | |
| {"source":"高田馬場","target":"品川"}, | |
| {"source":"新大久保","target":"新宿"}, | |
| {"source":"新大久保","target":"渋谷"}, | |
| {"source":"新大久保","target":"品川"}, | |
| {"source":"新宿","target":"原宿"}, | |
| {"source":"新宿","target":"渋谷"}, | |
| {"source":"新宿","target":"品川"}, | |
| {"source":"代々木","target":"原宿"}, | |
| {"source":"代々木","target":"渋谷"}, | |
| {"source":"代々木","target":"品川"}, | |
| {"source":"原宿","target":"渋谷"}, | |
| {"source":"原宿","target":"品川"}, | |
| {"source":"原宿","target":"東京"}, | |
| {"source":"渋谷","target":"品川"}, | |
| {"source":"渋谷","target":"浜松町"}, | |
| {"source":"渋谷","target":"東京"}, | |
| {"source":"恵比寿","target":"目黒"}, | |
| {"source":"恵比寿","target":"品川"}, | |
| {"source":"恵比寿","target":"東京"}, | |
| {"source":"目黒","target":"品川"}, | |
| {"source":"目黒","target":"東京"}, | |
| {"source":"目黒","target":"上野"}, | |
| {"source":"五反田","target":"品川"}, | |
| {"source":"五反田","target":"東京"}, | |
| {"source":"大崎","target":"品川"}, | |
| {"source":"大崎","target":"東京"}, | |
| {"source":"大崎","target":"上野"}, | |
| {"source":"品川","target":"東京"}, | |
| {"source":"品川","target":"上野"}, | |
| {"source":"品川","target":"駒込"}, | |
| {"source":"田町","target":"東京"}, | |
| {"source":"田町","target":"上野"}, | |
| {"source":"田町","target":"池袋"}, | |
| {"source":"浜松町","target":"東京"}, | |
| {"source":"浜松町","target":"上野"}, | |
| {"source":"浜松町","target":"池袋"}, | |
| {"source":"新橋","target":"東京"}, | |
| {"source":"新橋","target":"上野"}, | |
| {"source":"新橋","target":"池袋"}, | |
| {"source":"有楽町","target":"東京"}, | |
| {"source":"有楽町","target":"上野"}, | |
| {"source":"有楽町","target":"池袋"} | |
| ]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment