Published
Edited
Jul 23, 2020
Insert cell
Insert cell
chart = {
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height)
.attr('style', 'background: #f2f8f9');

let postcodes = svg
.append('g')
.selectAll('path')
.data(postcodemap.features)
.enter()
.append('g')
.attr("id", d => d.properties.POSTCODE);

postcodes
.append('path')
.attr('d', path)
.attr('fill', 'none')
.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();
}
Insert cell
// from https://observablehq.com/@harrystevens/d3-geocircle
function angle(r) {
return (r / (6371 * Math.PI * 2)) * 360;
}
Insert cell
circle = d3.geoCircle()
Insert cell
width = 1000
Insert cell
height = 1200
Insert cell
projection = d3.geoMercator().fitExtent([[0, -100], [width, height]], {
type: "LineString",
coordinates: [[167, -32], [177.5, -48]]
})
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
Insert cell
Insert cell
postcodemap = FileAttachment(
"wgs84_postcode.json"
).json()
Insert cell

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.
Learn more