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
Jun 28, 2024
2 stars
grades.get(year).report_card
// This cell places the rect backgrounds of the city lables. Since we call the
// svg:text.getBBox() method, this needs to run *after* the labels have been
// generated; thus, it's odd placement here.
outline_cities = {
let container = d3.select(map).select("#city_background_container");
d3.select(map)
.selectAll("text")
.each(function (o) {
let bbox = this.getBBox();
container
.append("rect")
.attr("x", bbox.x - 2)
.attr("y", bbox.y - 2)
.attr("width", bbox.width + 4)
.attr("height", bbox.height + 4)
.attr("fill", "white")
.attr("fill-opacity", 0.4)
.attr("stroke", "black")
.attr("stroke-width", 0.4)
.style("pointer-events", "none");
});
}
threshold = 0.035
path = d3.geoPath().projection(projection)
projection = d3
.geoConicEqualArea()
.parallels([35.64305, 34.69796])
.rotate([79.86097, 0])
.fitSize([w - 10, h], map_data.get("boundary"))
h = 0.5 * width
w = 1100 //width < 1100 ? width : 1100
grades = {
let grades = await Promise.all([
FileAttachment("grades11.json").json(),
FileAttachment("grades16.json").json(),
FileAttachment("grades19.json").json(),
FileAttachment("grades22.json").json()
]);
return d3.rollup(
grades,
(a) => a[0],
(o) => "20" + o.plan.planName.match(/\d{2}/)[0]
);
}
map_data = {
let nc = await FileAttachment("nc_all@2.json").json();
let map_data = new Map();
Object.keys(nc.objects).forEach(function (key) {
map_data.set(key, topojson.feature(nc, nc.objects[key]));
});
return map_data;
}
cities = {
let cities = await FileAttachment("ncCities@1.csv").csv({ typed: true });
cities.forEach(function (o) {
let [x, y] = projection([o.lon, o.lat]);
o.x = x;
o.y = y;
});
return cities;
}
import { Swatches } from "@d3/color-legend"
tippy = require("tippy.js@6")
tippy_style = html`<div style="display: none"><link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}"></div>`
require.resolve(`tippy.js/themes/light-border.css`)
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.
