Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth 5/3

✓ Published1🌍 Public
Cchris.shimotake@gmail.com
Last edited May 3, 2024
Created on May 3, 2024
Forked from Choropleth

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.

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 Choropleth 5/3

This interactive visualization pairs a choropleth map with a scatter plot to explore global health and economic indicators. The map colors countries by urban rate, while the scatter plot positions countries by life expectancy and GDP per capita, with point size encoding population and color encoding continent. The visualization uses d3.geoEqualEarth, d3.geoPath, d3.scaleLinear, and d3.schemeCategory10. Hovering reveals a tooltip, and the code includes filtering for missing data values.

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

Fork of Choropleth 5/3

This fork of a choropleth map and scatter plot visualizes country-level data, encoding attributes like urbanization rate, life expectancy, GDP per capita, and population. The map uses a green-to-grey color scale via `d3.scaleLinear`, while the scatter plot uses `d3.scaleOrdinal` with the Category 10 scheme for continents. Both SVG elements are rendered side-by-side within a React application, using `d3.geoEqualEarth` for the map projection and `d3.geoPath` to draw country boundaries. A tooltip div appears on hover, and the layout includes adjustable linear scales for the plot axes.

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

Fork of Choropleth

This fork of a choropleth combines an interactive map with a scatter plot to explore global development metrics. It uses D3 v6 to project country polygons with `d3.geoEqualEarth` and `d3.geoPath`, while a second SVG shows life expectancy versus GDP per capita. A hover tooltip appears via CSS, and both views share data from a `Map` of country entries with attributes like population and urban rate.

Wwillapolman@gmail.com
91% 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
91% 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
91% 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
90% 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
90% 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
89% match