france_cartogram = FileAttachment("france_cartogram@1.svg").image()
d3.select(svgNode).selectAll(".state")
.transition()
//.delay(d => (d.centroid[0] / width) * 5000)
.duration(5000)
.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 = ((statePos[d.abrev].x * width) - originalX)/ d.electorScale
// const offsetY =(((statePos[d.abrev].y * height) - originalY)/ d.electorScale)
return ''
// `
// translate(${d.centroid[0]}, ${d.centroid[1] + width* 0.1})
// scale(${cartogram? d.electorScale : 1})
// translate(${-d.centroid[0] + (cartogram? offsetX : 0)}, ${-d.centroid[1] + (cartogram? offsetY : 0)})`
})
.end()
{
const container = DOM.svg(500, 500) // Or use an existing div: html`<div></div>`
// Parse the SVG text and append it
// A common way is to create a temporary element to parse the string
const parser = new DOMParser();
const svgNode = parser.parseFromString(fr_cartogram_txt, "image/svg+xml").documentElement;
// If you want to append the whole SVG as is to your container:
container.append(() => svgNode);
// Now you can select and manipulate it using D3
const d3Svg = d3.select(container).select("svg");
// Example: Add a new rectangle
d3Svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 50)
.attr("height", 30)
.attr("fill", "blue");
// Make sure to return the container to display it
return container;
}
lg_2012_2024@5.parquet
france = FileAttachment("france.json").json()
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.
