Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
myDate = new Date("2022-01-01") // a date value. change it and see what happens.
scaleDate(myDate) // returns a value between 20 and 800, proportional to date within minDate to maxDate
scaleDate = d3.scaleTime().domain([minDate,maxDate]).range([20,800]) // fits date range to the line x range (x=20 to 800)
minDate = new Date("2020-01-01")
maxDate = new Date("2023-05-09")
d3.select(mySVG).selectAll("circle").data([myDate]).join("circle").attr("cx",d=>scaleDate(d)).attr("cy",100).attr("r",5)
// just drawing the dot
viewof slider = Inputs.range([0, countOfDays], {label: "Date", step: 1, width: 500})
sliderDate = d3.timeDay.offset(minDate,slider) // return date that is slider days from minDate
countOfDays = d3.timeDay.count(minDate,maxDate) // number of days
d3.select(mySVG2).selectAll("circle").data([sliderDate]).join("circle").attr("cx",d=>scaleDate(d)).attr("cy",100).attr("r",5)
// just drawing the dot
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.
