Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Public
Edited
Apr 19, 2023
3 stars
Groups and Layers in SVGFitness 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 dataCurves / distance color gradient"Thickened" line with SVG filled BezierTitle from Variable DropdownMousover change textStacked dropdown filter
SVG distance along path / curve
Also listed in…
d3 layout and lib examples
point1 = circle.node().getPointAtLength(distance)
point2 = curve.node().getPointAtLength(distance)
{
svgObj.selectAll("#dot1").data([1]).join("circle")
.attr("cx", point1.x)
.attr("cy", point1.y)
.attr("r", 5)
.attr("id","dot1");
svgObj.selectAll("#dot2").data([1]).join("circle")
.attr("cx", point2.x)
.attr("cy", point2.y)
.attr("r", 5)
.attr("id","dot2");
svgObj.selectAll(".datadot")
.data(data)
.join("circle")
.attr("cx", d => curve2.node().getPointAtLength(d).x)
.attr("cy", d => curve2.node().getPointAtLength(d).y)
.attr("r", 5)
.classed("datadot", true);
}
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.
