Fork of D3-Histogram

100%

Fork of D3-Histogram

✓ Published0🌍 Public

Last edited Feb 21, 2024

Created on Feb 21, 2024

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`.

AI-generated description

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

Similar vizzes

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

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

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

80% match

Loading thumbnail…

Fork of React Starter

This example shows a time-series histogram of earthquake dates, with monthly bins displayed as bars whose heights represent the number of earthquakes per month. The visualization uses D3’s `d3.histogram`, `d3.scaleTime`, and `d3.axisBottom`/`d3.axisLeft` to aggregate and render the data, which is loaded from an external CSV file. The SVG output is appended directly to the body, while React is imported but not used for rendering, leaving the initial starter code commented out.

Ffloresh

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

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

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

77% match