Fork of A5_BubbleChart

100%

Fork of A5_BubbleChart

✓ Published0🌍 Public

Last edited Feb 26, 2024

Created on Feb 26, 2024

This bubble chart maps earthquake locations using longitude and latitude coordinates, with each steelblue circle representing a seismic event. The visualization plots raw geographic data points without magnitude encoding, emphasizing spatial distribution over intensity. The code uses D3 v7’s `d3.csv` for data loading and `d3.scaleLinear` with `d3.axisBottom` and `d3.axisLeft` to construct axes. SVG circles are positioned via the `xScale` and `yScale` functions, rendering the dataset from the provided external CSV file into an 800×600 pixel chart.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

LineChart Test

This visualization presents earthquake data as a bubble chart plotting longitude and latitude, with bubble size encoding earthquake magnitude and color representing the continent. It includes interactive filtering by continent through the legend, which also shows size ranges. Built with D3 v7, the code uses `d3.select`, `d3.scaleOrdinal`, and `d3.scaleLinear` to render circles in an SVG, with a custom CSV parser for the earthquake dataset. Hovering over bubbles reveals tooltips showing magnitude and continent details.

DDuc Pham

80% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows earthquake data as a scatter plot with longitude on the x-axis and latitude on the y-axis, using blue circles to mark each seismic event. The code loads a CSV file via `d3.csv`, computes the data domain with `d3.min` and `d3.max`, and maps coordinates using `d3.scaleLinear`. The SVG is appended directly to the body, with axes and point positions created through D3 selections and SVG circle elements. The visualization runs within a React shell, although the rendering itself relies entirely on D3’s imperative API.

Ppethavenu

77% match

Loading thumbnail…

Data Visualization

This visualization displays earthquake data from a CSV file, plotting year on the x-axis, magnitude on the y-axis, and encoding depth via circle radius. The SVG scatterplot uses d3.csv to load data, then d3.scaleLinear and d3.scaleSqrt for scales, with d3.axisBottom and d3.axisLeft generating the axes. Colored steelblue circles with 0.5 opacity clearly reveal distributions of earthquake events across the recorded timeframe.

HHassaan Gul

77% match

Loading thumbnail…

EarthQuakes Bubblegraph

This visualization displays recent significant earthquakes as a bubble graph, plotting each seismic event as a circle positioned by its magnitude. The interactive map, rendered as an SVG canvas, uses mouseover events to highlight individual quakes and display their location and magnitude in a text element. Built with React and D3.v5, the code fetches live data from the USGS Earthquake API, styling each bubble with radius scaled to magnitude and colored by alert level, set against a stylized blue background.

SSreenivasulu

76% match

Loading thumbnail…

D3 - Scatterplot

This scatterplot visualizes earthquake data, plotting the significance level of earthquakes on the x-axis against their magnitude on the y-axis. Built with React and D3 v7, it renders an SVG chart with a light gray background, labeled axes, and title. The code uses `d3.csv` to load data from a GitHub Gist, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to generate ticks. Individual data points are drawn as purple circles with the `.dot` class, with the chart layout adjusted through SVG `rect`, `g`, and `line` elements.

CChandana Srinivas

75% match

Loading thumbnail…

Untitled

This example presents earthquake frequency and impact data from a CSV file across four small multiples, each plotting one magnitude bin (5.0–5.9, 6.0–6.9, 7.0–7.9, 8.0+) against time. The charts share a linear y-axis for quake counts, with point size encoding estimated deaths via a square-root scale. The code uses D3 v5 to parse the data, create time and linear scales, and render SVG axes and symbols for each subset. Circle, triangle, diamond, and square shapes distinguish the magnitude categories across the four linked views.

Ddarshue

74% match

Loading thumbnail…

Fork of Bubbles with Json Data

This visualization displays a bubble chart built from JSON data, with each circle representing a person and sized according to a numeric value. The bubbles are labeled with truncated names and monetary amounts, and clicking one triggers a process load. The code uses d3.pack for hierarchical layout, d3.hierarchy for data structuring, and D3 selections to append SVG circles and text. The visualization is rendered in a React framework with SVG, using the d3.v5 library.

Yyeeet0421

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

74% match