Skip to main content
SimilarExport ZIP
100%

Histogram

✓ Published0🌍 Public
DDominic Fernandez
Last edited Feb 11, 2022
Created on Feb 11, 2022
Forked from HTML Starter

This histogram displays the distribution of base pay for San Francisco city employees from 2011 to 2014, using p5.js to load a CSV dataset and render the visualization on an HTML canvas. The code processes the data into bins of $25,000 increments, calculates frequency counts, and scales bar heights proportionally to the count axis. Axes with labeled intervals and value labels are drawn using p5.js drawing functions, with salary values formatted in a compact "k" notation for readability.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Histogram - Distribution of TC in SF (2011-2014)

This example visualizes the distribution of total compensation for San Francisco city employees from 2011 to 2014, using a histogram with bins of $50,000. The chart displays the number of people in each compensation range along the y-axis, with axis labels and formatted tick marks. Built with the p5.js library, it loads salary data from a CSV file hosted on GitHub, processes the records to compute bin counts, and draws the histogram with custom scaling and axis rendering. The dataset is sourced from Kaggle’s SF Salaries collection.

DDominic Fernandez
85% match
Loading thumbnail…

Box Plot - Distribution of Base Salary in SF (2011-2014)

This visualization uses box plots to show the distribution of mean annual base salaries across salary ranges for San Francisco municipal employees from 2011 to 2014. The p5.js canvas organizes data into $50,000 bins along the x-axis, with each box displaying quartiles, minimum, and maximum values. A toggle button reveals or hides median markers across the plot. The data is loaded from a Kaggle-hosted CSV, and the code computes quartiles and bins using custom array-processing functions.

DDominic Fernandez
84% match
Loading thumbnail…

Strip Chart - Distribution of Overtime Earnings per Year in San Francisco (2011-2014)

This strip chart shows the distribution of overtime earnings for San Francisco employees from 2011 to 2014, with each year plotted as a separate column of jittered dots. The p5.js sketch loads salary data from a CSV file and randomly positions points horizontally within each year’s bin to reveal density while maintaining the y-axis scale for earnings in dollars. Axis ticks and labels are drawn manually using p5’s line and text functions, with earnings formatted in thousands. The chart uses a Bootstrap spinner to indicate loading of the large dataset.

DDominic Fernandez
78% match
Loading thumbnail…

Histogram

This example displays a histogram of median salaries for recent graduates, using a dark background with light blue bars to visualize frequency distribution across 20 salary bins. The p5.js sketch loads CSV data from a GitHub gist, processes the salary column, and generates the chart on an HTML canvas. It includes labeled axes, gridlines for frequency, and animated rendering through setup and draw functions. The code uses p5.js’s loadTable, map, and rect APIs, with custom binning logic to exclude zero values.

RRiya Mathur
77% match
Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of median salaries for recent graduates, based on data loaded from a CSV file. Built with the p5.js library, it processes the salary column, filters out zero values, and groups the data into 20 bins. The sketch calculates bin widths and frequencies, then renders the bars on a canvas with gridlines and labeled axes, using p5.js functions like `loadTable`, `createCanvas`, `map`, and `rect` to display the chart.

RRiya Mathur
76% 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
69% 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
67% match
Loading thumbnail…

Histogram

This histogram displays the distribution of a numeric variable (price) from a CSV dataset loaded from a GitHub repository. The visualization uses D3.js v7 with an SVG rendering approach, where the `d3.histogram()` API computes the binning and thresholds, and axis scales are created with `d3.scaleLinear()`. Bars are appended as SVG rectangles, and the chart is responsive, redrawing on window resize with a debounce function. The design uses a dark background with steelblue bars.

DDattatrayPatil73076
67% match