D3-Histogram

100%

✓ Published1🌍 Public

Last edited Feb 21, 2024

Created on Feb 21, 2024

This visualization displays the frequency distribution of earthquake impact magnitudes in Hawaii using a histogram. The chart, rendered with SVG, plots impact magnitude on the x-axis and earthquake count on the y-axis. It loads data from a CSV file via d3.csv and uses `d3.histogram()` with `x.ticks(10)` to bin the values. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with bar heights scaled by a linear `d3.scaleLinear` for the y-axis. The code is built with D3 v6 and embedded in a plain HTML page.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of D3-Histogram

This example presents a histogram of earthquake impact magnitudes in Hawaii, using a bar chart to display the frequency distribution across magnitude bins. The chart includes labeled axes for impact magnitude and earthquake count, with a title indicating the dataset’s subject. Built with D3 v6 and React, the visualization loads CSV data via `d3.csv`, computes bins using `d3.histogram`, scales positions with `d3.scaleLinear`, and renders SVG rectangles styled with a teal fill. Axes are generated through `d3.axisBottom` and `d3.axisLeft`.

Aatifroome@gmail.com

93% match

Loading thumbnail…

Histogram

This visualization displays the frequency of earthquake impact magnitudes from 2016 as a histogram, with seven bins covering ranges from 0-0.9 up to 6-6.9. The p5.js library loads CSV data from a GitHub gist, parses the "impact magnitude" column, and counts values into bins. The draw loop renders axes, gridlines, and interactive bars using p5.js `rect()` and `text()` functions, showing the count when hovering over each bar. The chart includes labeled axes for frequency and magnitude ranges.

CChandana Srinivas

81% match

Loading thumbnail…

Simple histogram using v6

This histogram displays the distribution of earthquake magnitudes over two years, with the frequency of recorded values binned by month. The chart uses a time-scaled x-axis and a linear y-axis representing bin counts. Built with D3 v6, the code loads earthquake data from a CSV, parses dates with `d3.timeParse`, and applies `d3.bin` with monthly thresholds to group the values. Bars are rendered as SVG rectangles, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The data is sourced from a local `earthquakes.csv` file.

Dd3noob

80% match

Loading thumbnail…

Simple histogram using v4

This histogram visualizes the frequency of earthquake magnitudes recorded in a CSV file, binning dates into monthly intervals. The chart uses D3 v4’s `d3.histogram()` and `d3.scaleTime()` to group data, with bars styled in steel blue via SVG. Axes are generated using `d3.axisBottom()` and `d3.axisLeft()`. The example demonstrates D3’s data-binding methods like `selectAll().data().enter().append()`, and the dataset is parsed with `d3.timeParse()`.

Dd3noob

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

79% match

Loading thumbnail…

Simple histogram using v7

A monthly histogram of earthquake magnitudes from a CSV file displays the distribution of seismic events over time, with bars showing the number of occurrences per month. The visualization uses d3.bin and d3.scaleTime to group the parsed date values into monthly thresholds, while d3.scaleLinear maps the counts to bar heights. Rendered as SVG rectangles with axes generated by d3.axisBottom and d3.axisLeft, the chart handles data loading via d3.csv and time parsing with d3.timeParse.

Dd3noob

79% match

Loading thumbnail…

Simple histogram using v5

This histogram displays the frequency of earthquake magnitudes recorded in the `earthquakes.csv` dataset, binned by month. Using d3.v5, it parses dates with `d3.timeParse`, applies the `d3.histogram` API with monthly thresholds set via `x.ticks(d3.timeMonth)`, and renders the bins as SVG rectangles. The x-axis uses `d3.scaleTime`, while the y-axis is scaled with `d3.scaleLinear`. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

78% match

Loading thumbnail…

histogram

A bar chart displays earthquake depths over time from the USGS weekly feed. The SVG rendering uses d3.scaleBand for the time axis and d3.scaleLinear for the depth axis, mapping each record's time string to a categorical bar position. The code fetches CSV data with d3.csv, parses timestamps via d3.utcParse, and applies the d3.axisBottom and d3.axisLeft APIs to annotate the chart. Red bars represent the depth values for each earthquake event.

MMTClass

78% match