Skip to main content
SimilarExport ZIP
100%

Fork of Fork of WAEVData_Fork of Chloropleth

✓ Published0🌍 Public
Ooliverkendall99@gmail.com
Last edited Nov 19, 2024
Created on Nov 19, 2024

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.

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

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.

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

Fork of Chloropleth

This fork of a choropleth combines a geographic map with a scatter plot, both rendered as SVG. The map colors countries by birth rate using a linear scale, while the scatter plot displays fertility rate against life expectancy, with circle size encoding population and color representing continent via an ordinal scale. The code uses `d3.geoEqualEarth`, `d3.geoPath`, and `d3.axisBottom`/`d3.axisRight`. Data comes from a GeoJSON file, a CSV of world statistics, and a JSON continent mapping, all loaded with `Promise.all` and `d3.json`/`d3.csv`.

Gg_ivaska@coloradocollege.edu
78% match
Loading thumbnail…

Fork of Chloropleth

This fork of a choropleth map pairs a geographic view of countries colored by birth rate with a scatter plot of fertility rate against life expectancy, with point size encoding population. Both SVG panels are rendered side by side using D3.js v6, with the map drawn via `d3.geoEqualEarth` and `d3.geoPath`. The scatter plot uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisRight` for ticks, while country data comes from a 2023 CSV and continent assignments from a JSON file. Hovering synchronizes highlights across both views.

Ooliverkendall99@gmail.com
77% match
Loading thumbnail…

Fork of WAEVData (Fork of Choropleth by bepnye)

This visualization explores the distribution of electric vehicles (EVs) across Washington State counties, linking a choropleth map with a scatter plot of EV count versus real GDP per capita. Circles are sized by population and colored by county type (urban or rural), while the map uses a green gradient to show EV density. Users can hover for details, brush on the scatter plot to zoom, and double-click to reset. The visualization uses D3 v6 with `d3.geoPath`, `d3.scaleLinear`, brush interactions, and tooltips, reading data from a GeoJSON file and CSV source.

Ooliverkendall99@gmail.com
77% match