Skip to main content
SimilarExport ZIP
100%

Histogram with D3

✓ Published4🌍 Public
OOlha
Last edited Mar 4, 2022
Created on Feb 22, 2022
Forked from Heatmap 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.

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…

Fork of 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.

Yyuli19991001
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…

Simple bar graph in v4

A simple bar graph displays population values for California counties, loaded from an external CSV file and rendered as SVG rectangles. The chart uses d3.scaleBand for the x-axis categories and d3.scaleLinear for the y-axis, with axes generated by d3.axisBottom and d3.axisLeft. Data is parsed via d3.csv, and bars change fill color on hover through CSS. The example demonstrates core d3 v4 data binding and SVG rendering in a fixed-width layout.

MMTClass
77% match
Loading thumbnail…

d3 histogram

This visualization shows the distribution of yearly infection counts across US states from 1970 to 1980, using a histogram. The code loads CSV data from a GitHub gist, computes bins with `d3.histogram`, and renders rectangles with `d3.scaleLinear` for axes. Hovering over a bar reveals a tooltip with the bin range and count. The SVG chart displays maroon bars that turn crimson on interaction, with clear axis labels and a title.

AAndrew
76% match
Loading thumbnail…

Making a Bar Chart

This bar chart shows the population distribution across age groups (from 0-4 to 95+ years) for a given population. Using D3.js version 5, it employs `d3.scaleLinear` and `d3.scaleBand` to map population values and age categories to the x and y axes, respectively. The SVG includes axes via `d3.axisLeft` and `d3.axisBottom`, with bars rendered as `rect` elements filled in steel blue. The data is loaded from a CSV file containing country and population columns.

Ttkreglhn
75% match
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
75% match
Loading thumbnail…

Grouped Bar Chart

A grouped bar chart displays population percentages across four age groups for five San Francisco districts, with each district’s bars colored by age category and a legend identifying them. The visualization loads data from a CSV file using d3.csv, then applies d3.scale.ordinal for x-position and color encoding, d3.scale.linear for the y-axis, and d3.svg.axis to render axes with SI-prefix formatting via d3.format. Bars are drawn as SVG rectangles, with heights computed from the parsed numeric values.

LLjfernando
74% match
Loading thumbnail…

Untitled

A grouped bar chart displays population estimates for six U.S. states across seven age brackets, colored by age group via a categorical color scale. Using D3 v4, the visualization loads CSV data with `d3.csv`, employs `d3.scaleBand` and `d3.scaleLinear` for axes, and renders SVG rectangles for bars. A legend maps age ranges to colors, while axis labels and a title clarify the data. The chart is built with a `svg` element and D3’s selection, scale, and axis APIs.

Mmavercikalvin
74% match