Skip to main content
SimilarExport ZIP
100%

Fork of Chloropleth

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

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.

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

Fork of Chloropleth

This fork of a choropleth visualization displays global country data using two side-by-side SVG panels. The left panel renders a world map with an equal Earth projection, coloring countries by their birth rate through a linear blue-to-red scale via `d3.geoPath` and `d3.scaleLinear`. The right panel is a scatterplot intended to show relationships between variables like fertility rate and life expectancy, though its rendering code is commented out. The example demonstrates D3 v6’s map projection and spatial path generation within a React framework.

Cchris.shimotake@gmail.com
92% 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
92% 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

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 Chloropleth

This dashboard combines a choropleth map with a bubble chart to explore country statistics. The map colors each country by birth rate using a linear scale, while the scatter plot displays fertility rate, life expectancy, and population, with points colored by continent. Both visualizations use D3 v6, with `d3.geoEqualEarth` and `d3.geoPath` for map projection and `d3.axisBottom`/`d3.axisRight` for chart axes. Hovering highlights matching countries across both SVG views. Data comes from a GeoJSON file and CSV of 2023 world indicators.

Nnathan@shieldsonline.org
91% match