d3 histogram

100%

✓ Published0🌍 Public

Last edited Feb 21, 2024

Created on Feb 21, 2024

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.

AI-generated description

A health histogram in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/health/

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 heatmap

This example visualizes yearly infection counts for US states from 1970 to 1980 using a heatmap. Cells are colored on a red scale, with darker shades representing higher infection numbers, and hover interactions reveal a tooltip with state, year, and exact count. The visualization uses d3.csv to load data, appends SVG text elements for labels and legend, and creates colored rect elements for each data point. The tooltip is positioned with event.pageX and event.pageY, while the legend is drawn manually with a loop generating gradient rectangles.

AAndrew

87% match

Loading thumbnail…

p5 histogram

This visualization displays a histogram of total infection counts for US states from 1970–1980, with bars representing binned data ranges up to 30,000. It uses p5.js to load a CSV dataset from a GitHub gist, render the chart on a 1000x1000 canvas, and provide interactive tooltips that appear on hover to show each bin’s range and frequency. The code draws axis labels, grid lines, and bars using p5’s `rect`, `text`, and `map` functions, with data processed via the `table.getColumn()` API.

AAndrew

86% match

Loading thumbnail…

d3 time series heatmap

This example visualizes yearly infection counts for U.S. states from 1970 to 1980 as a time series heatmap, where each cell’s color intensity reflects the number of infections. The chart uses a sequential color scale based on ColorBrewer’s OrRd palette, with a legend generated via the d3-legend plugin. Rendered as SVG, the heatmap positions state labels on the y-axis and years on the x-axis, while a custom tooltip displays state, year, and infection count on hover. The data is loaded from a CSV file using d3.csv.

AAndrew

85% match

Loading thumbnail…

d3 scatter plot

A D3 scatter plot visualizes the relationship between state population and the number of infections for diseases in the US in 1975, using a logarithmic scale on both axes. Each maroon circle represents a state-disease data point, and hovering over a circle turns it crimson and reveals a tooltip with the disease name, state, population, and infection count. The visualization uses `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft` for scaling and axes, with data loaded via `d3.csv` from a remote gist. Rendered as SVG, the plot includes labeled axes and a title, with the tooltip styled through an HTML div.

AAndrew

83% match

Loading thumbnail…

d3 bar chart

This bar chart visualizes the distribution of disease types by number of infections in 1968, using a logarithmic y-scale to accommodate wide value ranges. Built with D3 v6, it renders SVG rectangles with maroon fills that transition to crimson on hover, supported by an interactive tooltip displaying exact infection counts. The chart includes labeled axes, a title, and data simplified from the CORGIS health dataset, demonstrating the use of d3.scaleBand, d3.scaleLog, d3.axisBottom, and d3.axisLeft.

AAndrew

82% match

Loading thumbnail…

p5 strip chart

This interactive p5.js sketch displays a strip chart of yearly infection counts for US states from 1970 to 1980, using a simplified dataset derived from the CORGIS health repository. Red dots are jittered along the x-axis to reduce overplotting, with y-axis positions mapped to case numbers. The visualization includes axes, gridlines, and a hover tooltip that reveals the specific year and infection count for each point. The `preload()` function fetches CSV data via `loadTable`, while `setup()` initializes the canvas and random jitter values, and `draw()` renders the chart and handles mouse interaction.

AAndrew

77% match

Loading thumbnail…

d3 bar sequential

This example visualizes the distribution of infectious diseases in 1968 using a sequential bar chart, with each bar’s height and color intensity encoding the number of infections. The chart employs a sequential color scale based on ColorBrewer’s OrRd scheme, mapping values from 0 to 150,000, and includes a legend generated with the d3-legend library. The visualization is rendered as SVG using D3 v6, with axes, labels, and a dark background for contrast. The data, simplified from the CORGIS Global Development dataset, is loaded from a CSV file, and the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis.

AAndrew

77% match

Loading thumbnail…

p5 heatmap

This visualization displays a heatmap of yearly infection counts for US states from 1970 to 1980. It uses p5.js to render colored squares on a 1000x1000 canvas, with darker reds indicating higher infection numbers. The map includes state labels, year markers, and a color legend. Hovering over any square triggers a tooltip that reveals the exact year, location, and infection count. The data is loaded from a CSV file via the `loadTable` function, with square fill colors computed directly from the numeric infection values.

AAndrew

77% match