D3 Examples - West-Oakland population by race

xxxxxxxxxx
 
<!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 type="text/javascript" src="https://d3js.org/d3.v3.js">
        </script>
       
        
    </head>
    <body>
        
        <h1>West Oakland 2010 census totals</h1>
        
      <script>
          
          // var vert
           var w=960;
           var h=500;
           var mypadding = [10, 10, 50, 50];
          var size = 1;
          var dataset;
          var mywidthscale = d3.scale.linear()
          .range([0, w - mypadding[1] - mypadding[3] ]);
          
          var myheightscale = d3.scale.linear()
          .domain([4500, 0])
          .range([0, h]);
          
          var myscale = d3.scale.linear()
          .domain([0, 4500])
          .range([0, 855]);
             
          
           var svg = d3.select("body")
                        .append("svg")
                         .attr("width", w)
                         .attr("height", h);
   
           
          d3.csv("wocensus.csv", function (data) {
              
              svg.selectAll("circle")
           .data(data)
           .enter()
           .append("circle")
             .attr("cx", function (d) {
                 console.log("white = "+d.white)
                return myscale(d.white)+ mypadding[3];
                   })
           .attr("cy", function(d) {
               return myheightscale(d.africanamerican);
               
           })
          .attr("r", function (d) {
           size = Math.sqrt(d.totalpop/10)
              return size;
          })
           .attr("fill", "navy");
         
              
          //generate axis
          var axis = d3.svg.axis()
          .scale(myscale);
          
          svg.append("g") 
          .attr("class", "x axis")
         .attr("transform", "translate("+ 50 + ", "  + h + ")")
          .call(axis);
         // .orient("bottom");
​
          var Yaxis = d3.svg.axis()
          .scale(myheightscale)
          .orient("left");
        
          svg.append("g")
          .attr("class", "Yaxis")
          .attr("transform", "translate(" + (mypadding[3]-5) + ",0)")
          .call(Yaxis);
        
           });
</script>
  
     <P id="caption">The bar graph shows West Oakland population by race. Each bubble is one census tract. Size of the bubble reflects full population of the tract.Position on the Y axis reflects number of white residents; position along the X axis reflects the number of African-American residents. </P>
        
    </body>
</html>
    