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.
chart_axes = {
const tbl = [
{ Month: 1, Value: 14841 },
{ Month: 2, Value: 24467 },
{ Month: 3, Value: 78423 },
{ Month: 4, Value: 60213 },
{ Month: 5, Value: 87257 },
{ Month: 6, Value: 21543 },
{ Month: 7, Value: 21373 },
{ Month: 8, Value: 87363 },
{ Month: 9, Value: 50378 },
{ Month: 10, Value: 29714 },
{ Month: 11, Value: 20171 },
{ Month: 12, Value: 70059 }
];
tbl.filter((a) => a.Month == 0).length == 0
? tbl.unshift({ Month: 0, Value: 0 })
: tbl;
const width = 1280;
const height = 720;
const glblDim = {
height: height,
width: width,
margin: {
top: 20,
right: 20,
bottom: 30,
left: 50
}
};
glblDim.boundedWidth =
glblDim.width - glblDim.margin.right - glblDim.margin.left;
glblDim.boundedHeight =
glblDim.height - glblDim.margin.top - glblDim.margin.bottom;
const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`);
const bound = svg
.append("g")
.attr("class", "bound")
.style(
"transform",
`translate(${glblDim.margin.left}px, ${glblDim.margin.top}px)`
);
const rangeX = d3.scaleLinear().range([0, glblDim.boundedWidth]);
const scaleX = rangeX.domain(d3.extent(tbl, (d) => d.Month));
const rangeY = d3.scaleLinear().range([glblDim.boundedHeight, 0]);
const scaleY = rangeY.domain(d3.extent(tbl, (d) => d.Value));
bound.append("g").call(d3.axisLeft(scaleY).tickSizeOuter(0));
bound
.append("g")
.call(d3.axisBottom(scaleX))
.attr("class", "XAxis")
.style("transform", `translateY(${glblDim.boundedHeight}px)`);
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.
