ssongalice/data.csv

## data.csv

          
            Area
            value

            
              중구
              474

            
              종로구
              296

            
              서대문구
              836

            
              용산구
              1346

            
              성북구
              1037

            
              동대문구
              1040

            
              마포구
              375

            
              영등포구
              542

            
              성동구
              964

            
              동작구
              900

            
              광진구
              523

            
              강북구
              411

            
              금천구
              635

            
              중랑구
              552

            
              강남구
              1325

            
              관악구
              928

            
              강서구
              437

            
              강동구
              529

            
              구로구
              454

            
              서초구
              1407

            
              양천구
              1560

            
              송파구
              515

            
              노원구
              421

            
              은평구
              1125

            
              도봉구
              235

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://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>
	Area	value
	중구	474
	종로구	296
	서대문구	836
	용산구	1346
	성북구	1037
	동대문구	1040
	마포구	375
	영등포구	542
	성동구	964
	동작구	900
	광진구	523
	강북구	411
	금천구	635
	중랑구	552
	강남구	1325
	관악구	928
	강서구	437
	강동구	529
	구로구	454
	서초구	1407
	양천구	1560
	송파구	515
	노원구	421
	은평구	1125
	도봉구	235
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://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>