Skip to main content
SimilarExport ZIP
100%

Fork of WAEVData_Fork of Chloropleth

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

This fork visualizes South Carolina county boundaries using a Mercator projection, rendered via two side-by-side SVG canvases with each county filled in blue using `d3.geoPath`. The code loads GeoJSON map data from a GitHub repository alongside a CSV dataset, though the CSV is fetched but not directly used in the visible rendering. Built with D3.js v6 and React, the example demonstrates a static choropleth foundation, creating SVG paths for each geographic feature through `d3.json` and `d3.csv` promises.

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 Fork of WAEVData_Fork of Chloropleth

Two side-by-side SVG maps display Colorado counties using a blue choropleth fill. The code loads geographic boundaries from an EarthPy GeoJSON file and merges them with EV data from a CSV, though the data merge is not yet implemented. It uses d3.geoMercator, d3.geoPath, and Promise.all to load both sources, with each map rendered in its own SVG element. The visualization demonstrates a static county-level map without interactive or data-driven color encoding.

Ooliverkendall99@gmail.com
88% match
Loading thumbnail…

Fork of Fork of Chloropleth

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.

Bbepnye@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Swedish map

This visualization displays a choropleth-style map of Swedish counties, with each county filled in aqua and outlined in red, while internal borders are rendered in teal. The map uses React to manage component state and rendering, with D3’s `geoMercator` projection and `geoPath` to generate SVG paths from TopoJSON data. The projection is fitted to the map extent using `fitExtent`, and the data is loaded from a GitHub-hosted simplified Swedish counties dataset via D3’s `json` method and TopoJSON’s `feature` and `mesh` functions.

VVineela Reddy
79% match
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
79% match
Loading thumbnail…

SC Counties2

This example displays a choropleth map of South Carolina counties, coloring each county blue or red based on whether its ID matches the value "06". It renders the GeoJSON data as SVG paths using D3's `geoPath()` projection. The code loads D3 via UNPKG, fetches geographic data from a raw GitHub GeoJSON URL, and demonstrates importing from local ES6 modules alongside D3's `select` API.

Ooliverkendall99@gmail.com
79% match
Loading thumbnail…

Fork of SC5

This visualization combines a choropleth map of South Carolina counties with a horizontal bar chart, showing elevator counts and population data. Hovering over a county highlights it and displays a tooltip with the number of elevators and total population. The map uses a linear color scale, while the bar chart employs `d3.scaleBand` and `d3.axisBottom`. Data is loaded from external CSV and GeoJSON sources via `d3.csv` and `d3.json`, with interactions handled through D3 event listeners.

Bbepnye@gmail.com
78% 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
78% match
Loading thumbnail…

Fork of Swedish map

This example displays a choropleth-style map of Swedish counties, with each county filled in aqua and outlined in red, while shared interior borders appear in teal. The visualization uses a geoMercator projection fitted to the geographic data via `projection.fitExtent`. Built with React and D3 v5, it leverages `d3.geoPath` to render SVG paths from TopoJSON data, styled through CSS class selectors and framed by a simple SVG container.

VVineela Reddy
78% match