Last active
May 4, 2016 02:23
-
-
Save junkwhinger/8a7a56f88c3b29066256 to your computer and use it in GitHub Desktop.
알바몬 임금체불 사업주(서울) - 체불 금액 총액 기준
This file contains 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> | |
| <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> |
This file contains 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
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment