Skip to content

Instantly share code, notes, and snippets.

@osoken

osoken/index.html

Last active February 6, 2016 10:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save osoken/92fefc35273ff9855947 to your computer and use it in GitHub Desktop.
Save osoken/92fefc35273ff9855947 to your computer and use it in GitHub Desktop.
Download ZIP
Yamanote direction signs
Raw
readme.md
Raw
index.html
<!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>
Raw
yamanote_stations.json
{"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