I live in Sydney, and work as a data visualsation designer
FileAttachment("lifetime_wealth.csv")
data = {
const text = await FileAttachment("lifetime_wealth.csv").text();
// const parseDate = d3.utcParse("%Y");
return d3.csvParse(text, ({year, race, type, wealth_lifetime}) => ({
// year: parseDate(year),
year: +year,
race: race,
type: type,
wealth: +wealth_lifetime
}));
}
group_data = Array.from(d3.group(data, d => d.race))
color_key = Array.from(d3.group(data, d => d.race).keys())
year_range = Array.from(d3.group(data, d => d.year).keys())
width = 900
x = d3.scaleBand()
.domain(year_range)
.range([margin.left, width - margin.right])
.paddingInner(0.04)
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.wealth)])
.range([height, 0])
color = d3.scaleOrdinal()
.domain(color_key)
.range(["#eb5e0b", "#5eaaa8"])
// .range(["red", "yellow"])
xAxis = d3.axisBottom(x)
.tickPadding(5)
yAxis = d3.axisLeft(y)
.tickPadding(5)
line = d3.line()
.x(d => x(d.year))
.y(d => y(d.wealth))
.curve(d3.curveCardinal.tension(.001))
d3 = require("d3@6")
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.
