Skip to main content
SimilarExport ZIP
100%

Hierarchy Tree

✓ Published1🌍 Public
QQuinn Sebso
Last edited May 2, 2024
Created on May 2, 2024
Forked from Choropleth

This interactive visualization combines a geographic map of countries with a scatter plot of global development indicators. The left panel uses a `d3.geoEqualEarth` projection with `d3.geoPath` to render country polygons, colored blue-white by birth rate. The right panel plots fertility rate against life expectancy using `d3.scaleLinear` for axes and point scaling, with circle size encoding population. Hovering highlights matching regions across both panels via `d3.selectAll` selectors. Data comes from world GEOJSON, world-data-2023.csv, and country-by-continent JSON sources.

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

Testing around with Chloropleth

This visualization combines a choropleth map with a scatter plot to explore global demographic data. A world map displays countries colored by birth rate, while the adjacent scatter plot shows fertility rate against life expectancy, with population mapped to circle size. The map and scatter plot are linked: hovering over a country in either view highlights the corresponding element in the other. Built with React and D3 v6, the map uses `d3.geoEqualEarth` projection with `d3.geoPath`, while both views rely on `d3.scaleLinear` and `d3.scaleOrdinal` for color and size encoding.

FFremont
79% match
Loading thumbnail…

Fork of Chloropleth

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.

Ooliverkendall99@gmail.com
79% match
Loading thumbnail…

Data Tree

This visualization shows a hierarchical tree of world regions and countries, with countries nested under their respective continents and subregions. The tree is rendered with SVG paths connecting parent and child nodes, using a horizontal layout where text labels display country names at sizes that decrease with depth. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout, and includes zoom functionality via `d3.zoom`. Data comes from a static JSON file containing the geographic hierarchy.

MMichael Milano
79% match
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
79% match
Loading thumbnail…

Untitled

An interactive scatterplot maps World Health Organization data, plotting urban population growth against the percentage of the population living in urban areas. Each circle represents a country, with its fill color encoding the total fertility rate using a threshold scale and a blue color scheme; missing values appear pink. The visualization uses D3.js 5.15.0, including `d3.scaleThreshold`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, to render axes, legends, and circles as SVG with mouseover events.

Aaustin-so
79% match