West Oakland Census

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>West Oakland population data</title>
        <meta name="description" content="A breakdown of the neighborhood's population by race and ethnicity.">
        <link rel="stylesheet" href="wocensus.css">
          <script src="https://d3js.org/d3.v3.min.js"></script>
        
         
           
    </head>
    <body>
      <script>
          var dataset= [12578, 4886,  3236, 2541, 1495];
           
           var w=960;
           var h=500;
           var barPadding = 1;
           var svg = d3.select("body")
                        .append("svg")
                         .attr("width", w)
                         .attr("height", h);
           
           svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("class", "gbar")
           .attr("y", function(d, i) {
              return i * (h/dataset.length);
               
             //  return i * 21;
                 })
          .attr ("x", function(d) {
            //width minus data value (moved)     
           })
          .attr("height", h/dataset.length - barPadding)
           .attr("width", 5)
           .attr("fill", "navy");
           
             svg.selectAll("rect")
           .transition()
           .duration(1000)
           .attr("width", function(d) {
            // return d;
             return d/48;
           } );
         
        svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
            return d;   
           })
           .attr("y", function(d, i) {
              return (i * (h/dataset.length)) + 95; 
                 })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "navy");
        
        </script>
  
     <P>The bar graph shows West Oakland population by race. In order of size, the bars represent these groups: African-American, white, Asian, other, and two or more races.</P>
    </body>
</html>

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

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