London based data visualiser.
chart = {
const width = 500;
const height = 500;
const svg = d3.select(DOM.svg(width, height));
// create a simple colour scale...
const colorDomain = d3.extent(boroughProfiles, d=>Number(d['Median House Price, 2014']));
console.log(colorDomain);
const colorScale = d3.scaleSequential(d3.interpolateLab("#19C1DF", "#F52D4F"))
.domain(colorDomain);
const LS = atf.londonSquared()
.data(boroughProfiles, d=>d.Code)
.width(width)
.height(height);
svg.call(LS);
LS.background()
.attr('fill',d=>colorScale(d.data['Median House Price, 2014'])) // make the fill a random colour
LS.foreground()
.append('text')
.attr('fill','#000')
.attr('dy',15)
.attr('dx',3)
.text(d => d.LSAbbreviation);
return svg.node(); //to add the chart to the page the block should return its node
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
