<svg width="1000" height="300">
<rect x="20" y="20" width="250" height="150"></rect>
</svg>
myRectangle = d3.select(mySVG4)
myRectangle.attr("width", 250).attr("height",150)
<svg width="1000" height="300">
<rect x="20" y="20" width="250" height="150"></rect>
<circle cx="50" cy="50" r="10" style="fill: yellow"></circle>
</svg>
myCircle = d3.select(mySVG5).select("circle")
myCircle.attr("r", 50)
myCircle.style("fill","red")
<svg width="1000" height="300">
<rect x="20" y="20" width="250" height="150"></rect>
<circle cx="50" cy="50" r="10" style="fill: yellow"></circle>
</svg>
myRectangle2 = d3.select(mySVG6).select("rect")
myRectangle2.attr("x", 500)
myRectangle2.attr("x", 50)
myRectangle3 = d3.select(mySVG7).select("rect")
myRectangle3.transition().duration(1000).attr("x", 500)
myRectangle3.transition().duration(1000).attr("x", 50)
myRectangle3.transition().ease(d3.easeLinear).duration(1000).attr("x", 500)
myRectangle3.transition().ease(d3.easeBounce).duration(1000).attr("x", 50)
myCircle2 = d3.select(mySVG8).select("circle")
myCircle2.transition().duration(1000).attr("cx", 500).attr("r", 150).style("fill","red")
myCircle2.transition().duration(1000).attr("cx", 50).attr("r", 20).style("fill","yellow")
<svg width="1000" height="300">
<rect x="20" y="20" width="250" height="150"></rect>
<circle cx="50" cy="50" r="10" style="fill: yellow"></circle>
<line x1="500" x2="600" y1="150" y2="150" style="stroke: blue; stroke-width: 2px"></line>
</svg>
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.
