Box Plot

100%

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

✓ Published0🌍 Public

Last edited Feb 13, 2022

Created on Feb 13, 2022

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.

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

84% 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

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…

Final Project Box Plot

This visualization presents box plots comparing salary distributions across the top ten job categories, sorted by median salary in descending order. The chart uses a horizontal layout with a linear scale for salary values and a band scale for job types, rendering each box plot with quartiles, median line, and whiskers. Interactive tooltips appear on hover, highlighting the box in orange and displaying the job type, median, minimum, and maximum salary. The implementation uses D3 v7 APIs (d3.scaleBand, d3.quantile, d3.median) within a React framework, drawing SVG shapes and axes, with data loaded from a CSV file.

DDuc Pham

72% match

Loading thumbnail…

This example visualizes the distribution of salary data as a box plot, highlighting the minimum, first quartile, median, third quartile, and maximum values using a green box with a red median line. The data is loaded from a CSV file using p5.js’s `loadTable`, then processed and sorted in `setup` before a custom `drawBoxPlot` function renders the chart on a dimmed background. The code computes quantiles via a `quantile` helper function and uses p5.js drawing commands like `rect` and `line` to construct the plot directly on the canvas.

RRiya Mathur

72% match

Loading thumbnail…

A4_BoxplotPlot

This example visualizes the salary distribution across different job types using boxplots, highlighting the minimum, maximum, median, and quartile ranges for each category. The chart is rendered as an SVG using D3 v7, with interactive hover effects that display the exact max, min, and median values as text annotations. It loads the dataset from an external CSV file containing job titles and salaries, then computes quartiles and draws rectangles, lines, and axes. The code relies on D3 scales like `d3.scaleBand` and `d3.scaleLinear`, along with statistical methods such as `d3.quantile` and `d3.median`.

DDuc Pham

70% match

Loading thumbnail…

A3_BoxPlot

This example shows a horizontal box plot of machine learning engineer salaries, displaying the minimum, first quartile, median, third quartile, and maximum salary values in USD. Built with p5.js, the visualization loads salary data from a remote CSV file, calculates statistical quantiles using a custom quantile function, and renders the box, whiskers, median line, and axis ticks directly onto an 800×600 canvas. The x-axis represents salary ranges with labeled tick marks every 25,000 USD, and the plot includes a title and axis labels.

DDuc Pham

70% match

Loading thumbnail…

Fork of Final Project Box Plot

This fork of a final project displays a horizontal box plot of salary distributions across ten job categories, sorted by median salary in descending order. The visualization uses D3 v7 to compute quartiles, medians, and whiskers from a CSV dataset, rendering the chart as an SVG. Interactive checkboxes allow users to toggle the visibility of job categories, and hovering over a box highlights it in orange while displaying a tooltip with the job title and salary statistics.

DDuc Pham

68% match