Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Visualization (Two Menus) - Earthquake Data

✓ Published0🌍 Public
Sspace-captain96
Last edited Jun 10, 2022
Created on Jun 10, 2022

This interactive visualization displays earthquake data from the 20th century using a bar plot and a world map. The bar plot shows total deaths by region, while the map uses circle radius to represent earthquake magnitude on the Richter scale. Users select start and end years from two drop-down menus, which updates both visualizations. The code uses D3 v7 with SVG rendering, including d3.geoMercator projection, d3.scaleLinear and d3.scaleBand scales, and tooltip interactions for the map. Data comes from a GeoJSON world map and an external earthquake dataset.

AI-generated description

Data: https://gist.github.com/Junying-Li/72ef4641efd6b4abf371f5d9f4267a56

Iterated from one menu version.

What's new?

  1. Changed buttons to two drop down menu.
  2. Update visualizations by different start year and end year.
  3. Added legend for world map.
  4. Scale linear richter(radius of circles on map).
  5. Added tooltips for world map.

Bar plot:

X-axis: region that earthquake occured.

Y-axis: Deaths in earthquake.

World map:

Circle: positions where earthquake occured.

Radius: richter of earthquake.

The bar plot shows the deaths caused by earchquakes in mutiple regions in different period of 19 century. The world map shows the positions where earthquakes occured and how strong they were (richter scale).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Visualization (Two Menus) - Earthquake Data

This interactive visualization pairs a bar chart with a world map to explore earthquake deaths and magnitudes. Two dropdown menus filter the data by start and end year, with the bar chart showing total deaths per region and the map displaying earthquake locations scaled by Richter magnitude. The visualization uses D3.js v7 with d3.geonear and d3.geoPath for the map projection, d3.scaleBand and d3.scaleLinear for axes, and animated transitions for tooltips and updates. It loads world geography from a GeoJSON file and earthquake data from a GitHub gist, with a legend added to the map.

Oolddb
96% match
Loading thumbnail…

Interactive Visualization (Two Menus) - Earthquake Data

This interactive visualization presents earthquake data from the 20th century through a bar plot and a world map. Two dropdown menus allow users to filter the data by start and end year, updating both the bar chart of regional death tolls and the map’s earthquake locations. The map uses `d3.geoPath` with a Mercator projection to render country outlines, while circle radii encode the Richter scale magnitude. The bar chart employs `d3.scaleBand` and `d3.scaleLinear` for axes, with tooltips providing country names on map hover. Visualizations render in SVG with smooth transitions.

JJunying Li
94% match
Loading thumbnail…

Interactive Visualization (One Menu) - Earthquake Data

This interactive visualization displays earthquake data from 1900 to 1999, combining a world map and a bar chart. The map uses `d3.geoMercator` and `d3.geoPath` to render earthquake locations as circles, with radius representing Richter magnitude. The bar chart aggregates total deaths by region, updating via a dropdown menu that filters data by twenty-year intervals. Both SVG visualizations share the same dataset, loaded from a CSV file, and employ D3 v7’s data-join and transition methods for updates.

JJunying Li
91% match
Loading thumbnail…

Fork of Fork of Interactive Visualization (Brush) - Earthquake Data

This interactive dashboard combines a bar chart, a world map, and a scatter plot to explore earthquake data from 2000 to 2021. The bar chart shows the mean yearly earthquake magnitude, while the world map, built with `d3.geoPath` and a Mercator projection, plots earthquake epicenters with circle radii scaled by Richter magnitude. A linked scatter plot uses `d3.select` to display year against magnitude, with point size representing deaths. The map also includes tooltips on hover, and the data for the bar chart is loaded from a CSV file.

Sspace-captain96
89% match
Loading thumbnail…

Fork of Interactive Visualization (Brush) - Earthquake Data

This visualization of earthquake data combines a bar plot, world map, and scatter plot to explore regional deaths, epicenter locations with Richter magnitudes, and the relationship between year, magnitude, and casualties. Users can brush on the scatter plot to filter the other views by year. The map uses d3.geoMercator with d3.geoPath to render world geography, while tooltips display country names on hover. All charts are built with d3.v7, rendering as SVG with animation, and the data is loaded from an external CSV source.

Sspace-captain96
89% match
Loading thumbnail…

Fork of Interactive Visualization (Brush) - Earthquake Data

This visualization combines a bar plot, world map, and scatter plot to explore earthquake data. The bar plot shows total deaths by region, the map displays earthquake locations with circle radius representing Richter scale magnitude, and the scatter plot correlates year with Richter magnitude and death counts. The implementation uses D3 v7 with d3.geoPath for map projection, d3.scaleBand and d3.scaleLinear for axes, and includes interactive brushing, tooltips via mouseover events, and a legend. Data comes from a CSV file referenced in the code.

PPiotr Paszek
88% match
Loading thumbnail…

Fork of Interactive Visualization (Brush) - Earthquake Data

This visualization presents earthquake data through three linked views: a bar plot of regional death tolls, a world map plotting earthquake locations with circle size encoding Richter magnitude, and a scatter plot relating year, magnitude, and deaths. A brush selection on the scatter plot filters the other views, while map tooltips display location names and a legend explains magnitude scaling. The code uses d3.v7 with `d3.geoMercator` projection, `d3.geoPath` for map rendering, and `d3.scaleBand`/`d3.scaleLinear` for chart axes. Data comes from a GitHub-hosted world GeoJSON and earthquake CSV.

AAbhishek Singh
86% match
Loading thumbnail…

Interactive Visualization (button) - Earthquake Data

This interactive visualization displays earthquake deaths by region in a bar plot alongside a world map showing earthquake locations and magnitudes. Users click buttons to filter data across different 20th-century time periods. The bar chart sums deaths per region using d3.csv, d3.filter, and d3.sum, while the map uses d3.geoMercator and d3.geoPath to project earthquake positions as circles sized by Richter scale. Data comes from a CSV containing latitude, longitude, and earthquake details.

JJunying Li
86% match