junkwhinger/index.html

## index.html
<!DOCTYPE html>
<html>
  <head><h1>알바몬 임금체불 사업주(서울) - 체불 금액 총액 기준</h1></head>
    <meta charset="utf-8">
    <style>
        body {
        font: 10px sans-serif;
        }
        svg circle {
          fill: orange;
          opacity: .5;
          stroke: white;
        }
        svg circle:hover {
          fill: red;
          stroke: #333;
        }
        svg text {
          pointer-events: none;
        }
        svg .municipality {
          fill: #efefef;
          stroke: #fff;
        }
        svg .municipality-label {
          fill: #bbb;
          font-size: 12px;
          font-weight: 300;
          text-anchor: middle;
        }
        svg #map text {
          color: #333;
          font-size: 10px;
          text-anchor: middle;
        }
        svg #places text {
          color: #777;
          font: 10px sans-serif;
          text-anchor: start;
        }
        #title {
            font-family: sans-serif;
        }
        #title p {
            font-size: 10pt;
        }

        div.tooltip {
            position: absolute;
            text-align: center;
            width: 150px;
            height: 20px;
            padding-top: 6px;
            font: 12px sans-serif;
            font-weight: bold;
            background: rgba(255,255,255,.8);
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
        }
    </style>

  <body>
    <div id="chart"></div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    var width = 800,
        height = 650;

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

    var map = svg.append("g").attr("id", "map"),
        places = svg.append("g").attr("id", "places");

    var color = d3.scale.linear().domain([0,100]).range(["green","red"]);

    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 div = d3.select("body").append("div")
          .attr("class", "tooltip")
          .style("opacity", 0);

    var csv_data;

    d3.csv("seoul.csv", function(error, data){

      data.forEach(function(d) {
        d.area = d.area;
        d.freq = +d.freq;
        d.amount = +d.amount;
        d.average = +d.average
      });

      csv_data = data

      color.domain(d3.extent(data, function(d) { return d.amount}))

      map.selectAll('path')
        .data(data)
        .style("fill", function(d,i){
          return color(d.amount)
        })
    });

    d3.json("simplemap.json", function(error, data) {
      var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
      map.selectAll('path')
          .data(features)
        .enter().append('path')
          .attr("class", "municipality")
          .attr('id', function(d) { console.log(); return 'municipality_' + d.properties.name })
          .attr('d', path)
          .style("fill", function(d,i) {
            area_name = d.properties.name
            for (i in csv_data) {
              csv_area = csv_data[i].area

              if (area_name == csv_area) {
                return color(csv_data[i].amount)
              }
            }
          })
          .on("mouseover", function(d,i) {
            area_name = d.properties.name
            var amount;
            for (i in csv_data) {
              csv_area = csv_data[i].area

              if (area_name == csv_area) {
                amount  = csv_data[i].amount
              }
            }


              div.transition()
                            .duration(200)
                            .style("opacity", .9);
                        div .html(area_name + ": 총 " + (1*amount).toLocaleString() + "원")
                            .style("left", (d3.event.pageX) + "px")
                            .style("top", (d3.event.pageY - 28) + "px");

          });

      map.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>
  </body>
</html>

## seoul.csv

          
            area
            freq
            amount
            average

            
              강남구
              51
              3404547921
              66755841

            
              서초구
              26
              1805857475
              69456056

            
              금천구
              16
              1173021475
              73313842

            
              구로구
              13
              1056856419
              81296647

            
              성동구
              9
              1198101831
              133122425

            
              송파구
              9
              669187455
              74354161

            
              영등포구
              8
              426145001
              53268125

            
              강서구
              6
              575282048
              95880341

            
              중구
              5
              333293753
              66658750

            
              마포구
              4
              193478025
              48369506

            
              동작구
              3
              192040404
              64013468

            
              종로구
              3
              255196747
              85065582

            
              양천구
              3
              208982914
              69660971

            
              서대문구
              2
              80415501
              40207750

            
              관악구
              2
              81071088
              40535544

            
              용산구
              2
              108713009
              54356504

            
              성북구
              2
              2130261053
              1065130526

            
              강동구
              1
              58807070
              58807070

            
              은평구
              1
              31365600
              31365600

            
              중랑구
              1
              45359690
              45359690

## simplemap.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              simplemap.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head><h1>알바몬 임금체불 사업주(서울) - 체불 금액 총액 기준</h1></head>
	<meta charset="utf-8">
	<style>
	body {
	font: 10px sans-serif;
	}
	svg circle {
	fill: orange;
	opacity: .5;
	stroke: white;
	}
	svg circle:hover {
	fill: red;
	stroke: #333;
	}
	svg text {
	pointer-events: none;
	}
	svg .municipality {
	fill: #efefef;
	stroke: #fff;
	}
	svg .municipality-label {
	fill: #bbb;
	font-size: 12px;
	font-weight: 300;
	text-anchor: middle;
	}
	svg #map text {
	color: #333;
	font-size: 10px;
	text-anchor: middle;
	}
	svg #places text {
	color: #777;
	font: 10px sans-serif;
	text-anchor: start;
	}
	#title {
	font-family: sans-serif;
	}
	#title p {
	font-size: 10pt;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 150px;
	height: 20px;
	padding-top: 6px;
	font: 12px sans-serif;
	font-weight: bold;
	background: rgba(255,255,255,.8);
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}
	</style>

	<body>
	<div id="chart"></div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>
	var width = 800,
	height = 650;

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

	var map = svg.append("g").attr("id", "map"),
	places = svg.append("g").attr("id", "places");

	var color = d3.scale.linear().domain([0,100]).range(["green","red"]);

	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 div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var csv_data;

	d3.csv("seoul.csv", function(error, data){

	data.forEach(function(d) {
	d.area = d.area;
	d.freq = +d.freq;
	d.amount = +d.amount;
	d.average = +d.average
	});

	csv_data = data

	color.domain(d3.extent(data, function(d) { return d.amount}))

	map.selectAll('path')
	.data(data)
	.style("fill", function(d,i){
	return color(d.amount)
	})
	});

	d3.json("simplemap.json", function(error, data) {
	var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
	map.selectAll('path')
	.data(features)
	.enter().append('path')
	.attr("class", "municipality")
	.attr('id', function(d) { console.log(); return 'municipality_' + d.properties.name })
	.attr('d', path)
	.style("fill", function(d,i) {
	area_name = d.properties.name
	for (i in csv_data) {
	csv_area = csv_data[i].area

	if (area_name == csv_area) {
	return color(csv_data[i].amount)
	}
	}
	})
	.on("mouseover", function(d,i) {
	area_name = d.properties.name
	var amount;
	for (i in csv_data) {
	csv_area = csv_data[i].area

	if (area_name == csv_area) {
	amount = csv_data[i].amount
	}
	}


	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .html(area_name + ": 총 " + (1*amount).toLocaleString() + "원")
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");

	});

	map.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>
	</body>
	</html>
area	freq	amount	average
강남구	51	3404547921	66755841
서초구	26	1805857475	69456056
금천구	16	1173021475	73313842
구로구	13	1056856419	81296647
성동구	9	1198101831	133122425
송파구	9	669187455	74354161
영등포구	8	426145001	53268125
강서구	6	575282048	95880341
중구	5	333293753	66658750
마포구	4	193478025	48369506
동작구	3	192040404	64013468
종로구	3	255196747	85065582
양천구	3	208982914	69660971
서대문구	2	80415501	40207750
관악구	2	81071088	40535544
용산구	2	108713009	54356504
성북구	2	2130261053	1065130526
강동구	1	58807070	58807070
은평구	1	31365600	31365600
중랑구	1	45359690	45359690