Skip to main content
SimilarExport ZIP
100%

Fork of Responsive Scatter Plot

✓ Published1🌍 Public
Cc_peimann@coloradocollege.edu
Last edited May 15, 2024
Created on May 3, 2024

A linked-view dashboard displays country life expectancy across time, combining a colored equal-earth map with a matching scatter plot. A slider updates both views for a selected year, while hovering over a map region or scatter point highlights its counterpart in the other panel and shows a tooltip with details. The visualization uses d3.geoPath for map rendering, d3.scaleLinear for color encoding, and SVG elements for both the map and circles, with animated transitions driven by D3 v6 event handlers.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Fork of Fork of Fork of Scatterplot for peng bird dataset

This interactive chart displays changes in life expectancy over time for a selected country, alongside the global average trend. A dropdown menu lets users choose a country, triggering a new SVG line chart with axes and a legend. The visualization uses D3.js v6 to load CSV data, compute yearly averages, and render paths via `d3.line` and scales. It is built with React and renders using SVG, with data sourced from a GitHub-hosted CSV.

Cc_peimann@coloradocollege.edu
81% match
Loading thumbnail…

Fork of 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.

Ooliverkendall99@gmail.com
81% 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
80% 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
80% 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
80% 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
80% 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
80% match