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
Dec 14, 2020
1
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
d3_5 = require("d3@5")
Insert cell
UR_max_by_year = d3_5
.nest()
.key(function(d) {
return Number(d.Date.getFullYear() + 0);
})
.sortKeys((a, b) => d3_5.ascending(+a, +b))
.rollup(function(year) {
return {
unemp: d3_5.max(year, function(d) {
return d.UR;
})
};
})
.entries(alldata)
Insert cell
UR_arc = {
const radius = Math.min(width, height) / 2;
return d3
.arc()
.innerRadius(radius * 0.67)
.outerRadius(radius - 1);
}
Insert cell
pie = d3
.pie()
.padAngle(0.005)
.sort(null)
.value(d => d.value.unemp)
Insert cell
color = d3
.scaleOrdinal()
.domain(UR_max_by_year.map(d => d.key))
.range(
d3
.quantize(
t => d3.interpolateSpectral(t * 0.8 + 0.1),
UR_max_by_year.length
)
.reverse()
)
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
chart6.update(paul_variable4, paul_variable3)
Insert cell
Insert cell
Insert cell
yAxisUR = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(yUR))
Insert cell
yAxisTY = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(yTY))
Insert cell
yAxisUC = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(yUC))
Insert cell
Insert cell
Insert cell
xAxisTY = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xTY))
Insert cell
xAxisUC = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xUC))
Insert cell
Insert cell
Insert cell
xTY = d3
.scaleLinear()
.domain([
d3.min(alldata, d => parseFloat(d.TY)),
d3.max(alldata, d => parseFloat(d.TY))
])
.range([30, width - 30])
Insert cell
xUC = d3
.scaleLinear()
.domain([
d3.min(alldata, d => parseFloat(d.UR)),
d3.max(alldata, d => parseFloat(d.UR))
])
.range([30, width - 30])
Insert cell
Insert cell
Insert cell
yUR = d3
.scaleLinear()
.domain([
d3.min(alldata, d => parseFloat(d.UR)),
d3.max(alldata, d => parseFloat(d.UR))
])
.range([height - 30, 30])
Insert cell
yTY = d3
.scaleLinear()
.domain([
d3.min(alldata, d => parseFloat(d.SP500)),
d3.max(alldata, d => parseFloat(d.SP500))
])
.range([height - 30, 30])
Insert cell
yUC = d3
.scaleLinear()
.domain([
d3.min(alldata, d => parseFloat(d.CPI)),
d3.max(alldata, d => parseFloat(d.CPI))
])
.range([height - 30, 30])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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