The avatar for @uw-info474
Interactive Info Vis
UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Mar 1, 2021
7
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
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
md`# Misc`
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
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
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
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
Insert cell
Insert cell
Insert cell
india_chart_filtered = india_bar_chart_arrays
.map(d => ({
name: d[0],
value: d[1]
}))
.sort(function(a, b) {
return parseFloat(a.name) - parseFloat(b.name);
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hoj_sfMap = d3.rollup(
SFAirTrafficData.filter(d => d.Year === hoj_sfyearSelector),
v => d3.sum(v, d => +d["Adjusted Passenger Count"]),
d => d.Month
)
Insert cell
hoj_sfData = [...hoj_sfMap.keys()]
.map(d => ({
month: d,
value: hoj_sfMap.get(d)
}))
.sort(function(a, b) {
return parseFloat(a.month) - parseFloat(b.month);
})
Insert cell
Insert cell
alex_margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
Insert cell
alex_height = 500
Insert cell
alex_nyc_uniques = _.uniqBy(nyc, d => +d.month)
.map(d => +d.month)
.sort(d3.ascending)
Insert cell
alex_nycMap = d3.rollup(
nyc.filter(d => +d.month == alex_nycMonthSelector),
v => d3.sum(v, d => +d.distance),
d => d.origin
)
Insert cell
arc = d3
.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1)
Insert cell
arcLabel = {
const radius = (Math.min(width, height) / 2) * 0.8;
return d3
.arc()
.innerRadius(radius)
.outerRadius(radius);
}
Insert cell
pie_color = d3
.scaleOrdinal()
.domain(peach_nycBar_deptUniques)
.range(
d3
.quantize(
t => d3.interpolateSpectral(t * 0.8 + 0.1),
peach_nycBar_deptUniques.length
)
.reverse()
)
Insert cell
import { legend, swatches } from "@d3/color-legend"
Insert cell
pie = d3
.pie()
.sort(null)
.value(d => d.value)
Insert cell
alex_nycData = [...alex_nycMap.keys()].map(d => ({
airline: d,
value: alex_nycMap.get(d)
}))
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