Simple histogram using v6

100%

Simple histogram using v6

✓ Published0🌍 Public

Last edited Sep 12, 2020

Created on Sep 12, 2020

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.

AI-generated description

This is a simple histogram written using d3.js v6.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.

mit Licensed

Similar vizzes

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

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

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

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

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

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

80% match

Loading thumbnail…

LineChart

This line chart visualizes earthquake statistics from 2000 to 2015, comparing the annual frequency of earthquakes across different magnitude ranges (5–5.9, 6–6.9, 7–7.9, and 8.0+) as four distinct colored lines. Built with D3 v5 and rendered as SVG, it uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for gridlines. Data is loaded from a CSV via `d3.csv`, with the chart including a legend and axis labels.

Ssiddu7147

78% match

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

78% match