histogram

100%

✓ Published0🌍 Public

Last edited Mar 16, 2017

Created on Mar 13, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

81% match

Loading thumbnail…

fresh block

This example shows a bar chart of earthquake magnitudes over time, using data fetched from the USGS earthquake feed. A bar is drawn for each recorded earthquake, with its height corresponding to the magnitude value. The visualization is built with D3 v4, using `d3.scaleBand` for the x-axis time categories, `d3.scaleLinear` for the y-axis magnitude range, and SVG rectangles styled with a steelblue fill. The axes are rendered via `d3.axisBottom` and `d3.axisLeft`.

MMTClass

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

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

79% match

Loading thumbnail…

d3NoobV5 Reusable Examples - Histogram

This example shows a reusable histogram of earthquake magnitudes, with time on the x-axis and the count of earthquakes per month on the y-axis. The chart is built with D3 v5, using `d3.histogram` to bin the data and `d3.scaleTime` and `d3.scaleLinear` for the axes. It renders as SVG, with bars styled in steelblue. The code is structured using Mike Bostock’s reusable chart pattern and the Pro D3.js modular template, with data loaded from the included `earthquake.csv` file.

JJimMaltby

79% match

Loading thumbnail…

D3-Histogram

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.

CChandana Srinivas

78% match