Skip to main content
SimilarExport ZIP
100%

Testing around with Chloropleth

✓ Published0🌍 Public
FFremont
Last edited May 2, 2024
Created on May 2, 2024
Forked from Choropleth

This visualization combines a choropleth map with a scatter plot to explore global demographic data. A world map displays countries colored by birth rate, while the adjacent scatter plot shows fertility rate against life expectancy, with population mapped to circle size. The map and scatter plot are linked: hovering over a country in either view highlights the corresponding element in the other. Built with React and D3 v6, the map uses `d3.geoEqualEarth` projection with `d3.geoPath`, while both views rely on `d3.scaleLinear` and `d3.scaleOrdinal` for color and size 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…

Test Fork of Chloropleth

This example pairs a choropleth map with a scatterplot to explore global demographic data. The map colors each country by birth rate using `d3.geoEqualEarth` and `d3.geoPath`, while the scatterplot plots fertility rate against life expectancy, with circle size encoding population and color indicating continent. Hovering over a country on the map highlights it in red; hovering over a scatterplot point also turns it red. The code loads GeoJSON map boundaries, a CSV of country statistics, and a JSON continent mapping, processing the data into a `Map` for lookup.

RRahmoon Shamdeed Kabir
87% match
Loading thumbnail…

Fork of Chloropleth

This visualization pairs a choropleth map with a scatterplot to explore global demographic data from a 2023 CSV and GeoJSON world map. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by birth rate, while a `d3.scaleLinear` maps fertility rate and life expectancy onto the scatterplot axes, with point size encoding population. Both SVGs support synchronized mouseover highlighting that turns matching countries or points red, using `d3.selectAll` with shared ids.

Wwillapolman@gmail.com
87% match
Loading thumbnail…

Fork of Chloropleth

This visualization combines a choropleth map of global birth rates with a scatter plot of fertility rate versus life expectancy, colored by continent with point size encoding population. Hovering highlights a country in red across both views. It uses d3.geoEqualEarth, d3.geoPath, d3.scaleLinear, and d3.scaleOrdinal, with data from a world GeoJSON, a 2023 country statistics CSV, and a country-to-continent JSON. Two SVG elements render the linked map and chart.

Wwillapolman@gmail.com
86% 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
85% 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
84% match
Loading thumbnail…

Fork of Choropleth2

This example presents a dual-panel visualization of global country data, combining a choropleth map with a scatter plot. The map uses color to encode the urban population rate for each country, while the scatter plot displays life expectancy against GDP per capita, with point size representing population and color indicating continent. The code relies on `d3.geoEqualEarth`, `d3.geoPath`, `d3.scaleLinear`, and `d3.scaleOrdinal` for map projection and visual scaling, and it uses two separate SVG elements within a React framework, plus a tooltip for hover interactions.

Nnathan@shieldsonline.org
84% match
Loading thumbnail…

Fork of Choropleth for Scatter Ref

This example combines a choropleth map with a scatter plot to explore country-level data. The map uses a green-to-grey color scale to show urbanization rates, while the scatter plot compares life expectancy against GDP per capita, with point size encoding population and color encoding continent. Built with React and D3 v6, the visualization renders as two separate SVG elements side by side. It uses d3.geoEqualEarth and d3.geoPath for the map, plus d3.scaleLinear and d3.scaleOrdinal for the visual channels, with a mouseover tooltip for interactivity.

Cchris.shimotake@gmail.com
84% match
Loading thumbnail…

Choropleth

A choropleth map of global health and economic indicators is paired with an interactive scatter plot of related country attributes. The map colors countries using a linear scale for urban population rate, while the scatter plot encodes continent by color and population by point radius. Built with React and D3 v6, the visualization uses `d3.geoEqualEarth` and `d3.geoPath` for map rendering, dynamic axes with linear/log scale toggles, and animated transitions via `transition.attr` for smooth updates.

Bbepnye@gmail.com
83% match