Skip to main content
SimilarExport ZIP
100%

Interactive Visualization (button) - Earthquake Data

✓ Published1🌍 Public
JJunying Li
Last edited Oct 11, 2021
Created on Oct 10, 2021

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.

AI-generated description

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

Iterated from last week's visualization.

What's new?

  1. Added latitude and longitude to data.
  2. Added interactive world map with circles showing where earthquakes occured, and the radius of circle shows richter of earthquake.
  3. Changed the layout. Now all visualizations are in the same page.

Todo:

  1. Change buttons to menu.
  2. Add legend for 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…

Interactive Earthquake Bar Plot

This interactive bar plot displays earthquake deaths across various regions during the 20th century, with buttons filtering the data into 20-year periods. When a user clicks a button, the bars re-sort by death toll and smoothly animate to their new positions via D3's `transition` on the `rect` elements. The code uses `d3.csv` to load the dataset, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to render them. The visualization is built with D3 v7 and rendered as SVG.

JJunying Li
92% 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
90% match
Loading thumbnail…

Interactive Visualization (Brush) - Earthquake Data

This interactive dashboard visualizes earthquake data with three synchronized views: a bar plot of regional death tolls, a world map showing earthquake locations with circle radii scaled by Richter magnitude, and a line chart depicting global deaths by year. The code uses d3.geoPath with a Mercator projection to render the map, while d3.brush enables year selection that updates all views. Hovering over map regions triggers tooltips via mouseover events, and a legend explains the Richter scale. Data is loaded via d3.csv from an external gist URL, with d3.scaleLinear and d3.scaleBand managing the axes.

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

Interactive Visualization (Brush) - Earthquake Data

This interactive visualization presents earthquake data from the 19th century through three coordinated views: a bar plot of deaths by region, a world map with circles sized by Richter magnitude, and a scatter plot correlating year, magnitude, and deaths. A brush interaction on the scatter plot filters the year range across all views. The map uses d3.geoMercator projection with d3.geoPath to render country boundaries from a GeoJSON source, includes a magnitude legend, and displays country names via tooltips on mouseover. The charts are built with D3 v7 APIs including scaleBand, scaleLinear, and the join operator.

JJunying Li
87% match
Loading thumbnail…

Test Interactive Covid 19 Fork

This interactive visualization compares earthquake deaths across regions using a bar chart and maps earthquake locations with seismic intensity on a world map. Users select start and end years from drop-down menus to filter the displayed time range. The bar chart uses D3 scales, axes, and bands, while the world map employs D3’s geoMercator projection, geoPath, and JSON-loaded GeoJSON data. Circle radii on the map linearly scale with Richter magnitude, tooltips reveal country names, and the map legend clarifies magnitude values.

Ttrentjhn
87% match
Loading thumbnail…

Fork of Interactive Visualization (Two Menus) - Earthquake Data

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.

Sspace-captain96
86% match
Loading thumbnail…

Visualization (Brush) -NBA

This interactive visualization presents earthquake data through three coordinated views: a bar plot of regional death tolls, a world map showing earthquake locations with circle radii encoding Richter magnitude, and a scatter plot relating year, magnitude, and fatalities. The map uses d3.geoPath with a Mercator projection, includes a legend for magnitude values, and displays country names via a custom tooltip. The bar plot employs d3.scaleBand with axes, while the map’s tooltip and the legend are built using D3 selections. The example also demonstrates d3.json for loading GeoJSON data and integrates d3.v7.

FFAN CHI YU(范紀予)
86% match