Simple grid cartogram / Mark McClure

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.

Workspace

Public

Maps

Edited

Jan 6, 2024

2 stars

Maps

NC Congressional Districts Trivariate choropleth for racial composition in the US Racial distribution in NC WNC Zoom 3D Choropleth for NC County Populations NC Counties Triangulated Canadian Provinces (separate)Triangulated NC Counties An X3D Globe Canadian Elections 3D WNC Surround Electoral Results Tilegram The new Electoral College Electoral Map GPX rides with Leaflet and OSM Old encoded polyline rides with Leaflet GPX rides with Maplibre and Maptiler Buncombe county voting The NC Congressional redistricting battle Hexapolis 538 Zillow Home Prices Setting up Hexapolis COVID curves Thirty day Map Challenge - Day 1

Simple grid cartogram

2020 Census Apportionment Tilegram Mass shootings in the US HBCUs NC State Legislative Elections 2022 Hierarchical Structure of the US Regions Indigenous territories of the Southeast D3.force to desired position Population Choropleth for the Contiguous US States Plotting a few points on a map Mutliple bubble maps for CSV data World population bubble map Reproductive rights and ... ??Gerrymandering Hexapolis by hand Visualizations of gun ownership data Income inequality in North Carolina

grid_cartogram = {

let size = 1000;

let w = width < size ? width : size;

let xmax = d3.max(grid.map(o => o.x)) + 1;

let ymax = d3.max(grid.map(o => o.y)) + 1;

let h = (ymax * w) / xmax;

let map = d3

.create('svg')

.attr('width', w)

.attr('height', h);

let pad = 0.02 * w;

let x_scale = d3

.scaleLinear()

.domain([0, xmax])

.range([pad, w - pad]);

let y_scale = d3

.scaleLinear()

.domain([0, ymax])

.range([pad, h - pad]);

let dx = (0.98 * (w - 2 * pad)) / xmax;

let dy = (0.98 * (h - 2 * pad)) / ymax;

let s = d3.min([dx, dy]);

map

.selectAll('rect')

.data(grid)

.join('rect')

.attr('x', d => x_scale(d.x))

.attr('y', d => y_scale(d.y))

.attr('width', dx)

.attr('height', dy)

.attr('rx', 0.005 * w)

.attr('stroke', 'black')

.attr('fill', '#eee');

map

.selectAll('text')

.data(grid)

.join('text')

.attr('x', d => x_scale(d.x) + 0.33 * dx)

.attr('y', d => y_scale(d.y) + 0.62 * dy)

.attr('font-size', 0.02 * w)

.style('pointer-events', 'none')

.text(d => d.abbr);

return map.node();

}

grid = {

let grid = await FileAttachment("grid_cartogram@1.csv").csv({ typed: true });

// fips is an integer, but we probably want a string of length 2.

grid.forEach(o => (o.fips = o.fips < 10 ? `0${o.fips}` : o.fips.toString()));

return grid;

}

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.

Learn more