A3_StripPlot

100%

✓ Published1🌍 Public

Last edited Feb 13, 2024

Created on Feb 13, 2024

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.

AI-generated description

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

Similar vizzes

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

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

77% match

Loading thumbnail…

A3 Strip Chart

A3 Strip Chart displays the distribution of mushroom stem widths as a scatter plot along a vertical axis, with each dot jittered horizontally to reduce overlap. The visualization reads data from a local CSV file loaded via p5.js’s `loadTable()`, then filters and sorts the values in `setup()`. Using the p5.js `createCanvas()`, `ellipse()`, and `random()` functions, it renders individual points on an 800×800 canvas with labeled tick marks and axis lines.

Ddonaldminer

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

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

71% 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…

A4_Bar-chart

This bar chart visualizes average salaries for data science job titles, loaded from a CSV file via `d3.text`. The visualization uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis to render the SVG bars. Interactive tooltips appear on mouseover, changing the bar’s fill color to orange and displaying the job title and salary. Axis labels, a chart title, and rotated x-axis text are added using D3’s axis components.

DDuc Pham

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

69% match