site/london-borough-population-now.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
      font-family: sans-serif;
    }

    p{
      max-width:600px;
    }

    .subtitle{
      font-style:italic;
      color:#666;
    }

    .borough-label{
      fill: #111;
    }

    .ls-background{
      fill:#DDD;
    }
  </style>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- <script src="../dist/index.js"></script> -->
  <script src="https://unpkg.com/@aftertheflood/londonsquared@0.2.1/dist/index.js"></script>
</head>
<body>
<h1>London population by borough</h1>
<p class="subtitle">GLA Population Estimate 2015 (thousands)</p>
<p>This example illustrates how you might use the After the Flood <a href="https://github.com/aftertheflood/londonsquared">London Squared</a> module for D3 to visualise a single variable accross all London boroughs.</p>
<div class="vizualisation-container"></div>
</body>
<script>
window.onload = ()=>{
  const width = 600;
  const height = 525;

  const svg = d3.select('.vizualisation-container')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  d3.csv('data/london-borough-profiles.csv')
    .then((data)=>{
      const LS = atf.londonSquared({gridGapProportion:0.05})
        .data(data, d=>d.Code) //the second argument is an accessor for the local authority code associated with the data row. by default this is d=>d.code
        .width(width)
        .height(height);

      svg.call(LS); // draw the cartogram shapes
      
      const circleScale = d3.scalePow()
        .domain([0, d3.max(data, d => Number(d['GLA Population Estimate 2015']))])
        .range([0, LS.blockSize()/2])

      console.log(circleScale.domain(), circleScale.range());
      
      LS.masked()
        .call(function(parent){
          parent.append('circle')
            .attr('r', d => {
              console.log(d); 
              return circleScale(d.data['GLA Population Estimate 2015'])
            })
            .attr('cx', LS.centroid()[0])
            .attr('cy', LS.centroid()[1])
            .attr('fill', '#f00');
        });
      
      LS.foreground()
        .call(function(parent){
          parent.append('text')
            .attr('class', 'borough-label')
            .attr('x', 5)
            .attr('y', 15)
            .text(d => d.LSAbbreviation);
          
          parent.append('text')
            .attr('class', 'borough-label')
            .attr('x', 5)
            .attr('y', LS.blockSize()-5)
            .text(d => `${d.data['GLA Population Estimate 2015']/1000}k`);
        })
    })
    .catch(err=>{
      console.log(err);
    })
}
</script>
</html>