Skip to main content
SimilarExport ZIP
100%

Histogram with D3 - Types of Tropical Cyclones

✓ Published1🌍 Public
OOlha
Last edited Apr 17, 2022
Created on Apr 7, 2022
Forked from Histogram with D3

This histogram shows the frequency of different types of tropical cyclones recorded between 1950 and 2015. The data, loaded from a CSV file using `d3.csv`, is mapped with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the count on the y-axis. SVG rectangles are rendered with tooltips that appear on mouseenter using `d3.select` and are removed on mouseleave. Axis functions `d3.axisBottom` and `d3.axisLeft` format the chart.

AI-generated description

Final Project: Types of Tropical Cyclones

Histogram inspired by https://www.d3-graph-gallery.com/graph/histogram_tooltip.html and by documentation https://github.com/d3/d3/blob/main/API.md

MIT Licensed

Similar vizzes

Loading thumbnail…

Histogram D3

This histogram displays the distribution of average daily temperatures recorded throughout 2016, with bars colored green that turn red on hover. Built with D3 v6, the visualization loads CSV data via `d3.csv`, computes bin counts using `d3.histogram()`, and scales the axes with `d3.scaleLinear()`. The SVG rendering includes axis generators (`d3.axisBottom` and `d3.axisLeft`), interactive tooltips via appended `title` elements, and explicit margins for layout. The code demonstrates a straightforward binning workflow from raw weather data to a readable chart.

AAllen Ho
72% match
Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of one numeric variable using data loaded from a CSV file. Built with D3 v7, it renders bars as SVG rectangles, with the x-axis scaled linearly and the y-axis representing bin counts. The chart updates responsively on window resize, recalculating the histogram with 40 thresholds to accommodate the new width. Data is fetched from the `data_to_viz` GitHub repository.

Aarjun-lab663
70% match
Loading thumbnail…

2010

This horizontal bar chart shows the frequency of tornadoes per month in 2010, sourced from a local CSV file. It uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position bars. The axes are customized with `axisBottom` and `axisLeft`, including a tick format that abbreviates large numbers, while gridlines and axis labels are manually styled.

Vvaideheeshah13
69% match
Loading thumbnail…

A7 - Heatmap in D3

This heatmap visualizes the frequency of tropical storms in the Atlantic from 1995 to 2019, with years on the x-axis, storm names on the y-axis, and color intensity indicating frequency. It uses D3 v6 to construct an SVG heatmap, reading data from a CSV file and applying the Inferno color scale. Tooltips display exact frequencies on hover, while a gradient legend clarifies the color mapping. The chart includes axis labels and a title, making the distribution of storm activity over time and by storm type readily apparent.

RRiya Mathur
69% match
Loading thumbnail…

Histogram

This histogram displays the distribution of a selected weather-related column, such as temperature, from a San Francisco weather dataset. The chart updates with smooth transitions when a different input column is chosen from a dropdown menu or when the bin count is adjusted via the number input. Built with React and D3 v5, it renders as SVG and uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`. Interactive tooltips highlight each bar and show its class range and frequency on mouseover.

SSchmittYannic
69% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Mmbostock
68% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of a dataset using interactive bars, rendered with React and D3. It shows the frequency of data points across numeric bins, with hover effects highlighting individual bars. The code uses `d3.histogram` to compute bin ranges and `d3.scaleLinear` for positioning, while SVG paths are generated via `d3.area` for the bar shapes. The chart dynamically updates based on user-selected bin counts, demonstrating a reusable React component pattern. The underlying data is random-generated, and the styling relies on plain CSS defined in the linked stylesheet.

RRiya Mathur
68% 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
68% match