Skip to main content
SimilarExport ZIP
100%

Fork of Shot Distance Bar Plot

✓ Published0🌍 Public
AAnne Lin
Last edited Dec 13, 2021
Created on Dec 13, 2021

This interactive bar chart displays the number of earthquake deaths across regions, with buttons that filter the data by 20-year periods. The chart initially shows all data, and clicking a button triggers a smooth transition that rescales the axes and repositions the bars, which are sorted by death toll. Built with D3 v7, the visualization uses `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for axes, and the `.join()` method to update the SVG rectangles, with transitions animated over one second. The data comes from a GitHub-hosted CSV file depicting earthquakes from 1900 to 2000.

AI-generated description

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

Iterated from last week's visualization.

What's new?

  1. Added buttons to interact with users.
  2. When click on a button, the bar chart will filter and sort data.
  3. Added transition.

X-axis: region that earthquake occured.

Y-axis: Deaths in earthquake.

This bar plot shows the deaths caused by earchquakes in mutiple regions in different period of 19 century.

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

Fork of Iterated Earthquake Bar Plot

This bar chart presents earthquake-related deaths by region, with data sourced from a CSV file. The visualization stacks rectangles representing multiple years on top of each other, though the current y-axis domain extends to 750,000 without summing the values across years. The chart uses d3.csv to load the data, d3.scaleBand for the x-axis regions, and d3.scaleLinear for the y-axis deaths, rendering as SVG via d3.select and rect elements. The code suggests refining the y-axis to show cumulative deaths using d3.group and d3.rollup.

CCurran Kelleher
88% 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
85% 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
83% match
Loading thumbnail…

Iterated Earthquake Bar Plot

This bar plot visualizes total earthquake deaths by region during the 20th century, with bars sorted descending to highlight that Peru exceeds 700,000 fatalities. The visualization aggregates data from a CSV file using d3.csv, sums deaths per region with d3.sum, and renders an SVG with d3.axisBottom and d3.axisLeft for labeled axes. Regions are grouped via array filtering, and a transition animates the Y-axis update.

JJunying Li
83% 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
82% 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
82% 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
82% match