Published
Edited
Nov 12, 2019
1 fork
chart = {
const width = 1000;
const height = 1200;
const projection = d3.geoMercator().fitExtent([[0, -100], [width, height]], { "type": "LineString",
"coordinates": [ [167, -32], [177.5, -48] ]
});
const path = d3.geoPath()
.projection(projection);
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.attr('style', 'background: #f2f8f9')
svg.append('g').selectAll('path')
.data(landData.geometries)
.enter().append('path')
.attr('d', path)
.attr('fill', '#fff')
.attr('stroke', '#c9dfe5');
svg.append('g')
.selectAll('circle')
.data(placenameData)
.enter()
.append('circle')
.attr('data-name', d => d.name)
.attr("cx", (d) => projection([d.lon, d.lat])[0])
.attr("cy", (d) => projection([d.lon, d.lat])[1])
.attr("r", 7)
.style('fill-opacity', 0.85)
.attr('stroke', '#fff')
.attr('stroke-width', '2px')
.style("fill", (d) => colourMap[d.colour])
return svg.node();
}
colourMap = {
return {
'red': '#dd4f42',
'yellow': '#fcd825',
'green': '#86dd5a',
'blue': '#62b2f7',
'orange': '#fc9b41',
'brown': '#9e6a3d',
'pink': '#ef94d7',
'purple': '#9055fc',
'black': '#222222',
}
}
placenameData = d3.csvParse(await FileAttachment("output_full@3.csv").text())
d3 = require("d3@5")
landData = d3.json('https://gist.githubusercontent.com/nathanielw/be3c78eb6812450c78afe61cfa24e557/raw/3cda646a1f51b70780ee593c33ef4e5e7666fd44/nz-polygons')
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.
