Final - Earthquakes Linked Views with Brushing on Map

100%

Final - Earthquakes Linked Views with Brushing on Map

✓ Published2🌍 Public

Last edited Apr 24, 2024

Created on Apr 22, 2024

Forked from Final-Earthquakes Linked Views with Brushing on Scatter Plot

This interactive visualization links a world map and a scatter plot to explore earthquake data from the USGS API. The map displays earthquakes as circles sized by magnitude and colored by depth category, with a brush tool allowing users to select specific earthquakes. The linked scatter plot then shows the selected earthquakes, plotting time against magnitude, with a tooltip providing details. Built with D3.js, the visualization uses `geoEquirectangular` for map projection, `scaleOrdinal` for color encoding, and `brush` for selection.

AI-generated description

In the map

data from an USGS API
circle size related to magnitude value
interaction: click circle and direct to a url
added color to the circles, according to depth (shallow, intermediate, deep)
added brush

In the scatter plot

added tooltip

Interaction:

Use a brush tool on the map to select the earthquakes that you want to display on the scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Final-Earthquakes Linked Views with Brushing on Scatter Plot

This visualization presents a linked-view dashboard of global earthquake data from the USGS API, displaying a world map with tectonic plate boundaries alongside a scatter plot of earthquake magnitude over time. Users can brush on the scatter plot to filter which earthquakes appear on the map, with circle size encoding magnitude and color encoding depth category. The map supports zooming and panning via d3.zoom, while circles link to external URLs and display tooltips. The implementation uses d3.geoEquirectangular projection, d3.geoPath for map rendering, d3.brushX for selection, and d3.scaleOrdinal for categorical color encoding.

Llingjizhu@gmail.com

94% match

Loading thumbnail…

Fork of Final - Earthquakes Linked Views with Brushing on Map

This interactive visualization combines a world map and scatter plot to explore earthquake data from the USGS API. Users brush on the map to select earthquakes, which highlights corresponding points in the scatter plot. Map circles display magnitude through size and depth through a color legend, while clicking a circle opens its USGS page. The scatter plot adds tooltips with details. The visualization uses d3-geo projections and geoPath for mapping, d3-brush for selection, and d3-scaleOrdinal for color encoding, with topojson-client for world atlas data.

AAamir Hameed mir

93% match

Loading thumbnail…

Fork of Fork of Final - Earthquakes Linked Views with Brushing on Map

This interactive visualization maps earthquakes from the USGS API as colored circles sized by magnitude. A brush tool on the map filters which earthquakes appear in a linked scatter plot, enabling coordinated views of depth, time, and magnitude. The D3 code uses `geoEquirectangular` projections, `d3.brush`, and `d3.scaleOrdinal` to categorize depth into shallow, intermediate, and deep classes. Clicking a circle opens the earthquake’s URL, while tooltips provide detailed information for both map and scatter plot points.

AAamir Hameed mir

91% 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

84% 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

83% 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

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

81% match

Loading thumbnail…

ver2 Earthquake Scatter Plot

This example visualizes earthquake data from the USGS all-week GeoJSON feed, plotting magnitude against time in a scatter plot. Dots are colored by depth category (shallow, intermediate, deep) using `scaleOrdinal`, with a custom color legend that dims non-hovered categories on mouseover. A `brushX` interaction highlights earthquakes within a selected time range, stroking the brushed marks in black. The chart uses D3’s `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and a ResizeObserver for responsive resizing.

Llingjizhu@gmail.com

81% match