UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = d3.csv(
'https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-03-10/tuition_cost.csv',
d3.autoType
)
chart = {
const chart = d3.create("div");
const charts = chart
.selectAll("div")
.data([["All Schools", chart_data], ["All Schools 2", chart_data]])
.join("div")
.call(drawChart);
return chart.node();
}
// Let's fill in this function!
drawChart = ele => {
// Axes
const svg = ele
.append("svg")
.style("height", chart_height + "px")
.style("width", chart_width + "px");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// Axis labels, title
svg.append('text').call(xLabel);
svg.append('text').call(chartTitle);
svg.append('text').call(yLabel);
// Points
svg
.selectAll("circle")
.data(d => d[1]) // Use the data that was *already bound* to the parent "values", which is an array
.join("circle")
.call(drawPoint);
}
// Setting circle attributes
drawPoint = circle => {
circle
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 5)
.style('opacity', .5);
}
by_type_data = d3
.group(chart_data, d => d.type)
data.filter(d => d.name == "University of Washington")[0].in_state_tuition
sm_chart = {
const wrapper = d3.create("div").style("display", "inline-block");
const charts = wrapper
.selectAll("div")
.data(by_type_data) // A map, that gets processed as an array of arrays, [key, values]
.join("div") // Any given div here has a single array as it's data [map-key, values]
.attr("nonsense", d => console.log(d))
.style("width", width / 2)
.style("display", "inline-block")
.call(drawChart);
return wrapper.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(d => "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("text-anchor", "middle")
.style("font-size", '14px')
chartTitle = ele =>
ele
.text(d => (d === undefined ? "Title" : 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")
d3 = require("d3")
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.
