Centered US Map

Centered US Map

This example shows a choropleth map of US states colored by a numeric rate value, using a green color scale from d3.scaleThreshold. The map is centered on the US using the geoAlbers projection and rendered with d3.geoPath in SVG. State boundaries come from US Atlas TopoJSON data, with interiors highlighted via topojson.mesh. The React app loads state rate data from a TSV file and maps each state’s rate to its fill color. Graticules and a smooth sphere background complete the polished cartographic style.

Centered US Map

This visualization presents a centered map of the United States, displaying state boundaries as colored polygons to represent a quantitative rate per state. The map is rendered using SVG within a React framework, with geographical data loaded from the US Atlas TopoJSON. The code employs D3 v4 APIs such as `geoPath` and `geoAlbers` to project the map, and `scaleThreshold` with `schemeGreens` to color states based on rates from a TSV file. Gratricules are included as a visual aid.

Centered US Map

Centered US Map

This example displays a choropleth map of the United States, colored by state-level data from a TSV file, with state boundaries, a graticule, and a sphere outline for context. It loads GeoJSON topology from the US Atlas and uses the `d3.geoPath` projection to render the shapes as SVG paths. The color scheme is built with `d3.scaleThreshold` and `d3.schemeGreens`, while state fill values are assigned via a lookup table. The map is embedded in a React component using the `useData` hook to fetch and process the data.

Centered US Choropleths Map

A centered US choropleth map displays state boundaries with a uniform purple fill, using state-level rate data from a TSV file. The visualization loads US Atlas TopoJSON data and renders it with React and D3 v5, using `d3.geoAlbers` for projection and `d3.geoPath` to draw state and interior mesh paths. The code includes commented-out attempts at threshold-based color mapping with `d3.scaleThreshold` and `d3.schemeGreens`, though the final version applies a single color to all states.

93% match

Centered US Choropleths Map

This visualization displays a centered choropleth map of the United States, with each state colored according to a rate value from a TSV data file. The map uses an Albers projection and renders state boundaries, interior meshes, and a graticule. Built with React and D3 v5, the code loads TopoJSON and TSV data via `Promise.all`, then applies a threshold color scale (`d3.scaleThreshold`) with `d3.schemeGreens` to encode the rates. The map data originates from the US Atlas TopoJSON repository.

SSagarikaS

93% match

Centered US Choropleths Map

A choropleth map of US states displays state-level rates using a green color scale, with state boundaries from the US Atlas TopoJSON and state rate data from a TSV file. The visualization uses React with D3’s `geoAlbers` projection and `geoPath` to render SVG paths, applying a `d3.scaleThreshold` color lookup based on each state’s rate. The map includes a sphere background and interior state borders, with loading handled via `Promise.all` to fetch both TopoJSON and TSV data.

Wwenleicao

93% match

Centered US Map

This visualization displays a US state map using the Albers equal-area projection, with state boundaries rendered as SVG paths. The map is centered and includes graticules, with states colored via random colors from a generated lookup table. The visualization is built with React and D3 v5, using `d3.geoPath` with the `geoAlbers` projection and `geoGraticule`. State boundaries come from the US Atlas TopoJSON data, while a TSV file provides rate values that could be mapped through a threshold color scale.