Skip to main content
SimilarExport ZIP
100%

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

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

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.

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

Strip Plot-A3

This strip plot visualizes gross earnings data from a Broadway CSV dataset, displaying individual data points as ellipses overlaid on a box plot that shows quartiles, median, and whiskers. The visualization uses p5.js to load the CSV file via loadTable, sort the earnings values, and calculate statistical measures including IQR and outlier fences. The code maps dollar amounts to canvas coordinates using the p5.js map function and draws the box plot and outlier points on a 600x400 canvas with labeled axes.

Jjrcuster@dons.usfca.edu
70% match
Loading thumbnail…

Strip Chart

This visualization displays the distribution of highest salaries for graduates using a strip chart. Individual salary values are plotted as blue points along a vertical axis, with random horizontal jitter applied to reduce overplotting. The chart is created with p5.js, loading a CSV dataset of graduate salaries and using the `loadTable`, `createCanvas`, and `ellipse` functions. Salary data is filtered, sorted, and scaled to fit the canvas height. Both the x and y axes are labeled, with the chart title displayed at the top.

RRiya Mathur
69% match
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data for San Francisco, plotted as revenue values per year with time on the x-axis. The visualization uses d3.csv to load the data, then creates scales with scaleTime and scaleLinear, renders axes via axisBottom and axisLeft, and draws the smooth curve using d3.line with curveBasis. The SVG output includes styled axis labels and a title, with a maroon stroke for the line path. The data originates from the Data Canvas - Sense Your City project.

AAkhilesh7866
68% match
Loading thumbnail…

A week in San Francisco - Scatter plot

This scatter plot visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each circle represents a data point, rendered in SVG with a steelblue fill and opacity. The code uses D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and grid lines. Data is loaded as CSV from a remote dataset, parsed into JavaScript Date objects and numeric values, then bound to circles via `selectAll` and `enter`. A rotated y-axis label and title are included for clarity.

YYedrup
68% match
Loading thumbnail…

Area Chart of San Fransisco

This area chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `area` generator with `curveBasis`, and `axisBottom`/`axisLeft` to render the smooth filled path. Data is loaded via `csv` from an external dataset, and the SVG output includes labeled axes and a title.

Hhimanshigoyal23
67% match