UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = await FileAttachment("courses.csv").csv()
// Detect the minmum course number for a slider
minCourseNum = d3.min(data, d => +d.number.substring(5))
// Detect the maximum course number for a slider
maxCourseNum = d3.max(data, d => +d.number.substring(5))
chart_data = data.filter(d => {
const num = +d.number.substring(5);
return num >= minValue && d.description.includes(search);
})
chart = {
let course_list;
// If this is the first time rendering the cell, create and position the svg, axes, and title
if (!this) {
course_list = d3.create('ul');
} else {
course_list = d3.select(this);
}
// Performa a data join
const courses = course_list
.selectAll('li')
.data(chart_data, d => d.number) // identify each observation by course number
.join(
enter => enter.append('li').style('color', 'steelblue'), // append, set starting color
update =>
update
.transition() // transition to black for updated elements
.duration(1500)
.style("color", "black"),
exit =>
exit
.style("color", "red")
.transition()
.duration(500)
.style('opacity', 0)
.remove()
)
.text(d => d.number + ": " + d.description);
return course_list.node();
}
d3 = require('d3@5')
import { slider, text } from "@jashkenas/inputs"
import { displayCaution } from "@info474/utilities"
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.
