Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth

✓ Published0🌍 Public
Ooliverkendall99@gmail.com
Last edited May 12, 2024
Created on May 12, 2024
Forked from Choropleth

This interactive dashboard combines a choropleth map with a linked scatter plot to explore country-level data. Users can select attributes for the x- and y-axes of the scatter plot and toggle between linear and logarithmic scales, while the map’s color encodes a chosen variable. The visualization uses D3 v6 with a `d3.geoEqualEarth` projection, `d3.geoPath` for map rendering, and `d3.scaleOrdinal` for categorical colors. A tooltip provides details, and transitions animate axis updates.

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 Choropleth

This fork of the choropleth example combines a geographic map with a scatter plot. It uses D3.js v6 to render two SVG elements side-by-side, with the map using `d3.geoEqualEarth` projection and `d3.geoPath` to draw country borders. The map is colored by urban rate, while the scatter plot shows life expectancy against GDP per capita, with point size encoding population and color distinguishing continents. The visualization includes an interactive tooltip that appears on hover, and data is loaded from external sources.

HHOURPRIMERA@GMAIL.COM
91% match
Loading thumbnail…

Fork of Choropleth

This fork of a choropleth map combines a geoEqualEarth projection with a scatter plot, enabling users to explore relationships between country attributes like GDP per capita, population, and urban rate. The map uses a linear color scale to shade countries by urban population rate, while the scatter plot encodes continent with ordinal colors and population with scaled radii. Users can dynamically select X and Y attributes and toggle the Y axis. The visualization uses d3.geoPath for map rendering, d3.scaleLinear for numeric mappings, and d3.scaleOrdinal for categorical coloring.

SStuart Sessions
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

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

Fork of Fork of Chloropleth

This visualization pairs a choropleth map with a scatterplot, both driven by a year slider. It uses D3 v6’s `d3.geoEqualEarth` projection and `d3.geoPath` to render world map polygons, colored by life expectancy. The scatterplot places each country as a circle along a horizontal life-expectancy axis. Hovering over a map region or a circle highlights the corresponding element in both views and shows a tooltip with country, life expectancy, and year.

Cc_peimann@coloradocollege.edu
89% match