<svg id="chart-1" height="200" width="600" style="border: solid 1px cyan">
<circle r="10" cy="100" cx="100"/>
</svg>
<svg id="chart-2" height="200" width="600" style="border: solid 1px cyan"></svg>
d3.select("#chart-2")
.append("circle")
.attr("r", 10)
.attr("cy", 100)
.attr("cx", 100);
<svg id="chart-3" height="200" width="600" style="border: solid 1px cyan"></svg>
d3.select("#chart-3")
.selectAll("circle")
.data( values )
.join("circle")
.attr("r", 10)
.attr("cy", 100)
.attr("cx", d => d);
values = [100, 200, 300, 350, 375, 400, 500];
<svg id="chart-4" height="200" width="600" style="border: solid 1px cyan"></svg>
d3.select("#chart-4")
.selectAll("circle")
.data( values )
.join("circle")
.attr("r", 10)
.attr("cy", 100)
.attr("cx", d => d);
setTimeout(update, 2000, newArray);
function update(dataset) {
d3.select("#chart-4").selectAll("circle")
.data(dataset)
.transition().duration(1000)
.attr("r", 5)
.attr("cx", d => d)
.style("fill", "red")
}
newArray = [225, 425, 125, 50, 450, 75, 325];
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.
