Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Groups and Layers in SVGFitness ringsRadial bar / lineFixed location Network GraphRings - circle with hole maskGet 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
getting values from inputs
<div>
<div id="inputs">
<input type="radio" id="gender_male" name="gender"><label for="gender">Male</label>
<input type="radio" id="gender_female" name="gender"><label for="gender">Female</label>
<br>
Name: <input type="text" id="name" name="name"><br>
<input type="button" id="submit" name="submit" value="submit">
</div>
</div>
d3.select(container).select("#gender_male").property("checked")
getValues = () => {
let gender = "";
if (d3.select(container).select("#gender_male").property("checked")) {
gender = "male"
} else if (d3.select(container).select("#gender_female").property("checked")) {
gender = "female";
}
let name = d3.select(container).select("#name").property("value");
mutable log = [name,gender];
newData.push({person: name, personGender: gender});
}
mutable log = ""
{
d3.select(container).select("#submit").on("click", () => getValues());
}
newData = []
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.
