Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (81 sloc) 2.55 KB
<!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>
You can’t perform that action at this time.