D3 DataBinding

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.

81% match

Dorling Cartogram

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.

79% match

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.

78% match

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.

深深度碎片

Ppravalika.thogaru10@gmail.com

Data Visualization ICE8 - Country Map

This example displays a choropleth-style map of the United States using red-filled states with blue outlines and green hover states. Built with D3 v5 and TopoJSON, it loads US Atlas state boundaries and projects them using `geoAlbersUsa`. The `geoPath` generator renders each state as an SVG `<path>`, with a `<title>` element revealing the state name on hover. The map uses the `geo-albers-usa-territories` library for accurate territory placement.

Map D3

This map displays the counties of the United States using a natural Earth projection. The visualization draws each county as a separate SVG path, with white fill and black borders. The code loads TopoJSON data from a remote source, converts it to GeoJSON using the `topojson.feature` API, and renders it with `d3.geoPath` and `d3.geoNaturalEarth1`. It utilizes the D3 v5 library and appends all shapes within a single SVG container.

CChristopher Repka

U.S. TopoJSON

This example displays a layered map of the United States using county, state, and national boundaries. The map is rendered as SVG, with counties stroked in thin gray, states in thin black, and the nation in a thicker black outline. It loads TopoJSON data from the us-atlas package and uses the topojson-client library to compute and draw the geographic meshes and features. The visualization is built with d3.v4, using d3.json for data fetching and d3.geoPath for path generation.