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.
map = {
let map = d3
.create("svg")
.attr("width", map_width)
.attr("height", map_height);
// .attr("viewBox", [0, 0, map_width, map_height]);
let county_group = map
.append("g")
.selectAll('path')
.data(counties.features)
.enter()
.append('path')
.attr('d', geoGenerator)
.style('stroke', 'black')
.style('stroke-width', '1px')
.style('fill', d => d3.interpolateBlues((d.properties.POP / M) ** 0.4))
.attr('title', function(d) {
console.log(d.properties);
return `${d.properties.NAMELSAD}: Population ${d.properties.POP}`;
});
// To use native tooltips, rather than TippyJS, use the following code:
// .append('title')
// .text(function(d) {
// console.log(d.properties);
// return `${d.properties.NAMELSAD}: Population ${d.properties.POP}`;
// });
county_group.nodes().forEach(tippy);
return map.node();
}
M = d3.max(counties.features.map(c => c.properties.POP))
geoGenerator = d3.geoPath().projection(projection)
projection = d3
.geoIdentity()
.reflectY(true)
.fitSize([map_width, map_height], counties)
counties = topojson.feature(nc, nc.objects.nc_counties)
nc = FileAttachment('county_pops.json').json()
map_height = 0.6 * map_width
map_width = 0.9 * width
tippy = require("https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js")
topojson = require("topojson-client@3")
d3 = require('d3@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.
