{
const d3 = await require("d3@5");
const svgHTML = html`
<h3>Texto en HTML y luego se hace append del svg</h3>
`;
const data = [1, 2, 3, 4, 5, 6, 7];
const svg = d3
.select(svgHTML)
.append("svg")
.attr("width", width)
.attr("height", 50);
svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.style("fill", "steelblue")
.attr("cy", 20)
.attr("r", 5)
.attr("cx", d => d * 20);
return svgHTML;
}
d3 = require("d3@5")
{
const svgVersion1 = d3
.create("svg")
.style("width", width)
.style("height", "50");
let data = [1, 2, 3, 4, 5, 6, 7];
const nodesUpdate = svgVersion1
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.style("fill", "steelblue")
.attr("cy", 20)
.attr("r", 5)
.attr("cx", d => d * 20);
return svgVersion1.node();
}
{
const svgVersion2 = d3.select(DOM.svg(width, 50));
let data = [1, 2, 3, 4, 5, 6, 7];
svgVersion2
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.style("fill", "steelblue")
.attr("cy", 20)
.attr("r", 5)
.attr("cx", d => d * 20);
return svgVersion2.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.
