Skip to main content
SimilarExport ZIP
100%

Choropleth Update May 7

✓ Published0🌍 Public
Gg_ivaska@coloradocollege.edu
Last edited May 7, 2024
Created on May 7, 2024
Forked from Choropleth

A linked choropleth map and scatter plot visualize country-level indicators like life expectancy, birth rate, and urban population. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render country shapes, colored by a `d3.scaleLinear` based on urban rate. The scatter plot uses `d3.scaleLinear` and `d3.scaleOrdinal` to encode population and continent, with interactive drop-downs to change attributes and buttons to toggle between linear and logarithmic axis scales, updating both views with smooth `transition` animations.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
88% match
Loading thumbnail…

Fork of Choropleth

A linked choropleth map and scatter plot visualize country-level demographic and economic indicators. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render world countries colored by urban population rate, while the scatter plot encodes life expectancy, birth rate, and population using `d3.scaleLinear` and `d3.scaleOrdinal`. Users can switch axes between attributes and toggle linear/log scales, triggering transitions that redraw axes and reposition points. Data is parsed from CSV and GeoJSON, with missing values handled during preprocessing.

Kkaijavanzante@gmail.com
86% match
Loading thumbnail…

Fork of Choropleth 5/3

A linked choropleth map and scatter plot explore global development metrics across countries. The map colors nations by urban population rate, while the scatter plot plots life expectancy against GDP per capita, sized by population and colored by continent. Hovering reveals a tooltip. The code uses D3 v6 APIs including `d3.geoEqualEarth` and `d3.geoPath` for map projection, `d3.scaleLinear` for continuous color and position scales, and `d3.scaleOrdinal` for categorical continent colors, with SVG rendering and CSS-based tooltips.

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

Fork of Choropleth edit 1

This example combines a choropleth map and an interactive scatter plot in two side-by-side SVG panels. The map colors countries by urban population rate using a linear green-to-grey scale, while the scatter plot positions countries by life expectancy and GDP per capita, sized by population and colored by continent. The code uses `d3.geoEqualEarth` with `d3.geoPath` for map projection, alongside `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for visual encodings, with a tooltip for hover details.

Gg_ivaska@coloradocollege.edu
85% match
Loading thumbnail…

Fork of Choropleth

This example combines a choropleth map and an animated scatter plot to explore country-level statistics. The map uses `d3.geoPath` with an Equal Earth projection to color countries by urban population rate, while the scatter plot encodes variables like life expectancy and birth rate. Users can switch axes between linear and log scales via `d3.scaleLog` and `d3.scaleLinear`, with transitions updating both axes and circle positions. Data comes from CSV and GeoJSON sources, with missing countries rendered in grey.

Oocasfre@gmail.com
84% match
Loading thumbnail…

Choropleth for countrycolor line 126

A dual-panel visualization shows the relationship between urbanization and socioeconomic indicators across countries. A choropleth map colors nations by urban population rate using a green-to-grey scale, while a scatter plot positions countries by GDP per capita against life expectancy, with point size encoding population and color distinguishing continents. The example uses D3 v6’s `d3.geoEqualEarth`, `d3.geoPath`, and `d3.scaleLinear` within a React context, rendering both SVG panels side-by-side with animated updates and a tooltip.

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

Fork of Choropleth

A linked choropleth map and scatter plot visualize global development indicators, letting users explore relationships between attributes like life expectancy, birth rate, and urbanization. Country colors encode urban population rate, while scatter plot points are colored by continent. Hovering highlights matching countries across both views, and axis buttons toggle between linear and logarithmic scales. Built with React and D3 v6, the visualization uses `d3.scaleLinear`, `d3.scaleLog`, and SVG transitions for animated updates.

FFremont
84% match
Loading thumbnail…

Selection

This example shows a linked choropleth map and scatter plot of country data, with a color scale mapping urbanization rates from green to grey and a scatter plot encoding life expectancy, GDP per capita, and population using position, color, and radius. The visualization supports interactivity by letting users select data points, which updates the map's color scale and the scatter plot's axes. It uses d3.geoEqualEarth for the map projection, d3.geoPath to render country shapes, and d3.scaleLinear for color, position, and size scales. Hovering over points triggers a tooltip via CSS transitions.

Bbepnye@gmail.com
84% match