Hello React!

100%

✓ Published0🌍 Public

Last edited Sep 27, 2019

Created on Sep 25, 2019

This example visualizes a choropleth map of the United States, displaying state-level unemployment rates with a green color scale derived from a TSV data file. Built with React and D3 v5, it renders state boundaries and graticules using `d3.geoPath` with an Albers projection, pulling TopoJSON data from the US Atlas. The React component hierarchy separates data loading in `useData` from map rendering in `Marks`, though the visualization currently displays a static map without completing the data-to-color binding.

AI-generated description

A US map showing states boundaries from US Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This example uses a choropleth map to display the unemployment rate (%) for each U.S. state. The color of each state corresponds to its value, with a legend on the right providing the scale. The map is rendered using D3.js (v5) and React, with the `d3.geoPath` projection drawing the state boundaries and a TopoJSON mesh creating the white state separations. A tooltip is appended to each state path to reveal the exact state name and unemployment rate. The data is stored in a Map object and applied to each state's fill color via the `color` scale.

Rrobertmreedy

86% match

Loading thumbnail…

Centered US Map

This visualization renders a centered choropleth map of the United States, coloring each state by a numeric rate loaded from a TSV file. The map displays state boundaries, graticules, and a sphere outline. Built with React and d3.v5, it uses `d3.geoAlbers` and `d3.geoPath` to project TopoJSON data from the US Atlas, while a `d3.scaleLinear` maps rate values to colors for the SVG paths.

Yyuzhang21

85% match

Loading thumbnail…

US_Map

A choropleth-style map displays the contiguous United States with state boundaries, rendered in SVG using React. The visualization uses `d3.geoAlbers` for projection and `d3.geoPath` to draw geographic features, with `d3.geoGraticule` generating graticule lines. Land areas are filled pink, interiors stroked darkblue, and the sphere background is yellow, styled via CSS. Geographic data comes from the US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

AAkrutiKhurana2103

84% match

Loading thumbnail…

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.

Yyuzhang21

84% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

84% match

Loading thumbnail…

country map

This visualization displays a choropleth map of the United States, coloring each state in red with thin black internal borders. The map is rendered using React and D3 v5, with geographic shapes generated through `d3.geoAlbers` projection and `d3.geoPath`. State boundaries come from the US Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. The SVG paths change to sky blue on hover using CSS, providing simple interactivity.

SSai Kaushik

83% match

Loading thumbnail…

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

83% match

Loading thumbnail…

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.

Yyuzhang21

83% match