Notebooks 2.0 is here.
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
// Extract the states
states = topojson.feature(us, us.objects.states)
// Extract the counties
counties = topojson.feature(us, us.objects.counties)
// Filter out the Illinois state by name
illinois = states.features.filter(f => f.properties.name === 'Illinois')
nation = topojson.feature(us, us.objects.nation)
mapSVG = svg`<svg width=${width} height=${height}></svg>`;
// Projection focused on the USA with Alaska shown below California
projection = d3.geoAlbersUsa()
path = d3.geoPath(projection)
function render(svg) {
let svgSelection = d3.select(svg);
svgSelection.selectAll('path').remove();
svgSelection.selectAll('.states')
.data(states.features)
.join('path')
.attr('d', f => path(f))
.attr('stroke', 'grey')
.attr('fill', 'none')
.attr('stroke-width', 4);
svgSelection.selectAll('.counties')
.data(counties.features)
.join('path')
.attr('d', f => path(f))
.attr('stroke', 'grey')
.attr('fill', 'none')
.attr('stroke-width', 1);
return svgSelection;
}
render(mapSVG)
height = 500;
cities = d3.csvParse(await FileAttachment("cities@1.csv").text(), d3.autoType)
vis = {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('.states')
.data(states.features)
.join('path')
.attr('d', f => path(f))
.attr('stroke', 'grey')
.attr('fill', 'none')
.attr('stroke-width', 1);
svg.selectAll('circle')
.data(cities)
.join('circle')
.attr('cx', d => projection([d.x, d.y])[0])
.attr('cy', d => projection([d.x, d.y])[1])
.attr('fill', 'black')
.attr('r', 6)
.on("mouseover", function(e, d) {
// e has access to the mouse event
// d has access to the city properties
console.log(d.label);
});
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.
