Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Public
Edited
Apr 11, 2023
1 fork
Drag Snap to LineClosest Point droplineGroups and Layers in SVGFitness ringsRadial bar / lineFixed location Network Graphgetting 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
Rings - circle with hole mask
Also listed in…
d3 layout and lib examples
<div style="background: #ddf">
<svg width="500" height="200">
<circle r="80" cx="160" cy="80" fill="yellow"/> <!-- this is for background to show that these are actual holes through -->
<g>
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<circle r="50" cx="100" cy="100" fill="black"/>
</mask>
</defs>
<circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" fill="blue"/>
</g>
<g>
<defs>
<mask id="hole2">
<rect width="100%" height="100%" fill="white"/>
<circle r="70" cx="250" cy="120" fill="black"/>
</mask>
</defs>
<circle id="donut2" r="80" cx="250" cy="120" mask="url(#hole2)" fill="green"/>
</g>
</svg>
</div>
<svg width=800 height=300>
<g id="test"></g>
</svg>
testrings = d3.select(testringscont).select("#test") // the containing svg element to put this all in.
nums = [55,80,90,35,60,70,50] // some simple data to use to drvie the sizes.
rings = testrings.selectAll(".ringGroup")
.data(nums)
.join("g")
.attr("id", (d,i) => "ring"+i)
.attr("transform", (d,i) => "translate(" + i*100 + ",150)")
.classed("ringGroup",true);
rings.each((d,i,nodes) => {
dvRing(d3.select(nodes[i]),d,d-(Math.random()*50))
})
dvRing = (elem,outerRad,innerRad,options) => {
if (typeof(options) === "undefined") {options = {}}
if (typeof(options.fillColor) === "undefined") {options.fillColor = "steelblue"}
if (typeof(options.id) === "undefined") {options.id = "id" + Math.random()*100000}
let mask = elem.select("defs").node() ? elem.select("defs") : elem.append("defs").append("mask").attr("id","h_"+options.id);
mask.append("rect").attr("width", outerRad*2).attr("height", outerRad*2).attr("x", -outerRad).attr("y", -outerRad).attr("fill","white");
mask.append("circle").attr("r",innerRad).attr("fill","black");
let ring = elem.selectAll(".ring").node() ? elem.select(".ring") : elem.append("circle").classed("ring", true);
ring.attr("id", options.id)
.attr("r", outerRad)
.attr("mask", "url(#h_" + options.id + ")")
.attr("fill", options.fillColor)
.classed("ring",true);
return ring;
}
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.
