usAtlas = {
var svg = d3.select(DOM.svg(960, 600))
.attr("width", width)
.attr("height", "100%")
const zoom = d3.zoom()
.on("zoom", () => g.attr("transform", d3.event.transform))
.scaleExtent([1, 18])
.translateExtent([[0,0], [width, height]])
var path = d3.geoPath()
const g = svg.append("g")
.classed("map-layers", true)
.call(zoom);
console.log(us.objects); // Check what objects are available
g.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("class", "counties")
.attr("fill", "#eee")
.attr("stroke", "#999")
.attr("stroke-width", 1.0)
.attr("d", path)
.on("mouseover", function(d){
d3.select(this)
.attr("fill", "red")
.attr("stroke", "red")
.attr("stroke-width", 1)
// Useful for understanding the difference between mouse location & pageXY
console.log(d3.mouse(this), d3.event.pageX, d3.event.pageY)
var x = d3.mouse(this)[0] + 10
var y = d3.mouse(this)[1] - 10
var fontSize = 20
// tool tip in SVG over multiple lines
// Using tspan and `dy` to create new lines
svg.append("text")
.html(`
<tspan x=${x} y=${y} dy="0" style="font-weight: bold;">
This is bold
</tspan>
<tspan x=${x} y=${y} dy=${fontSize * 1} style="font-style: italic;">
this is italic
</tspan>
<tspan x=${x} y=${y} dy=${fontSize * 2} >
Data from the TopoJSON, id = ${d.id}
</tspan>
`)
.attr("font-size", fontSize)
})
.on("mouseout", function(d){
d3.select(this)
.attr("fill", "#eee")
.attr("stroke", "#999")
d3.select("text").remove();
})
g.append("path")
.attr("fill", "none")
.attr("stroke", "#222")
.attr("stroke-width", 1.0)
.attr("d", path(topojson.feature(us, us.objects.states)));
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.
