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.
Public
Edited
Aug 16, 2023
// I added the "barplot = " to name the cell.
barplot = {
const data = [
{ team: "Ohio State", score: 77 },
{ team: "Michigan", score: 3 }
];
const plot = Plot.plot({
title: "Halftime Score",
width: 200,
height: 200,
x: {
label: "Team",
values: data.map((d) => d.team)
},
y: {
label: "Score",
domain: [0, d3.max(data, (d) => d.score)]
},
marks: [Plot.barY(data, { x: "team", y: "score" })]
});
// Chat GPT's final line:
plot;
// I had to add the return here:
return plot;
}
{
const data = [
{ team: "Ohio State", score: 77 },
{ team: "Michigan", score: 3 }
];
const svg = d3.create("svg").attr("width", 200).attr("height", 200);
const x = d3
.scaleBand()
.domain(data.map((d) => d.team))
.range([0, 150])
.padding(0.1);
const y = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.score)])
.range([0, 150]);
svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d) => x(d.team))
.attr("y", 150)
.attr("width", x.bandwidth())
.attr("height", (d) => y(d.score))
.attr("fill", "steelblue");
svg
.selectAll("text")
.data(data)
.enter()
.append("text")
.text((d) => d.score)
.attr("x", (d) => x(d.team) + x.bandwidth() / 2)
.attr("y", (d) => 140 - y(d.score))
.attr("text-anchor", "middle")
.attr("fill", "white");
svg
.append("text")
.text("Halftime Score")
.attr("x", 100)
.attr("y", 20)
.attr("text-anchor", "middle")
.attr("font-size", "16px");
return svg.node();
}
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.
