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.
svg = {
let svg_width = width;
let svg_height = 0.4 * svg_width;
let svg = d3
.create('svg')
.attr('width', svg_width)
.attr('height', svg_height);
let x_scale = d3
.scaleLinear()
.domain([bounds.xmin, bounds.xmax])
.range([0, svg_width]);
let y_scale = d3
.scaleLinear()
.domain([bounds.ymin, bounds.ymax])
.range([svg_height, 0]);
let pts_to_path = d3
.line()
.x(function(d) {
return x_scale(d[0]);
})
.y(function(d) {
return y_scale(d[1]);
});
let triangles = triangulated_counties
.map(c => extract_geometry(c, 'triangle'))
.flat(1);
svg
.selectAll('path.tri')
.data(triangles)
.enter()
.append("path")
.attr('class', 'tri')
.attr('d', function(d) {
// console.log(d);
return pts_to_path(d);
})
.attr("stroke", "black")
.attr("stroke-width", .1)
.attr('fill', 'white');
let segments = triangulated_counties
.map(c => extract_geometry(c, 'segment'))
.flat(1);
svg
.selectAll('path.seg')
.data(segments)
.enter()
.append("path")
.attr('class', 'seg')
.attr('d', function(d) {
console.log(['seg', d]);
return pts_to_path(d);
})
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr('fill', 'white');
return svg.node();
}
triangulated_counties.map(c => extract_geometry(c, 'segment')).flat(1)
bounds = {
let xpts = triangulated_counties.map(c => c.pts.map(xy => xy[0])).flat();
let ypts = triangulated_counties.map(c => c.pts.map(xy => xy[1])).flat();
let xmin = d3.min(xpts);
let xmax = d3.max(xpts);
let ymin = d3.min(ypts);
let ymax = d3.max(ypts);
return { xmin: xmin, ymin: ymin, xmax: xmax, ymax: ymax };
}
extract_geometry(triangulated_counties[0], 'triangle')
//triangulated_counties.map(c => extract_geometry(c, 'triangle')).flat(2)
function extract_geometry(county, type) {
let pts = county.pts;
let geo;
if (type == 'triangle') {
geo = county.triangles;
} else if (type == 'segment') {
geo = county.segments;
}
return geo.map(function(indices) {
return indices.map(i => pts[i]);
});
}
triangulated_counties = FileAttachment('nc_triangulated3.json').json()
d3 = require('d3@5')
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.
