Published unlisted
Edited
Apr 1, 2020
Insert cell
html `<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Bavaria_AB_%28district%29.svg">`
Insert cell
{ // 1. loading the external SVG
d3.xml('https://upload.wikimedia.org/wikipedia/commons/f/f9/Bavaria_AB_%28district%29.svg')
.then(data => {
// 2. appending the SVG to the DOM so it can be manipulated
document.body.append(data.documentElement);
});
let mysvg = d3.select("svg");
// 3. manipulating the SVG residing in the DOM
mysvg.select("polygon").style("fill", "yellow");
// 4. displaying the SVG
return mysvg.node();
}
Insert cell
d3 = require("d3@5");
Insert cell

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.
Learn more