D3 Examples - Bar graph : The number of CCTV cameras by region in Seoul, Korea

xxxxxxxxxx
 
<!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>The number of CCTV cameras by region in Seoul, Korea</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>
    