I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
dot_line_chart = Plot.plot({
width: width,
height: 0.625 * width,
x: { domain: [0, 100], axis: "top", grid: true },
y: { domain: [new Date("2012"), new Date("2023")] },
marks: [
Plot.link(senateAges, {
x1: (o) => o.age_extent[0],
x2: (o) => o.age_extent[1],
y1: "year",
y2: "year"
}),
Plot.dot(data, {
x: "age",
y: "year",
fill: "black",
r: 4
})
]
})
bar_chart = Plot.plot({
x: { domain: [25, 100] },
y: {
grid: true,
domain: [0, 8]
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y: "count" },
{ x: "age", thresholds: d3.range(35, 100, 5), fill: "steelblue" }
)
),
Plot.ruleY([0])
]
})
// Tidy up the data with Arquero for the dot vizualization.
data = aq
.from(senateAges)
.select(aq.not("age_extent"))
.fold(["person1", "person2", "person3"])
.rename({ key: "person", value: "age" })
.objects()
senateAges = {
let senateAges = await FileAttachment("senate-ages.csv").csv({ typed: true });
senateAges.forEach(function (o) {
// Translate the years to propert dates
o.year = new Date(o.year.toString());
// Compuote age_extent for the lines
o.age_extent = d3.extent([o.person1, o.person2, o.person3]);
});
return senateAges;
}
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.
