UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
import { select } from "@jashkenas/inputs"
viewof metric = select(["type", "degree_length"])
by_type_chart = {
const div = d3.create("div");
const charts = div
.selectAll("div")
.data(by_type_data) // this will have only 4 elements in it
.join("div")
.style("height", chart_height + "px")
.style("width", chart_width + "px")
.attr("class", "chart-container")
.call(drawChart);
return div.node();
}
chart_height = 300
chart_width = 400
x = d3
.scaleLinear()
.domain(d3.extent(chart_data, d => d.x))
.range([margin.left, chart_width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(chart_data, d => d.y))
.range([chart_height - margin.bottom, margin.top])
tickFormatter = d3.format("$.2s")
xAxis = g =>
g
.attr("transform", `translate(0,${chart_height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(tickFormatter))
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(tickFormatter))
xLabel = ele =>
ele
.text("In State Tuition")
.attr("x", (x.range()[1] - x.range()[0]) / 2)
.attr("y", chart_height - margin.bottom + 35)
.style('font-family', "sans-serif")
.style("font-size", '14px')
chartTitle = ele =>
ele
.text(d => d[0]) // here is the other (corresponding) tricky part!
.attr("transform", `translate(${chart_width / 2}, ${20})`)
.style("text-anchor", "middle")
.style('font-family', "sans-serif")
yLabel = ele =>
ele
.text("Out of State Tuition")
.attr(
"transform",
`translate(${margin.left - 40}, ${chart_height / 2})rotate(-90)`
)
.style("text-anchor", "middle")
.style('font-family', "sans-serif")
html`<style>
.chart-container {
display:inline-block;
}
</style>`
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.
