Public
Edited
Dec 2
22 stars
{
const svg = d3.select(DOM.svg(width, height))
svg.append('rect')
.attr('fill', 'white')
.attr('width', width)
.attr('height', height)
svg.selectAll('.originalState')
.data(usStateFeatures)
.join(enter => enter
.append('g')
.attr("class", "originalState")
.call(enter => enter.append("path")
.attr("fill", "none")
.attr("stroke", "lightgray")
.attr("stroke-width", d => 1 )
.attr("d", albersPath)
)
)
svg.selectAll('.state')
.data(states)
.join(enter => enter
.append('g')
.attr("transform", d => {
const originalX = d.centroid[0] + (d.bbox[0][0] - d.centroid[0]) * d.electorScale
const originalY = d.centroid[1] + (d.bbox[0][1] - d.centroid[1]) * d.electorScale
const offsetX = 0//((statePos[d.abrev].x * width) - originalX)/ d.electorScale
const offsetY = 0//((statePos[d.abrev].y * height) - originalY)/ d.electorScale
return `
translate(${d.centroid[0]}, ${d.centroid[1]})
scale(${d.electorScale})
translate(${-d.centroid[0] + offsetX}, ${-d.centroid[1] + offsetY})`
})
.attr("class", "state")
.call(enter => enter.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", d => 1/ d.electorScale )
.attr("d", albersPath)
.attr("fill", "lightgrey")
.style("opacity", 0.6)
)
)
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.
