Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Histogram

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.

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

Histogram

This histogram visualizes the distribution of salary values in U.S. dollars from a CSV dataset loaded via a gist URL. It uses D3.js v7 with an SVG renderer to draw rectangular bars, each representing a salary range, with bar height indicating frequency. The code applies `d3.histogram()` with `xScale.ticks(20)` to bin the data, along with linear scales for both axes. Hovering highlights bars in orange, and axis labels are rotated for readability.

SSrinivasAbburi@my.unt.edu
68% match
Loading thumbnail…

histogram

This histogram visualizes the distribution of salaries from a data science salaries dataset, showing the frequency of salary values within equal-width bins. The visualization uses D3.v7 to load CSV data, compute histogram bins with the `d3.histogram` API, and render the result as SVG rectangles. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with the x-axis labels rotated for readability. The chart includes a legend and interactivity, as bars change color on hover.

AArungopal Andalam
67% match
Loading thumbnail…

Temperature in San Francisco

This scatter plot visualizes one week of temperature data in San Francisco, using circles positioned by timestamp on the x-axis and temperature on the y-axis. The chart includes labeled axes, a title, and a grid-like background created through tick lines. The visualization is built with D3 v5, using `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` to render the axes as SVG elements. Data originates from the Data Canvas - Sense Your City project.

Ppkcesar
65% match
Loading thumbnail…

Temperature in San Francisco scatter plot

This scatter plot displays a year of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, colored tomato with partial opacity to reveal overlapping points. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks. Data comes from the 2015 Sense Your City project and is loaded via `d3.csv`, with timestamps parsed as JavaScript Date objects.

BBendrog
65% 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
65% match