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
May 9, 2023
Importers
2 stars
Mass shootings in the USNC State Legislative Elections 2022Indigenous territories of the SoutheastHBCUsBuncombe county votingHexapolis 538Trivariate choropleth for racial composition in the USReproductive rights and ... ??The NC Congressional redistricting battleNC Congressional DistrictsElectoral MapGerrymandering Hexapolis by handSetting up HexapolisVisualizations of gun ownership dataUS Gun PurchasesIncome distribution in North CarolinaAmerica loves guns
Income inequality in North Carolina
Also listed in…
Maps
function make_map(include_fips) {
let w = d3.min([width, 1100]);
let h = 0.4 * w;
let pad = 10;
let div = d3
.create("div")
.style("position", "relative")
.style("width", `${w}px`)
.style("height", `${h}px`);
let svg = div
.append("svg")
.attr("viewBox", [0, 0, w, h])
.style("max-width", `${w}px`);
let projection = d3
.geoConicEqualArea()
.rotate([79.891221, -35.21521634830605])
.parallels([0, 35.215216]);
projection.fitExtent(
[
[pad, pad],
[w - pad, h - pad]
],
nc_counties
);
let path = d3.geoPath().projection(projection);
let color_scale =
shade_by == "classification"
? d3
.scaleThreshold()
.domain([0.4, 0.43, 0.47, 0.5])
.range(d3.schemeReds[9].filter((_, i) => i % 2 == 0))
: d3.scaleSequential(d3.interpolateReds).domain([0.3, 0.55]);
let counties = svg.append("g");
counties
.selectAll("path")
.data(nc_counties.features)
.join("path")
.attr("d", path)
.attr("fill", (o) => color_scale(gini_by_county.get(o.properties.COUNTYFP)))
.attr("stroke", "black")
.attr("stroke-width", 1)
.on("pointerenter", function () {
d3.select(this).attr("stroke-width", 2.5).raise();
})
.on("pointerleave", function () {
counties.selectAll("path").attr("stroke-width", 1);
})
.each(function (d) {
let name = d.properties.NAME;
let countyfp = d.properties.COUNTYFP;
let gini = gini_by_county.get(d.properties.COUNTYFP);
tippy(this, {
content: `<div>
<div><span style="font-weight: bold">County</span>: ${name}</div>
${
include_fips
? `<div><span style="font-weight: bold">COUNTYFP</span>: ${countyfp}</div>`
: ""
}
<div><span style="font-weight: bold">Gini Index</span>: ${gini}</div>
</div>`,
allowHTML: true,
theme: "light-border"
});
});
nccities.forEach(function (c) {
let [x, y] = projection([c.Longitude, c.Latitude]);
c.x = x;
c.y = y;
});
let city_group = svg.append("g");
city_group
.selectAll("circle")
.data(nccities)
.join("circle")
.attr("cx", (city) => city.x)
.attr("cy", (city) => city.y)
.attr("r", 4)
.attr("fill", "yellow")
.attr("stroke", "black")
.style("pointer-events", "none");
div
.append("div")
.selectAll("div")
.data(nccities)
.join("div")
.style("position", "absolute")
.style("font-size", `${d3.min([14, 0.0175 * w])}px`)
.style("left", (o) => (o.Name == "Winston‐Salem" ? null : `${o.x}px`))
.style("right", (o) => (o.Name == "Winston‐Salem" ? `${w - o.x}px` : null))
.style("top", (o) => (o.Name == "Durham" ? null : `${o.y}px`))
.style("bottom", (o) => (o.Name == "Durham" ? `${h - o.y}px` : null))
.text((o) => o.Name)
.style("border", "solid 1px black")
.style("background-color", "rgba(256,256,256,0.7)")
.style("pointer-events", "none");
div
.append("div")
.style("position", "absolute")
.style("left", "10px")
.style("bottom", "10px")
.append(() =>
shade_by == "classification"
? Legend(
d3.scaleOrdinal(
["< avg", "avg", "> avg", "high", "very high"],
d3.schemeReds[9].filter((_, i) => i % 2 == 0)
),
{
title: "Gini index"
}
)
: Legend(d3.scaleSequential(d3.interpolateReds).domain([0.3, 0.55]))
);
return div.node();
}
nc_counties = {
let map_data = await FileAttachment("nc_counties.json").json();
let nc_counties = topojson.feature(map_data, map_data.objects.nc_counties);
return nc_counties;
}
gini_by_county = {
gini_data.forEach((o) => (o.gini = parseFloat(o.B19083_001E)));
return d3.rollup(
gini_data,
(a) => a[0].gini,
(o) => o.county
);
}
nccities = FileAttachment("ncCities@1.csv").csv({ typed: true })
gini_data = FileAttachment("GiniIndexNCCounties.csv").csv()
import { Legend } from "@d3/color-legend"
tippy_style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}">`
tippy = require("tippy.js@6")
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.
