D3 Examples - Number of San Francisco Businesses by Industry

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Number of San Francisco Businesses per Industry</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">
​
            //Width and height
            var w = 1200;
            var h = 400;
            var barPadding = 8;
            
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            
            d3.csv("SF_Business&IndustryWK3.csv",function(data) { 
​
            svg.selectAll("rect")
               .data(data)
               .enter()
               .append("rect")
               .attr("x", 0)
               .attr("y", function(d, i) {
                    return i * (h / data.length);
                })
               .attr("width", function(d) {
                    return d.Number / 6;
                })
               .attr("height", h / data.length - barPadding)
               .attr("fill", "orange");
            
            svg.selectAll("text")
               .data(data)
               .enter()
               .append("text")
               .text(function(d) {
                    return d.Industry + ": " + d.Number;
               })
               .attr("x", 0)
               .attr("y", function(d, i) {
                    return i * (h / data.length) + 10;
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "10px")
               .attr("fill", "black");
​
            });
            
        </script>
    </body>
</html>
    