Non-contiguous cartogram / D3

Bring your data to life.

Workspace

Public

Edited

Feb 26, 2024

20 forks

39 stars

d3-geo

Spilhaus shoreline map New Jersey State Plane Custom cartesian projection U.S. state choropleth World choropleth Spike map Bubble map Choropleth Rotating orthographic Oceans Winding order Orthographic shading Solar Terminator U.S. airports Voronoi Star map Solar path Raster tiles Threshold Choropleth Mapbox Vector Tiles Raster Tiles (Canvas)Raster & vector II Clipped map tiles Graticule labels (stereographic)Sketchy Earth Cloud Contours Countries by Area Vector field Raster & vector Vector tiles Hexbin map Antimeridian Cutting World Airports World Airports Delaunay World airports Voronoi projection.reflectX Testing projection visibility

Non-contiguous cartogram

Versor Zooming Three-Axis Rotation Context to Curve Orthographic to equirectangular U.S. Map with Puerto Rico Projection Transitions Zoom to bounding box Zoomable Raster & Vector World Map (SVG)Web Mercator tiles U.S. Map (Canvas)Bivariate choropleth Tissot’s indicatrix Projection comparison Cassini World tour U.S. State Capitals World map (canvas)U.S. Map Conic Equal-Area Transverse Mercator Versor dragging Stereographic Gnomonic Orthographic Mercator Azimuthal Equal-Area Azimuthal Equidistant Equirectangular Conic Conformal Tobler–Mercator Conic Equidistant Natural Earth Equal Earth Orthographic (SVG)Quantile Choropleth

Also listed in…

Gallery

chart = {

// Specify the chart’s dimensions. In this case we use the bounding box of the projected

// US-Atlas, see https://github.com/topojson/us-atlas

const width = 975;

const height = 610;

// Create the color scale.

const color = d3.scaleSequential(d3.extent(Array.from(data.values()).flat()), d3.interpolateReds).nice();

// The path generator is used to draw the shapes and to compute their centroids.

const path = d3.geoPath();

// Create the SVG container.

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height])

.attr("width", width)

.attr("height", height)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("style", "max-width: 100%; height: auto;");

svg.append("path")

.datum(topojson.mesh(us, us.objects.states))

.attr("fill", "none")

.attr("stroke", "#ccc")

.attr("d", path);

function transform(d, year) {

const [x, y] = path.centroid(d);

return `

translate(${x},${y})

scale(${Math.sqrt(data.get(d.id)[year])})

translate(${-x},${-y})

}

// Append a path for each state.

const state = svg.append("g")

.attr("stroke", "#000")

.selectAll("path")

.data(topojson.feature(us, us.objects.states).features.filter(d => data.has(d.id)))

.join("path")

.attr("vector-effect", "non-scaling-stroke")

.attr("d", path)

.attr("fill", d => color(data.get(d.id)[0]))

.attr("transform", d => transform(d, 0));

// Append tooltips.

const format = d3.format(".1%");

state.append("title")

.text(d => `${d.properties.name}

${format(data.get(d.id)[0])} in 2008

${format(data.get(d.id)[1])} in 2018`);

return Object.assign(svg.node(), {

update(year) {

state.transition()

.duration(750)

.attr("fill", d => color(data.get(d.id)[year]))

.attr("transform", d => transform(d, year));

scales: {color}

});

}

chart.update(year)

data = new Map((await FileAttachment("obesity-2008-2018.csv").csv()).map(({id, obesity2008, obesity2018}) => [id, [+obesity2008, +obesity2018]]))

us = FileAttachment("states-albers-10m.json").json()

import {Legend} from "@d3/color-legend"

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