Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="1000" height="300">
<rect x="20" y="20" width="250" height="150"></rect>
</svg>
<svg width="1000" height="300">
<rect x="20" y="20" width=${width} height="150"></rect>
</svg>
width=250
<svg width="1000" height="300">
<rect x="20" y="20" width=${width_slider} height="150"></rect>
</svg>
viewof width_slider = Inputs.range([0, 500], {label: "Width", step: 1})
<svg width="1000" height="300">
<rect x="20" y="20" width="250" height="150"></rect>
</svg>
myRectangle = d3.select(mySVG4).select("rect")
myRectangle.attr("width", 350)
<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>
myLine = d3.select(mySVG9).select("line")
myLine.attr("transform", "rotate(30 500,150)")
tick = ticker(10)
myLine.attr("transform", "rotate(" + tick + " 500,150)")
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.
