Skip to main content
SimilarExport ZIP
100%

ex2

✓ Published0🌍 Public
Kkaijavanzante@gmail.com
Last edited May 7, 2024
Created on May 3, 2024
Forked from Choropleth

This example presents a dual-view visualization of global country data, combining an interactive choropleth map with a scatter plot. The map encodes urban population rate through a green-to-grey color scale, while the scatter plot displays life expectancy against GDP per capita, with point size representing population and color indicating continent. The visualization uses `d3.geoEqualEarth` projection, `d3.geoPath` for rendering map paths, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and employs SVG elements, tooltips, and animations within a React framework.

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

Fork of Choropleth

This example presents a dual-panel visualization of global country data: a choropleth map colored by urbanization rate and an adjacent scatter plot showing life expectancy against GDP per capita, with point size encoding population and color encoding continent. Hovering reveals a tooltip. Built with React and D3 v6, it uses `d3.geoEqualEarth` and `d3.geoPath` for map projection, alongside `d3.scaleLinear`, `d3.scaleOrdinal`, and SVG rendering for both panels.

Bblanchestora@gmail.com
85% 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
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
83% 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
83% match
Loading thumbnail…

State Zoom

This example combines a choropleth map and a scatter plot to explore country statistics. The map displays the urban population rate using a linear color scale, while the scatter plot positions life expectancy against GDP per capita, with point size encoding population and color encoding continent. Users can compare spatial and numerical patterns across countries. The visualization uses D3 v7’s `geoEqualEarth` projection, `geoPath`, `scaleLinear`, and `scaleOrdinal`, rendering as SVG with a tooltip on hover.

Ss_cural@coloradocollege.edu
82% 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
82% 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
81% match