UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = d3.csvParse(await FileAttachment("courses.csv").text())
// 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))
// Function to filter down the data by a minimum course number and search string
filter = (data, min, searchStr) => {
return data.filter(d => {
const num = +d.number.substring(5);
return num >= min && d.description.includes(searchStr);
});
}
ul = {
// Create a <ul> element to hold your <li>s for each course
const ul = d3.create('ul');
// Define an update() method for your ul so that it can handle data changes
// This is structured to accept as an argument an *object* with the min course number and search string
ul.node().update = filterInfo => {
// Filter down your dataset
const filteredData = filter(data, filterInfo.min, filterInfo.searchString);
console.log(
"filtered data",
filteredData,
filterInfo.min,
filterInfo.searchString
);
// Performa a data join
ul.selectAll('li')
.data(filteredData, d => d.number) // identify each observation by course number
.join(
enter => enter.append('li').style('color', 'steelblue'), // append, set starting color
update => update,
exit =>
exit
.style("color", "red")
.transition()
.duration(500)
.style('opacity', 0)
.remove()
)
// .text(d => d.number); // this is a simpler solution, showcasing HTML capabilities below
.html(d => {
return `<strong>${d.number}</strong>: <em>${d.description}</em>`;
})
.transition() // transition to a constant color for all elements
.duration(1500)
.style("color", "black");
};
return ul.node();
}
// Call the update function, passing in an object with values from the inputs created above!
ul.update({ min: minValue, searchString: search })
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.
