Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Chloropleth

✓ Published1🌍 Public
Bbepnye@gmail.com
Last edited May 10, 2024
Created on May 10, 2024

A choropleth map of the United States colors each state according to a numeric value from a CSV file, using a white-to-blue linear scale. It renders as an SVG via D3 v6, with an Equal Earth projection fitted to the map’s bounding box. The code loads GeoJSON state boundaries and state statistics, then joins them by ISO 3166-2 codes to set fill colors through `d3.geoPath` and `d3.scaleLinear`. The map is sized at half the container’s width, with data sourced from a GitHub-hosted GeoJSON file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Chloropleth

This visualization displays a choropleth map of the United States using a hexgrid projection, with each state's fill color corresponding to a numerical value from the `StateFile.csv` data (ranging from 0 to 221, likely representing counts or frequencies). The map is rendered as an SVG using `d3.geoPath` with a `d3.geoEqualEarth` projection fitted to the canvas. The code loads GeoJSON map data and CSV statistics via `d3.json` and `d3.csv`, then maps state codes (ISO 3166-2) to values using a linear color scale that transitions from white to blue. Interactive mouseover effects are present but commented out.

Bblanchestora@gmail.com
93% match
Loading thumbnail…

Fork of Shark Tank Chloropleth

This fork of a Shark Tank choropleth visualizes the ratio of “Num” to population for each U.S. state, using a linear color scale from white to blue. It renders an SVG map via `d3.geoMercator` and `d3.geoPath`, loading GeoJSON map data and CSV statistics through `d3.json` and `d3.csv`. The code uses `d3.scaleLinear` for color mapping and joins paths with `selectAll` and `join` for drawing.

HHOURPRIMERA@GMAIL.COM
87% match
Loading thumbnail…

Fork of Chloropleth

This visualization displays a choropleth map of world countries colored by birth rate, using a blue-to-red linear color scale. It renders two SVG graphics, each half the width of the full canvas, using the D3.js `geoEqualEarth` projection and `geoPath` to draw country boundaries from a GeoJSON file. The code loads world statistics from a CSV and matches country names to shapefile features, falling back to gray for missing data. It leverages D3's `scaleLinear` for color encoding and `Promise.all` to load multiple datasets concurrently.

Bbepnye@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Chloropleth

This example displays a choropleth map of the world, coloring countries based on their "Birth Rate" from a 2023 world-data CSV. A blue-to-red linear color scale encodes the data range, with grey indicating missing countries. The visualization renders two separate SVG canvases side-by-side, each showing the same map. The code loads GeoJSON map data, country statistics, and continent data using `Promise.all` and `d3.json`, `d3.csv`, then draws the map with `d3.geoEqualEarth` and `d3.geoPath`.

Gg_ivaska@coloradocollege.edu
85% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
85% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
85% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
85% match
Loading thumbnail…

Fork of Fork of US states map : with colorScale. One color for each country

This example displays a choropleth-style map of African states, rendered as green SVG paths with white strokes on a dark background. It loads GeoJSON data from a GitHub gist, converts it into geographic features using `topojson.feature`, and projects the shapes with `d3.geoAlbersUsa` and `d3.geoPath`. Each state path includes a `<title>` element showing the region’s name from the data’s properties. The implementation relies on D3 v5 for selection, data loading, and path generation, while the map’s styling is defined in an external stylesheet.

Bbhargavarathod
85% match