Dorling Cartogram

100%

Dorling Cartogram

✓ Published0🌍 Public

Last edited Mar 29, 2016

Created on Nov 11, 2012

A pseudo-cartogram maps obesity rates across U.S. states, using circles sized by value and positioned near their geographic origins. The visualization employs D3.js (v3) with an Albers USA projection and a `d3.layout.force` simulation to resolve overlaps while preserving locality. Circle radii are scaled via `d3.scale.sqrt` from CDC 2008 data, rendered as SVG shapes.

AI-generated description

This is not a true Dorling cartogram; it lacks links between adjacent features. Instead of trying to preserve connectedness, this pseudo-cartogram tries to preserve locality, putting each circle as close as possible to its origin without overlapping.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Demers Cartogram

This visualization shows obesity rates across U.S. states as a pseudo-cartogram, encoding each state’s value as a square whose area is proportional to the obesity ratio. Rather than preserving adjacency between states, the layout uses a force simulation with `d3.forceSimulation`, applying `d3.forceX` and `d3.forceY` to pull each square toward its original Albers USA projection centroid while a custom collide force prevents overlap. The obesity data is drawn from CDC 2008 estimates and rendered as SVG rectangles, colored uniformly gray.

Mmbostock

91% match

Loading thumbnail…

Demers Cartogram

This interactive SVG cartogram visualizes U.S. adult obesity rates from CDC 2008 data, representing each state as a square whose size scales with the prevalence of BMI ≥ 30. The map preserves approximate geographic locality—squares stay near their original positions—rather than maintaining adjacency between states. A custom collision force iteratively pushes overlapping rectangles apart while d3.forceSimulation with d3.forceX and d3.forceY pulls each square toward its projected Albers USA centroid. The code uses a manual collide function with four iterations per tick to separate the rect elements.

深深度碎片

87% match

Loading thumbnail…

Non-Contiguous Cartogram

This example displays a non-contiguous cartogram of U.S. obesity rates, where each state is rescaled around its centroid so that its area encodes the data value while preserving local shape. The distortion is achieved by applying a `transform` attribute to each state path, using `d3.geo.path` to compute centroids and `Math.sqrt` to determine scale. State boundaries come from the U.S. Census Bureau. The code uses `d3.json` to load TopoJSON and `d3.select` to build the SVG scene.

Mmbostock

82% match

Loading thumbnail…

D3 DataBinding

The example maps U.S. adult obesity rates from CDC 2008 data by projecting state boundaries and scaling each state’s area according to its value. It uses D3 v5 with `d3.geo.path()` to render TopoJSON features, applying a centroid-based transform that proportionally enlarges states with higher obesity ratios while adjusting stroke width inversely. The visualization appears twice on the page, with the second instance likely reusing the same logic. Data is embedded as an array of per-state values, and the map relies on TopoJSON’s `topojson.feature` to extract geometries.

663anp3ca

79% match

Loading thumbnail…

Fork of D3Times

This visualization shows the correlation between poverty and obesity rates across U.S. states using a scatter plot from the D3Times dataset. A circle represents each state, with its horizontal position based on poverty percentage and vertical position based on obesity percentage; the axes are scaled to focus on the higher ranges common in the data. The chart reveals a general trend where states with higher poverty rates, such as Arkansas and West Virginia, also exhibit higher obesity rates, while states with lower poverty, like Colorado and Massachusetts, show lower obesity. Implemented with D3.js version 5.5, the code loads CSV data from a remote GitHub repository, uses `d3.scaleLinear` for axes, draws circles with appended state abbreviations, and incorporates d3-tip tooltips that display state details on click. The SVG rendering is constructed within a Bootstrap container, with axis labels and an accompanying article explaining the observed correlation.

JJoshua chirchir

77% match

Loading thumbnail…

Fork of Data visualizations

This scatterplot visualizes the correlation between poverty and obesity rates across U.S. states. Each state is represented by a circle labeled with its abbreviation, plotted along axes for poverty and obesity percentages. The chart uses D3.js to load CSV data, create scales, and render the SVG elements. A tooltip, built with the d3-tip library, appears on click, showing the state name, poverty, and obesity values. The accompanying text highlights observed clusters and trends in the data.

JJoshua chirchir

77% match

Loading thumbnail…

Fork of US COVID Vaccination Circles - Refactored

This visualization shows a map of the United States, plotting blue circles at the centroid of each state to represent the percentage of fully vaccinated residents as of September 4, 2021. The radius of each circle is scaled proportionally to the vaccination rate, allowing viewers to compare state-level progress at a glance. The code uses the D3.js library (version 5) with `geoAlbersUsa` projection and `geoPath` to render state boundaries, while `d3.scaleLinear` maps vaccination percentages to circle radii. State centroids come from a local JSON file, and vaccination data is loaded from a GitHub Gist containing U.S. vaccination data by state and territory.

PPeter VanNostrand

75% match

Loading thumbnail…

Proportional Symbols Map

This visualization shows a proportional symbols map of U.S. states, where circle size encodes each state’s cost index and the top nine highest-cost states appear in red. It uses D3 v7 with SVG rendering, a `d3.geoAlbersUsa` projection, and `d3.geoPath` for both state boundaries and symbol placement. A `d3.scaleSqrt` maps cost indices to circle radii. The code loads state polygons from us-states.json and point data from expensive-states.json, adding tooltips on mouse events.

Eeranyoung

74% match