chart = {
let frame;
let i;
const width = 960;
const height = 600;
const indicator = "floor_sqm";
const projection = d3.geoConicConformal().rotate([-132, 0]).center([0, -27]).parallels([-18, -36])
const geoGenerator = d3.geoPath()
.projection(projection);
const svg = d3.select(DOM.svg(width, height))
projection.fitExtent([[20, 20], [960, 600]], data);
const colors = d3.scaleLinear()
.domain(d3.extent(data.features, (d) => parseInt(d.properties[indicator])))
.range(d3.schemeGnBu[3]);
function colorForEntry(d) {
if(isNaN(parseInt(d.properties[indicator]))) {
return '#eee';
}
return colors(parseInt(d.properties[indicator]));
}
svg.append('g').append('text').attr('class', 'info').attr('x', 10).attr('y', 20).text('Info: ')
svg.append('g').selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', colorForEntry)
.attr('stroke','#fff')
.on('mouseover', function(d) {
d3.select('text.info').text(`Info: ${d3.format(",.2r")(d.properties[indicator])}`)
})
.on('click', function(d) {
d3.selectAll('path').attr('stroke', '#fff');
d3.select(this).attr('stroke', '#333');
})
return svg.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.
