Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
SVG to Observable D3 movementRAWGraphs.io to Observable interaction
Illustrator/Inkscape to Observable
sampleSVG = FileAttachment("ai export for svg.svg").text()
import {importSVGnode} from "@emfielduva/dvlib"
svg = importSVGnode(sampleSVG)
dots = {
let dots = d3.select(svg);
dots.select("#blueDot").attr("cx", form.blueX);
dots.select("#yellowDot").attr("cx", form.yellowX);
dots.select("#redDot").attr("cx", form.redX);
dots.selectAll("circle").attr("r", form.radius) // uncomment this one to see it apply to all circles
}
FileAttachment("illustrator_sliders.svg").image()
slidersSVG = FileAttachment("illustrator_sliders.svg").text() // notice the .text() rather than .image()
sliders = importSVGnode(slidersSVG)
sliderData = FileAttachment("illustrator_sliders.csv").csv()
scaleX = d3.scaleLinear().domain([0,1]).range([0,600]) // a scale domain/range for X
leftmostX = 200
slidersD3 = d3.select(sliders) // D3 grabs the objects to be able to manipulate.
moveDotsYear = {
sliderData.forEach(function(d,i) { // for each entry in data
let dotPosition = leftmostX + scaleX(+sliderData[i][year]); // get the data in the csv file
slidersD3.select("#dot"+d["question"]) // get the dot for this slider/"question" - this was built from a survey
.transition().duration(1000)
.attr("cx", dotPosition); // set the dot position from data
let line = d3.select("#line"+d["question"]); // the line surrounding the dot needs to extend and contract.
let lineX1,lineX2;
if (dotPosition < line.attr("x1")) {
lineX1 = dotPosition;
} else {
lineX1 = line.attr("x1");
}
if (dotPosition > line.attr("x2")) {
lineX2 = dotPosition;
} else {
lineX2 = line.attr("x2");
}
slidersD3.select("#line"+d["question"])
.transition().duration(1000)
.attr("x1", lineX1)
.attr("x2", lineX2);
})
}
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.
