chart = {
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height)
.attr('style', 'background: #f2f8f9');
let postcodes = svg
.append('g')
.selectAll('path')
.data(rewoundFeatures)
.enter()
.append('g')
.attr("id", d => d.properties.POSTCODE);
postcodes
.append('path')
.attr('d', path)
.attr('fill', 'lightgrey')
.attr('stroke', 'grey');
let stores = svg
.append('g')
.selectAll('circle')
.data(storeCSV)
.enter()
.append("g");
stores
.append("path")
.attr("d", function(d) {
return path(circle.center([d.lng, d.lat]).radius(angle(50))());
})
.style("fill", "none")
.style("stroke", "black");
stores
.append('circle')
.attr('data-name', d => d.name)
.attr("cx", d => projection([d.lng, d.lat])[0])
.attr("cy", d => projection([d.lng, d.lat])[1])
.attr("r", 4)
.style('fill-opacity', 0.85)
.attr('stroke', '#fff')
.attr('stroke-width', '2px')
.style("fill", "green");
return svg.node();
}
// from https://observablehq.com/@harrystevens/d3-geocircle
function angle(r) {
return (r / (6371 * Math.PI * 2)) * 360;
}
rewoundFeatures = {
let rwArr = [];
let features = postcodemap.features;
features.forEach(function(f) {
if (f.geometry != null && f.geometry.coordinates.length > 0) {
rwArr.push(turf.rewind(f, { reverse: true }));
}
});
return rwArr;
}
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.
