Published
Edited
Jul 4, 2020
1 fork
1 star
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, 960, 600])
.style('background-color', '#314d7a');
svg.append('g')
.selectAll('.basemap')
.data(basemap)
.join('path')
.attr('class', 'basemap')
.attr('d', path)
.attr('fill', '#357a31')
.attr('stroke', 'white')
.attr('stroke-width', '0.2px')
.attr('stroke-linejoin', 'round');
svg.append('path')
.datum(graticule)
.attr('d', path)
.attr('stroke', 'white')
.attr('stroke-width', '0.3px')
.attr('stroke-opacity', 0.5);
for (const d of data) {
svg.append('circle')
.attr('transform', `translate(${d})`)
.attr('r', 3)
.attr('fill', '#242424')
.attr('fill-opacity', 0.8)
.attr('stroke-opacity', 0.2)
};
return svg.node();
}
graticule = d3.geoGraticule10()
path = d3.geoPath().projection(projection)
/* Rotate according to the longitude offset,
and center the graph based on the latitude offset. */
projection = d3.geoMercator()
.rotate([-140, 0])
.center([0, 25])
.scale([600])
basemap = d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json').then(data => {
return topojson.feature(data, data.objects.countries).features
})
data = FileAttachment('data@4.json').json().then(d => {
const rawData = d['1901'];
let result = [];
for (let d2 of rawData) {
const p = projection(d2.location);
result.push(p);
}
return result;
})
topojson = require("topojson-client@3")
d3 = require('d3@5')
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.
