Published
Edited
Dec 21, 2020
2 stars
md`# HTML in SVG`
data = d3.range(5).map((d,i)=> ({data:d3.range(10).map(e=>Math.floor(Math.random() * 10)).sort(), text:"I am the " +i+" graph" }))
{
const height = 600
const width = 600
const margin = ({top: 30, right: 40, bottom: 40, left: 50})
const svg = d3.select(DOM.svg(width, height))
const group = svg.selectAll("g").data(data).join("g")
.attr("transform",(d,i)=> "translate("+(i*100)+","+(100)+")" )
.on("mouseover", function(d,i) { svg.select("div.textbox").html("<h1>"+i.text+"</h1>") })
.on("mouseout", function(d,i) { svg.select("div.textbox").html("<h1>"+i.text+"</h1>") })
group.selectAll("circle").data(d=>d.data).join("circle")
.attr("cx",(d,i)=> d*5)
.attr("cy",(d,i)=> d*5)
.attr("r",(d,i)=> d*2)
.style("fill","steelblue")
svg.append("foreignObject")
.attr("transform",(d,i)=> "translate(20,250)" )
.attr("width", 480)
.attr("height", 500)
.append("xhtml:div")
.attr("class", "textbox")
.style("font", "14px 'Helvetica Neue'")
.html("<h1>Text for each label</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. ");
return 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.
