yoon-gu/.block

## .block
license: mit
height: 555

## flu_2013.csv

          
            year
            disease
            region
            value

            
              2013
              인플루엔자
              종로구
              22951

            
              2013
              인플루엔자
              중구
              21796

            
              2013
              인플루엔자
              용산구
              39763

            
              2013
              인플루엔자
              성동구
              51400

            
              2013
              인플루엔자
              광진구
              56739

            
              2013
              인플루엔자
              동대문구
              57341

            
              2013
              인플루엔자
              중랑구
              69431

            
              2013
              인플루엔자
              성북구
              73113

            
              2013
              인플루엔자
              강북구
              48340

            
              2013
              인플루엔자
              도봉구
              58227

            
              2013
              인플루엔자
              노원구
              89091

            
              2013
              인플루엔자
              은평구
              76341

            
              2013
              인플루엔자
              서대문구
              50521

            
              2013
              인플루엔자
              마포구
              63947

            
              2013
              인플루엔자
              양천구
              71324

            
              2013
              인플루엔자
              강서구
              74338

            
              2013
              인플루엔자
              구로구
              66294

            
              2013
              인플루엔자
              금천구
              35342

            
              2013
              인플루엔자
              영등포구
              65349

            
              2013
              인플루엔자
              동작구
              68258

            
              2013
              인플루엔자
              관악구
              71624

            
              2013
              인플루엔자
              서초구
              64006

            
              2013
              인플루엔자
              강남구
              71429

            
              2013
              인플루엔자
              송파구
              87467

            
              2013
              인플루엔자
              강동구
              66911

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg { background-color: #1A1A1A; }

.vacc {
  fill:gray;
}
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

path {
  fill:none;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width:.5px;
}

.municipality-label{
  fill: white;
  font-size: 12px;
  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 = 555;
var fill = d3.scale.linear()
    .domain([250000, 680000])
    .range(["steelblue", "brown"]);
var projection = d3.geo.mercator()
    .center([126.9895, 37.5651])
    .scale(90000)
    .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);

var popByName = d3.map();
var fluByName = d3.map();

var rscale = d3.scale.linear()
    .domain([20000,90000])
    .range([10,50]);

var tooltip = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden")
  .style("font-family", "sans-serif")
  .style("color", "white")
  .style("font-size", "12px");

queue()
  .defer(d3.json, "https://gist.githubusercontent.com/yoon-gu/b051fd123385303a5c03f0e0a833516c/raw/9fff4a65830be008709112c190c3ed939d42e994/seoul_municipalities_topo.json")
  .defer(d3.csv, "popul_data.csv", function(d) {
      popByName.set(d.name, +d.population);
  })
  .defer(d3.csv, "flu_2013.csv", function(d) {
      fluByName.set(d.region, +d.value);
  })
  .await(ready);

function ready(error, seoul, popul)
{
  if (error) throw error;
  var features = topojson.feature(seoul, seoul.objects.seoul_municipalities_geo).features;

  features.forEach(function(d) {
      d.properties.population = popByName.get(d.properties.name);
      d.properties.flu = fluByName.get(d.properties.name);
      d.properties.percent = d.properties.flu / d.properties.population * 100;
    });

  svg.append("g")
    .selectAll("path")
      .data(features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { return fill(d.properties.population); })
      .on("mouseover", function(d){
        tooltip.style("visibility", "visible")
        .text("인구 : " + (d.properties.population / 10000).toFixed(2) + "만명");
      })
      .on("mousemove", function(){
        tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
      })
      .on("mouseout", function(){
        tooltip.style("visibility", "hidden");
      });

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

  svg.append("g").selectAll("circle")
    .data(features)
    .enter().append("circle")
      .attr("class", "vacc")
      .attr("cx", function(d) { return path.centroid(d)[0]; })
      .attr("cy", function(d) { return path.centroid(d)[1]; })
      .attr("r", function(d) { return rscale(d.properties.flu);})
      .attr("opacity", 0.7)
      .on("mouseover", function(d){
        tooltip.style("visibility", "visible")
        .html("백신접종 인원 : " + (d.properties.flu / 10000).toFixed(2) + "만명 <br> 백신 비율 : " + (d.properties.percent).toFixed(2) + "%");
      })
      .on("mousemove", function(){
        tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
      })
      .on("mouseout", function(){
        tooltip.style("visibility", "hidden");
      });

  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>

## popul_data.csv

          
            name
            population

            
              종로구
              160070

            
              중구
              130465

            
              용산구
              239740

            
              성동구
              299337

            
              광진구
              368927

            
              동대문구
              364273

            
              중랑구
              416798

            
              성북구
              476589

            
              강북구
              338707

            
              도봉구
              358582

            
              노원구
              590479

            
              은평구
              503660

            
              서대문구
              314110

            
              마포구
              381856

            
              양천구
              492528

            
              강서구
              569070

            
              구로구
              424964

            
              금천구
              241020

            
              영등포구
              386471

            
              동작구
              410815

            
              관악구
              518028

            
              서초구
              441763

            
              강남구
              563599

            
              송파구
              668415

            
              강동구
              483379
year	disease	region	value
2013	인플루엔자	종로구	22951
2013	인플루엔자	중구	21796
2013	인플루엔자	용산구	39763
2013	인플루엔자	성동구	51400
2013	인플루엔자	광진구	56739
2013	인플루엔자	동대문구	57341
2013	인플루엔자	중랑구	69431
2013	인플루엔자	성북구	73113
2013	인플루엔자	강북구	48340
2013	인플루엔자	도봉구	58227
2013	인플루엔자	노원구	89091
2013	인플루엔자	은평구	76341
2013	인플루엔자	서대문구	50521
2013	인플루엔자	마포구	63947
2013	인플루엔자	양천구	71324
2013	인플루엔자	강서구	74338
2013	인플루엔자	구로구	66294
2013	인플루엔자	금천구	35342
2013	인플루엔자	영등포구	65349
2013	인플루엔자	동작구	68258
2013	인플루엔자	관악구	71624
2013	인플루엔자	서초구	64006
2013	인플루엔자	강남구	71429
2013	인플루엔자	송파구	87467
2013	인플루엔자	강동구	66911
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	svg { background-color: #1A1A1A; }

	.vacc {
	fill:gray;
	}
	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	path {
	fill:none;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width:.5px;
	}

	.municipality-label{
	fill: white;
	font-size: 12px;
	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 = 555;
	var fill = d3.scale.linear()
	.domain([250000, 680000])
	.range(["steelblue", "brown"]);
	var projection = d3.geo.mercator()
	.center([126.9895, 37.5651])
	.scale(90000)
	.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);

	var popByName = d3.map();
	var fluByName = d3.map();

	var rscale = d3.scale.linear()
	.domain([20000,90000])
	.range([10,50]);

	var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.style("font-family", "sans-serif")
	.style("color", "white")
	.style("font-size", "12px");

	queue()
	.defer(d3.json, "https://gist.githubusercontent.com/yoon-gu/b051fd123385303a5c03f0e0a833516c/raw/9fff4a65830be008709112c190c3ed939d42e994/seoul_municipalities_topo.json")
	.defer(d3.csv, "popul_data.csv", function(d) {
	popByName.set(d.name, +d.population);
	})
	.defer(d3.csv, "flu_2013.csv", function(d) {
	fluByName.set(d.region, +d.value);
	})
	.await(ready);

	function ready(error, seoul, popul)
	{
	if (error) throw error;
	var features = topojson.feature(seoul, seoul.objects.seoul_municipalities_geo).features;

	features.forEach(function(d) {
	d.properties.population = popByName.get(d.properties.name);
	d.properties.flu = fluByName.get(d.properties.name);
	d.properties.percent = d.properties.flu / d.properties.population * 100;
	});

	svg.append("g")
	.selectAll("path")
	.data(features)
	.enter().append("path")
	.attr("d", path)
	.style("fill", function(d) { return fill(d.properties.population); })
	.on("mouseover", function(d){
	tooltip.style("visibility", "visible")
	.text("인구 : " + (d.properties.population / 10000).toFixed(2) + "만명");
	})
	.on("mousemove", function(){
	tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
	})
	.on("mouseout", function(){
	tooltip.style("visibility", "hidden");
	});

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

	svg.append("g").selectAll("circle")
	.data(features)
	.enter().append("circle")
	.attr("class", "vacc")
	.attr("cx", function(d) { return path.centroid(d)[0]; })
	.attr("cy", function(d) { return path.centroid(d)[1]; })
	.attr("r", function(d) { return rscale(d.properties.flu);})
	.attr("opacity", 0.7)
	.on("mouseover", function(d){
	tooltip.style("visibility", "visible")
	.html("백신접종 인원 : " + (d.properties.flu / 10000).toFixed(2) + "만명 <br> 백신 비율 : " + (d.properties.percent).toFixed(2) + "%");
	})
	.on("mousemove", function(){
	tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
	})
	.on("mouseout", function(){
	tooltip.style("visibility", "hidden");
	});

	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>
	name	population
	종로구	160070
	중구	130465
	용산구	239740
	성동구	299337
	광진구	368927
	동대문구	364273
	중랑구	416798
	성북구	476589
	강북구	338707
	도봉구	358582
	노원구	590479
	은평구	503660
	서대문구	314110
	마포구	381856
	양천구	492528
	강서구	569070
	구로구	424964
	금천구	241020
	영등포구	386471
	동작구	410815
	관악구	518028
	서초구	441763
	강남구	563599
	송파구	668415
	강동구	483379