The avatar for @info474
Spring 2020 Info Vis
UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
May 27, 2020
Fork of Interactivity
•
1 fork
4
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
render_data_table(table_info)
Insert cell
Insert cell
md`We first take a brief look on data we imported`
Insert cell
render_data_table(raw_data.slice(0, 5))
Insert cell
Insert cell
preprocessed_car_data
Insert cell
Insert cell
//1. filter year, 2. change year from int to time
fixed_car_data = preprocessed_car_data
.filter(dd => dd.Year >= showYear)
.map(d => {
return {
state: d.State,
date: parseTime(d.Year),
//date: new Date(formatTime(parseTime(d.Year))),
value: d.Repaired
};
})
Insert cell
render_data_table(fixed_car_data.slice(0, 5))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
replay;

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const updateBars = bars(svg);
const updateAxis = axis(svg);
const updateLabels = labels(svg);
const updateTicker = ticker(svg);

yield svg.node();

for (const keyframe of keyframes) {
const transition = svg
.transition()
.duration(duration)
.ease(d3.easeLinear);

// Extract the top bar’s value.
race_x.domain([0, keyframe[1][0].value]);

updateAxis(keyframe, transition);
updateBars(keyframe, transition);
updateLabels(keyframe, transition);
updateTicker(keyframe, transition);

invalidation.then(() => svg.interrupt());
await transition.end();
}
}
Insert cell
duration = 250
Insert cell
//num of bars we want to display
n = 12
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
formatNumber = d3.format(",d")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
race_x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
Insert cell
Insert cell
barSize = 48
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5", "d3-array@2")
Insert cell
Insert cell
//download source: https://www.kaggle.com/doaaalsenani/usa-cers-dataset
raw_data = d3.csvParse(
await FileAttachment("USA_cars_datasets.csv").text(),
d3.autoType
)
Insert cell
Insert cell
Insert cell
import { swatches, legend } from "@d3/color-legend"
Insert cell
Insert cell
Insert cell
height = 610
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
formatutc = d3.timeParse("%Y/%m/%d")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
xScaleAxis = d3
.axisBottom(scaleBand)
.tickFormat(d3.timeFormat("%Y/%m/%d"))
.tickValues(
scaleBand.domain().filter(function(d, i) {
return !(i % 15);
})
)
Insert cell
bar_yScale = d3
.scaleLinear()
.domain([0, d3.max(summary_by_year.map(d => d.value[choice]))])
.range([height - 50, 50])
Insert cell
import { slider } from "@jashkenas/inputs"
Insert cell
Insert cell

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.
Learn more