Strip Chart

100%

✓ Published0🌍 Public

Last edited Feb 11, 2024

Created on Feb 11, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

79% match

Loading thumbnail…

A3_StripPlot

A strip plot displays the distribution of AI engineer salaries from a 2023 dataset, with each salary represented as a jittered dot along a horizontal axis. The chart maps salary values using p5.js functions like `map()`, `min()`, and `max()`, while random vertical offsets reduce overplotting. Salary range markers and axis labels are drawn with p5.js primitives, and the data is loaded via `loadTable()` from a CSV file hosted on GitHub.

DDuc Pham

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

78% match

Loading thumbnail…

Interactive plot

An interactive scatter plot of the salaries dataset explores relationships among academic salary, years since PhD, and years of service using React and D3. Users select X and Y axes and filter data by rank, discipline, or sex through dropdowns. Hovering over the color legend highlights points matching that category, while other points fade. The visualization uses d3.scaleLinear scales, d3.scaleOrdinal color encoding, and crossfilter for data manipulation, rendering circles via SVG.

BBizmundo

72% match

Loading thumbnail…

Interactive plot

This interactive scatter plot explores the relationship between academic salaries and career attributes. Users can select X and Y axes from among salary, years since PhD, and years of service, while a filter dropdown controls the categorical color encoding by rank, discipline, or sex. Hovering over the color legend highlights points of that category and fades others. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and SVG circles rendered from the salaries dataset.

BBizmundo

72% match

Loading thumbnail…

Strip Chart

This strip chart shows the distribution of Apple’s monthly share price from July through December 2021, with each month’s data points jittered horizontally to reveal density and spread. It loads a CSV from a GitHub gist using p5.js’s `loadTable()`, then renders points with `point()` on a 700×600 canvas. The x-axis labels months, the y-axis maps price per share, and random jitter is applied per point within each month’s column using `random()`. The code uses p5.js’s `setup()`, `draw()`, and `noLoop()` to generate the static visualization.

PPranay Matalia

71% match

Loading thumbnail…

Box Plot

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

71% match

Loading thumbnail…

CS360 A3 Strip Chart

This interactive strip chart visualizes average math GPAs across U.S. states from 2005 to 2015, with each year’s data points jittered along the x-axis to reveal distribution. The p5.js sketch loads a CSV of SAT scores, maps values to canvas coordinates, and renders blue ellipses for individual data points. Axis labels, a chart title, and rotated axis titles are drawn using p5.js text functions, while `random()` adds horizontal scatter to reduce overplotting.

EEric Yao

71% match