Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
131 lines (114 sloc) 3.43 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;
}
.borough-label-outline{
stroke: #FFF;
stroke-width: 2px;
}
.ls-background{
fill:#eee;
}
.chart-line{
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@aftertheflood/londonsquared@0.1.1/dist/index.js"></script>
</head>
<body>
<h1>Historical London population by borough</h1>
<p class="subtitle">Census data 1801 &ndash; 2011</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 time series data 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/census-historic-population-borough.csv')
.then((data)=>{
// turn the data in to timeseries arrays
const boroughPopulationExtent = []
const processedData = data.map((row)=>{
const populationProperties = Object.keys(row).filter(key=>(key.indexOf('Persons-')>-1))
const population = populationProperties
.map((key)=>{
const value = Number(row[key]);
const date = new Date(Number(key.split('Persons-')[1]), 0, 1);
if(boroughPopulationExtent.length < 2){
boroughPopulationExtent[0] = value;
boroughPopulationExtent[1] = value;
}else{
boroughPopulationExtent[0] = Math.min(boroughPopulationExtent[0], value);
boroughPopulationExtent[1] = Math.max(boroughPopulationExtent[1], value);
}
return { date, value }
})
.sort((a,b)=>{
return (a.date.getTime() - b.date.getTime())
})
return {
code:row['Area Code'],
population
}
});
const LS = atf.londonSquared()
.data(processedData)
.width(width)
.height(height);
svg.call(LS); // draw the cartogram shapes
const valueScale = d3.scaleLinear()
.domain(boroughPopulationExtent)
.range([LS.blockSize(), 0]);
const timeScale = d3.scaleTime()
.domain([new Date(1801,0,1), new Date(2011,0,1)])
.range([0, LS.blockSize()]);
const line = d3.line()
.x((d)=>timeScale(d.date))
.y((d)=>valueScale(d.value));
LS.masked()
.call(function(parent){
parent.append('path')
.attr('d',d=>line(d.data.population))
.attr('class', 'chart-line');
});
LS.foreground()
.call(function(parent){
parent.append('text')
.attr('class', 'borough-label-outline')
.attr('x', 5)
.attr('y', 15)
.text(d => d.LSAbbreviation);
parent.append('text')
.attr('class', 'borough-label')
.attr('x', 5)
.attr('y', 15)
.text(d => d.LSAbbreviation);
})
})
.catch(err=>{
console.log(err);
})
}
</script>
</html>
You can’t perform that action at this time.