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
Jan 30, 2024
aapl_stock_chart = {
// SVG set up
let w = 800;
let h = 500;
let svg = d3
.create("svg")
.attr("width", "100%")
.attr("viewBox", [0, 0, w, h])
.style("max-width", `${w}px`);
// Compute the range for both the horizontal and
// vertical axes:
let time_extent = d3.extent(aapl, (o) => o.Date);
let price_extent = d3.extent(aapl, (o) => o.High);
let pad = 20;
// Here's the time_scale. This looks a *lot* like
// our linear scales!
let time_scale = d3
.scaleTime()
.domain(time_extent)
.range([pad, w - pad]);
let y_scale = d3
.scaleLinear()
.domain(price_extent)
.range([h - pad, pad]);
let path = d3
.line()
.x((d) => time_scale(d.Date))
.y((d) => y_scale(d.High));
svg
.append("path")
.attr("d", path(aapl))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1);
// Draw the axes
svg
.append("g")
.attr("transform", `translate(0, ${h - pad})`)
.call(d3.axisBottom(time_scale).tickSize(0));
svg
.append("g")
.attr("transform", `translate(${pad})`)
.call(d3.axisLeft(y_scale).tickSize(0));
return svg.node();
}
{
// SVG set up
let w = 800;
let h = 500;
let svg = d3
.create("svg")
.attr("width", "100%")
.attr("viewBox", [0, 0, w, h])
.style("max-width", `${w}px`)
.style("overflow", "visible")
.style("margin", "20px");
// Compute the range for both the horizontal and
// vertical axes:
let time_extent = d3.extent(aapl, (o) => o.Date);
let price_extent = d3.extent(aapl, (o) => o.High);
// Here's the time_scale. This looks a *lot* like
// our linear scales!
let time_scale = d3.scaleTime().domain(time_extent).range([0, w]);
let y_scale = d3.scaleLinear().domain(price_extent).range([h, 0]);
let path = d3
.line()
.x((d) => time_scale(d.Date))
.y((d) => y_scale(d.High));
svg
.append("path")
.attr("d", path(aapl))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1);
// Draw the axes
svg
.append("g")
.attr("transform", `translate(0, ${h})`)
.call(d3.axisBottom(time_scale).tickSize(0));
svg.append("g").call(d3.axisLeft(y_scale).tickSize(0));
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.
