UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
spanish_silver = d3.csvParse(await FileAttachment("spanish-silver.csv").text())
x_variable = "year"
y_variable = "silver_minted"
color_variable = "situados_paid"
chart_data = spanish_silver.map(d => {
return {
x: parseInt(d.year),
y: parseInt(d.silver_minted),
s: parseInt(d.situados_paid),
color: parseInt(d.was_american_revolution)
};
})
chart_domain_x = [d3.min(chart_data, d => d.x), d3.max(chart_data, d => d.x)]
chart_domain_y = [0, d3.max(chart_data, d => d.y)]
//chart_domain_y = [0, 1]
chart_domain_color = [0, 1, 2, 3, 4, 5]
x = d3
.scaleLinear()
.domain(chart_domain_x)
.range([margin.left + 20, width - margin.right])
y = d3
.scaleLinear()
.domain(chart_domain_y)
.range([height - margin.bottom, margin.top]) //[margin.left, width - margin.right]
color = d3.scaleSequential()
.domain(chart_domain_color)
.interpolator(d3.interpolateBlues)
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g =>
g.attr("transform", `translate(${margin.left + 20}, 0)`).call(d3.axisLeft(y))
import { legend } from "@d3/color-legend"
mark1 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(chart_data)
.join("rect")
.attr("x", d => x(d.x))
.attr("y", d => y(d.y))
.attr("height", d => y(0) - y(d.y))
.attr("width", 10);
return svg.node();
}
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
svg
.append("g")
.selectAll("rect")
.data(chart_data)
.attr("fill", color(d => d.was_american_revolution))
.join("rect")
.attr("x", d => x(d.x))
.attr("y", d => y(d.y))
.attr("height", d => y(0) - y(d.y))
.attr("width", 10);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg
.append("text")
.text("Spanish Silver Production Per Year")
.attr("transform", `translate(${width / 3},15)`);
// x-axis label
svg
.append("text")
.text("Year")
.attr("transform", `translate(${(width - margin.left) / 2}, 500)`);
// y-axis label
svg
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -(height / 2))
.attr("y", 20)
.text("Silver count");
return svg.node();
}
line = d3
.line()
.x(d => x(d.x))
.y(d => y(d.y))
ourline = line(chart_data)
viewof t = Scrubber(d3.ticks(0, 1, 200), {
autoplay: false,
loop: false,
initial: 50,
format: x => `t = ${x.toFixed(3)}`
})
strokeDasharray = d3.interpolate(
`0,${lineLength}`,
`${lineLength},${lineLength}`
)
lineLength = svg`<path d="${line(chart_data)}">`.getTotalLength()
chart2 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// path with animation
const path = svg
.append("path")
.attr("d", ourline)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-miterlimit", 1)
.attr("stroke-dasharray", strokeDasharray(t));
const gx = svg.append("g").call(xAxis);
const gy = svg.append("g").call(yAxis);
svg
.append("text")
.text("Spanish Silver Production Per Year")
.attr("transform", `translate(${width / 2},15)`)
.style("text-anchor", "middle");
// x-axis label
svg
.append("text")
.text("Year")
.attr("transform", `translate(${(width - margin.left) / 2}, 500)`)
.style("text-anchor", "middle");
// y-axis label
svg
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -(height / 2))
.attr("y", 20)
.text("Silver count")
.style("text-anchor", "middle");
return svg.node();
}
margin = ({ top: 20, right: 30, bottom: 30, left: 60 })
height = 500;
data = d3.csvParse(await FileAttachment("alphabet.csv").text())
import { Scrubber } from "@mbostock/scrubber"
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.
