yoon-gu/.block

## .block
license: gpl-3.0
height: 700

## README.md

      
    Raw
  

              README.md
            
          
    This example demonstrates subway station locastions in Seoul.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  stroke-linejoin: round;
}

.land {
  fill: #ddd;
}

.states {
  fill: none;
  stroke: #fff;
}

circle.no_l_1{ fill: #1B2876; }
circle.no_l_2{ fill: #34A939; }
circle.no_l_3{ fill: #FD5C09; }
circle.no_l_4{ fill: #268BD5; }
circle.no_l_5{ fill: #7411D9; }
circle.no_l_6{ fill: #9E3B0B; }
circle.no_l_7{ fill: #566112; }
circle.no_l_8{ fill: #DB005B; }

svg .municipality-label {
  fill: #808080;
  font-size: 12px;
  font-weight: 300;
  text-anchor: middle;
  font-family: sans-serif;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 700;

var projection = d3.geo.mercator()
    .center([126.9895, 37.5651])
    .scale(100000)
    .translate([width/2, height/2]);

var path = d3.geo.path().projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "/yoon-gu/raw/b051fd123385303a5c03f0e0a833516c/seoul_municipalities_topo.json")
    .defer(d3.csv, "/yoon-gu/raw/902efb6d5bd345e3837e035a3c0642b8/station_latlen.csv")
    .await(ready);

function ready(error, kor, stations) {
  if (error) throw error;

  svg.append("path")
      .datum(topojson.feature(kor, kor.objects.seoul_municipalities_geo))
      .attr("class", "land")
      .attr("d", path);

  svg.append("path")
      .datum(topojson.mesh(kor, kor.objects.seoul_municipalities_geo, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);

  svg.selectAll("circle")
      .data(stations)
    .enter().append("circle")
      .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
      .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
      .attr("r", 3)
      .attr("opacity", 0.7)
      .attr("class", function(d){ return "no_l_" + d.no_line; })
      .append("title").text(function(d) {return d.name});

  var features = topojson.feature(kor, kor.objects.seoul_municipalities_geo).features;
  svg.selectAll('text')
      .data(features)
      .enter().append("text")
        .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .attr("class", "municipality-label")
        .text(function(d) { return d.properties.name; })
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	stroke-linejoin: round;
	}

	.land {
	fill: #ddd;
	}

	.states {
	fill: none;
	stroke: #fff;
	}

	circle.no_l_1{ fill: #1B2876; }
	circle.no_l_2{ fill: #34A939; }
	circle.no_l_3{ fill: #FD5C09; }
	circle.no_l_4{ fill: #268BD5; }
	circle.no_l_5{ fill: #7411D9; }
	circle.no_l_6{ fill: #9E3B0B; }
	circle.no_l_7{ fill: #566112; }
	circle.no_l_8{ fill: #DB005B; }

	svg .municipality-label {
	fill: #808080;
	font-size: 12px;
	font-weight: 300;
	text-anchor: middle;
	font-family: sans-serif;
	}
	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 700;

	var projection = d3.geo.mercator()
	.center([126.9895, 37.5651])
	.scale(100000)
	.translate([width/2, height/2]);

	var path = d3.geo.path().projection(projection);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	queue()
	.defer(d3.json, "/yoon-gu/raw/b051fd123385303a5c03f0e0a833516c/seoul_municipalities_topo.json")
	.defer(d3.csv, "/yoon-gu/raw/902efb6d5bd345e3837e035a3c0642b8/station_latlen.csv")
	.await(ready);

	function ready(error, kor, stations) {
	if (error) throw error;

	svg.append("path")
	.datum(topojson.feature(kor, kor.objects.seoul_municipalities_geo))
	.attr("class", "land")
	.attr("d", path);

	svg.append("path")
	.datum(topojson.mesh(kor, kor.objects.seoul_municipalities_geo, function(a, b) { return a !== b; }))
	.attr("class", "states")
	.attr("d", path);

	svg.selectAll("circle")
	.data(stations)
	.enter().append("circle")
	.attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
	.attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
	.attr("r", 3)
	.attr("opacity", 0.7)
	.attr("class", function(d){ return "no_l_" + d.no_line; })
	.append("title").text(function(d) {return d.name});

	var features = topojson.feature(kor, kor.objects.seoul_municipalities_geo).features;
	svg.selectAll('text')
	.data(features)
	.enter().append("text")
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.attr("class", "municipality-label")
	.text(function(d) { return d.properties.name; })
	}

	</script>