Skip to main content
SimilarExport ZIP
100%

Fork of Histogram with D3

✓ Published0🌍 Public
Yyuli19991001
Last edited Nov 17, 2022
Created on Nov 17, 2022
Forked from Histogram with D3

This histogram displays birth rates per 1000 for different age groups in California for 2016, using a bar chart with an interactive tooltip that reveals the age group on hover. Built with D3 v7, it loads CSV data via `d3.csv`, maps age groups to a `d3.scaleBand` and rates to a `d3.scaleLinear`, and renders the bars as SVG rectangles. Tooltips are appended and removed dynamically using `svg.append("text")` and `d3.select("#t1").remove()` on mouseenter and mouseleave events.

AI-generated description

Assignment 4 part A+

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

data https://gist.githubusercontent.com/olga-kondr/64dc8df90513ada23e183cbb9fa1f9d4/raw/a69aa9c03948a74bb7453bdbcc7a3c70d81d9d9e/weather.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Histogram with D3

This histogram displays birth rates per 1000 residents across age groups in California for 2016, rendered as blue SVG bars. It uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for axes, and d3.axisBottom/axisLeft for ticks. Hovering over a bar appends a text label showing the age group via mouseenter/mouseleave events. The chart includes labeled axes for age and count, with a title noting the year and location.

OOlha
91% match
Loading thumbnail…

Histogram with p5.js

This example displays a histogram of birth rates per 1000 in California for 2016, with age groups on the x-axis and counts on the y-axis. The visualization uses p5.js to load a CSV dataset via `loadTable()` in `preload()`, then renders bars with `rect()` and axis labels with `text()` and `line()`. The data comes from a GitHub gist, and the sketch draws gridlines, a title, and a rotated y-axis label using canvas transforms.

OOlha
83% match
Loading thumbnail…

Fork of Histogram

This interactive histogram visualizes the distribution of price data from a CSV file hosted on GitHub. The chart is rendered as SVG and automatically resizes with the browser window. The code uses `d3.histogram()` to bin the numeric values, `d3.scaleLinear()` for the x and y axes, and `d3.csv()` to load the dataset. Bars are drawn with SVG `rect` elements, colored steelblue, with a debounced resize handler that rebuilds the visualization on window changes.

RRavi Teja Bonam
77% match
Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of weather measurements from San Francisco, with a dropdown menu to select the input column and a numeric input to adjust the number of bins. The chart uses `d3.histogram` to bin the data and `axisBottom`/`axisLeft` for axes, with SVG rendering and animated transitions on axis updates. Hovering over bars reveals class ranges and absolute frequencies via a tooltip, while the included dropdown menu and bin controls dynamically update the visualization in a React framework.

Mminson
76% match
Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of numerical weather measurements, such as temperature and humidity, from a San Francisco dataset. A dropdown menu lets users select the data column to visualize, while a numeric input controls the number of bins. Built with React and D3 v5, the chart uses `d3.histogram` to bin values and renders bars as SVG with animated transitions. Hovering over a bar highlights it and reveals a tooltip with the bin range and absolute frequency.

PPrincEddy
76% match
Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of GDP per capita data across countries from 1960 to 2019, allowing users to switch between data columns or adjust the number of bins via a dropdown menu and numeric input. Built with React and D3 v5, it uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG bars with smooth transitions, while tooltips reveal bin ranges and frequencies on hover.

TTracey
76% match
Loading thumbnail…

Fork of Histogram

This is a dark-themed, responsive histogram built with D3.js (v7) that visualizes the distribution of a single numeric variable. The chart displays the frequency of prices from the OneNum dataset, fetched via `d3.csv`, with bars rendered using SVG `rect` elements. It uses `d3.histogram()` to compute bins and `d3.scaleLinear` for x and y axes. The visualization adapts to window resizing through a debounced event listener, re-rendering the histogram with updated dimensions.

Zzjulijie0618
75% match
Loading thumbnail…

Histogram with Bins Using D3

This example shows the distribution of docked bikes across California stations in 2013, with a control to adjust the histogram’s bin count from 2 to 40 in steps of 3. The chart uses D3’s `d3.bin` (with `value`, `domain`, and `thresholds` based on `x.ticks(numBins)`) to compute bins from a CSV loaded via `d3.csv`, then renders bars as SVG `rect` elements on a linear scale. Animated transitions via D3’s `transition` API update the y-axis and bar heights when the bin number changes, while the x-axis remains fixed to the full data domain.

OOlha
75% match