Strip Chart

100%

✓ Published0🌍 Public

Last edited Feb 13, 2022

Created on Feb 13, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

P5 Strip Plot

This example shows a strip plot of industrial petroleum prices for New Mexico, displaying individual data points as circles along a horizontal band. The p5.js sketch loads a CSV dataset via `loadTable()`, then uses `random()` to jitter each point horizontally to reduce overlap. The y-axis is scaled to price values, with tick labels and axis lines drawn using p5.js drawing functions like `line()`, `circle()`, and `text()`. The visualization uses a fixed canvas size of 400 by 700 pixels and does not update or animate.

Mmariahdiaz

74% match

Loading thumbnail…

Strip Plot

A strip plot displays the average temperature of ten cities for each month of 2016, with each month’s ten readings jittered horizontally to reduce overplotting. The visualization uses the p5.js library, loading a CSV dataset from a GitHub Gist via the `loadTable` function, and renders circles on a canvas with hover tooltips showing exact temperature and month values. Axis labels and tick marks for temperature and month are drawn manually, with random offsets precomputed in a `randomNum` array to distribute points.

AAllen Ho

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

71% match

Loading thumbnail…

Strip Chart without Randomizer Using p5.js

This example displays Florida birth rates per 1000 people from 1988 to 2016, grouped by year as a strip chart. It loads CSV data via p5.js’s `loadTable` function, then uses nested loops to draw horizontal gridlines, axis labels, and orange points with `point()` and `strokeWeight()`. The chart sorts values within each year and maps them to a fixed y-axis scale, while the p5.js `createCanvas` and `text()` functions render the visualization and annotations.

OOlha

71% match

Loading thumbnail…

Strip Plot

This visualization uses a strip plot to display the number of earthquakes recorded across eight different locations during 2016. Built with p5.js, it loads a CSV dataset and groups earthquakes by location (e.g., Afghanistan, Alaska, Japan), plotting each month’s count as a colored point jittered horizontally along the x-axis. The y-axis encodes the earthquake count, with grid lines and labels, while each location gets a distinct color and a fixed column. The code processes the data in `setup()`, then draws the axes, labels, and points in `draw()` using p5.js functions like `point()`, `stroke()`, and `text()`.

CChandana Srinivas

71% match

Loading thumbnail…

Simple scatterplot with d3.js

This visualization combines a line graph and scatterplot to show Apple’s stock closing price over time, with data from a CSV file. The blue line connects daily price points, while small circles mark each individual observation along the series. Built with D3.js (version 3.5), it uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path, axes, and date-based x-scale. The scatterplot circles are appended via `selectAll("dot")` with explicit radius and coordinate attributes. Data parsing relies on `d3.time.format` for date conversion and linear scaling for y-values.

Dd3noob

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

70% match

Loading thumbnail…

Stock price display - Apple

This example shows the historical stock price of Apple as a line chart, with a vertical gradient stroke transitioning from red (low values) to green (high values). It includes interactive hover functionality: moving the mouse over the chart reveals a black circle marker and a text label displaying the exact price at the nearest data point. The visualization is built using D3.js v4, leverages SVG for rendering, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for axes. Data is loaded from a CSV file containing date and price columns, and the chart uses a bisector for efficient nearest-point lookup during mouse movement.

TToly

70% match