D3 Examples - Population Density of London Boroughs

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    
      body {
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
      }
​
      h1 {
        font-size: 24px;
        margin: 0;
      }
​
      p {
        font-size: 14px;
        margin: 10px 0 0 0;
      }
​
      svg {
        background-color: white;
      }
​
      circle:hover {
        fill: CornflowerBlue;
      }
      
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
​
​
​
​
</style>
</head>
  <body>
​
    <h1>Population Density of London Boroughs* </h1><p/>
​
Data in this dicircleory was downloaded from <a href="https://data.london.gov.uk/dataset/london-borough-profiles" target=_blank>data.london.gov.uk</a>on 21 March, 2015.<p/>
​
London Borough Profiles Data is licensed under the UK <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/2/" target=_blank>Open Government Licence (OGL)</a><p/>
​
<div id=chart>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
      var w = 800;
      var h = 400;
​
var padding = [ 20, 10, 50, 60 ];  //Top, right, bottom, left
​
var xScale = d3.scale.linear()
               .range([ padding[3], w - padding[1] - padding[3] ]);
               // .range([ 0, w - padding[1] - padding[3] ]);
      
var yScale = d3.scale.linear()
                .range([ padding[0], h - padding[2] ]);
​
var xAxis = d3.svg.axis()
              .scale(xScale)
              .ticks(8)
              .orient("bottom");
​
var yAxis = d3.svg.axis()
              .scale(yScale)
              .ticks(10)
              .orient("left");
​
var svg = d3.select("div")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
​
​
​
d3.csv("London-Borough-Profiles.csv", function(d) {
  d.sort(function(a, b) {
          return d3.descending(+a.pop, +b.pop);
        });
  svgbarChartIt(d);
  return {
    area: d.area,
    pop: d.pop,
    hec: d.hec
  };
​
});
                                            
​
function svgbarChartIt(d){
​
xScale.domain([ 
             d3.min(d, function(d) {return +d.pop;}),
            // 0,
             d3.max(d, function(d) {
              return +d.pop;
            })
             ]);
​
yScale.domain([ 
      d3.max(d, function(d) {
          return +d.hec;
        }) 
      ,
      d3.min(d, function(d) {
          return +d.hec;
        }) 
      ]  );
​
​
var circles = svg.selectAll("circle")
                .data(d)
                .enter()
                .append("circle");
​
    circles.attr("cx", function(d){
      return xScale(d.pop); //+ padding[3];
    })
          .attr("cy", 0)
          .attr("r", 1)
          .attr("fill", "steelblue")
          .append("title")
          .text(function(d) {
            return d.area + "'s population is " + d.pop + " and number of hectares is " + d.hec;
          });
​
    circles
      .sort(function(a,b){
          return d3.descending(+a.pop, +b.pop)
      })
      .transition()
      .delay(function(d,i){
          return i*50;
          }
        )
      .duration(2000)
    
       .attr("cy", function(d, i) {
            return yScale(d.hec);
          })
  .attr("r", 5)
​
​
​
    svg.append("g")
          .attr("class", "x axis")
         .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
          // .attr("transform", "translate("+ padding[3]+"," + (h - padding[2]) + ")")
          .call(xAxis);
​
    svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (padding[3] - 10) + ",0)")
          //.attr("transform", "translate(" + (padding[3] ) + ",0)")
          .call(yAxis);
};
​
</script>
  
  
<br/>
Note: exculdes City of London with 8000 residents and 290.4 hectares 
​
​
​
  </body>
</html>
    