Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Public
Edited
Apr 22
Drag Snap to LineClosest Point droplineFitness ringsRadial bar / lineFixed location Network GraphRings - circle with hole maskgetting values from inputsGet nearest data neighborsPolygons by [lon,lat] sets on Map (geo)Filter data on array of multiple valuesgeoContainsFilled Arc Polygon BandsAdd text labels to Fixed location Network GraphScale Date / Time on a lineForce Directed clustering along a pathD3 join, with updating dataSVG distance along path / curveCurves / distance color gradient"Thickened" line with SVG filled BezierTitle from Variable DropdownMousover change textStacked dropdown filter
Groups and Layers in SVG
Also listed in…
Interface and dynamics
<svg width=${width} height="500" viewBox="0 0 ${width} 500">
<text x=10 y=100>This text object is not in a group</text>
<g id="layer1">
<text x=0 y=20>This text is in Layer 1</text>
</g>
<g id="layer2" transform="translate(300,80)">
<rect x-0 y=0 fill="none" stroke="#ccc" stroke-width="1" width=1000 height=1000></rect>
<rect x=0 y=0 width=150 height=130 style="fill:red;"></rect>
<circle cx=20 cy=20 r=10 style="fill: blue;"></circle>
<text x=0 y=0>Layer 2</text>
<text x=0 y=50>notice that positions are relative to the Group's x,y</text>
</g>
<g id="layer3" transform="translate(50,300)">
<rect x-0 y=0 fill="none" stroke="#ccc" stroke-width="1" width=1000 height=1000></rect>
<rect x=0 y=0 width=50 height=80 style="fill:green;"></rect>
<circle cx=20 cy=20 r=10 style="fill: cyan;"></circle>
<text x=0 y=100>Layer 3</text>
</g>
</svg>
layer2 = d3.select(svgContainer).select("#layer2") // selecting it by it's #ID
layer2.selectAll("rect") // there is only one in layer2, but notice that it's not getting layer3's
.style("stroke","black")
.style("stroke-width","3px")
layer3 = d3.select(svgContainer).select("#layer3")
layer3.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => d * 20)
.attr("cy", d => d * 5)
.attr("r",10)
.style("fill","cyan")
data = [1,2,3,4,5]
layer2.attr("transform","translate(" + range + ",80)")
layer3.attr("transform","translate(50," + range2 + ")")
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.
