Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="600" height="200" viewBox="0 0 600 200"></svg>
mySVG = d3.select(svg)
lines = mySVG.selectAll("line")
.data(dataset_name)
.join("line")
.attr("x1", (d,i) => calculation_or_value)
.attr("y1", (d,i) => calculation_or_value)
.attr("x2", (d,i) => calculation_or_value)
.attr("y2", (d,i) => calculation_or_value)
.attr("class", d => calculation_or_value)
.style("stroke", d => calculation_or_value)
.style("stroke-width", d => calculation_or_value);
circles = mySVG.selectAll("circle")
.data(dataset_name)
.join("circle")
.attr("cx", (d,i) => calculation_or_value)
.attr("cy", (d,i) => calculation_or_value)
.attr("r", (d,i) => calculation_or_value)
.attr("class", d => calculation_or_value)
.style("fill", d => calculation_or_value)
.style("stroke", d => calculation_or_value)
.style("stroke-width", d => calculation_or_value);
rectangles = mySVG.selectAll("rect")
.data(dataset_name)
.join("rect")
.attr("x", (d,i) => calculation_or_value)
.attr("y", (d,i) => calculation_or_value)
.attr("width", (d,i) => calculation_or_value)
.attr("height", (d,i) => calculation_or_value)
.attr("class", d => calculation_or_value)
.style("fill", d => calculation_or_value)
.style("stroke", d => calculation_or_value)
.style("stroke-width", d => calculation_or_value);
text = mySVG.selectAll("text")
.data(dataset_name)
.join("text")
.attr("x", (d,i) => calculation_or_value)
.attr("y", (d,i) => calculation_or_value)
.text(d => calculation_or_value)
.attr("class", d => calculation_or_value)
.style("fill", d => calculation_or_value)
.style("font-family", d => calculation_or_value) // "Arial, Helvetica, sans-serif"
.style("font-size", d => calculation_or_value); // "14px"
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.
