data = [
{ color:'blue', name:'item 1' },
{ color:'red', name:'item 2'},
{ color:'green', name:'item 3'}
]
{
const svg = d3.create("svg");
const fo = svg
.selectAll(".legend-fo")
.data(["legend-fo"])
.join("foreignObject") // Append for d3.v4
.attr("transform", "translate(20,20)")
.classed("legend-fo", true)
.attr("width", 100)
.attr("height", 100);
const div = fo
.selectAll(".legend-div")
.data(["legend-div"])
.join("xhtml:div") // Append for d3.v4
.classed("legend-div", true)
.html(
data
.map((v) => {
return `<div style="font-size:11px;margin-top:5px;">
<div style="border-radius:10px;
width:10px;
height:10px;
background-color:${v.color};
display:inline-block">
</div>
${v.name}
</div>`;
})
.join("")
);
yield svg.node();
}
d3 = require('d3')
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.
