Exploring people, places, and politics.
Published
Edited
Oct 1, 2020
Importers
map = {
if (data.length < 1) {
return html`Awaiting data...`;
}
const svg = d3
.select(DOM.svg(width, height))
.style("width", width)
.style("height", height)
.style("background-color", "#fff")
.style("font", "10px sans-serif");
const water = svg
.selectAll(".tile")
.data(tiles)
.enter()
.append("path")
.style("fill", "steelblue")
.style("fill-opacity", .35)
.attr("d", d => {
return path(d.data.water);
})
.style("stroke-width", 1)
.style("stroke-opacity", .5);
const earth = svg
.selectAll(".tile")
.data(tiles)
.enter()
.append("path")
.style("fill", "#fffdf9")
.style("fill-opacity", 1)
.attr("d", d => {
return path(d.data.earth);
});
const roads = svg
.selectAll(".tile")
.data(tiles)
.enter()
.append("path")
.style("fill", "none")
.attr("d", d => {
return path(d.data.roads);
})
.style("stroke-width", .1)
.style("stroke-opacity", .5)
.style("stroke", "000");
const bubbles = svg
.selectAll(".bubble")
.data(data)
.enter()
.append("circle")
.attr("class", "bubble")
.attr("transform", d => {
const [x, y] = projection([d.lon, d.lat]);
return `translate(${x},${y})`;
})
.style("fill", d => color)
.style("stroke", d => '#ff9')
.style("stroke-width", .25)
.style("fill-opacity", opacity)
.attr("r", 2)
.on('mousemove', function() {
d3.select(this)
.attr('fill', 'hotpink')
.attr('stroke', 'black');
})
.on('mouseleave', function() {
d3.select(this)
.attr('fill', color)
.attr('stroke', '#ff9');
});
return svg.node();
}
isObject = (d) => typeof(d) === "object" && d.constructor === Object
isObject(data)
zoom = 20
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.
