서울시 구별 방범용 CCTV 현황

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
	<h1>서울시 구별 방범용 CCTV 현황</h1>
	<script type="text/javascript">
	d3.csv("data.csv", function(error, data) { 
	
	var svg = d3.select("body")
					.append("svg")
					.attr("width",1000)
					.attr("height",1000);

data.sort(function(a,b){
				return d3.descending(+a.value, +b.value);
			})

var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

rects.attr("x", 0)
					.attr("y", function(d, i) {
						return i * 25;
					})
					.attr("width", function(d) {
						return d.value/2;
					})
					.attr("height", 20)
					.attr("fill","#4DAAAB")

var texts = svg.selectAll("text")
				.data(data)
				.enter()
				.append("text");

texts.attr("x", function(d) {
					return d.value/2;
					})
					.attr("y", function(d, i) {
						return i * 25+15;
					})
					.attr("fill","#777777")
					.text(function(d) { return d.value;});

var labels = svg.selectAll(".label")
				.data(data)
				.enter()
				.append("text")
				.attr("class","label");

labels.attr("x", 10)
					.attr("y", function(d, i) {
						return i * 25+15;
					})
					.attr("fill","#ffffff")
					.text(function(d) { return d.Area;});
	});
	</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js