Dot Plot with p5.js

100%

Dot Plot with p5.js

✓ Published0🌍 Public

Last edited Dec 5, 2022

Created on Feb 8, 2022

This dot plot visualizes ticket sales for the “Movie of the Year” from 1995 to 2021, with each green circle positioned along a horizontal axis scaled in millions and labeled by year. The example uses the p5.js library within a React framework, loading CSV data via the `loadTable()` API and rendering circles with `circle()`. Grid lines, axis labels, and movie titles are drawn using canvas drawing methods, while the data source is fetched from a GitHub Gist URL.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Log Scale with p5.js

This example visualizes ticket sales for the movie of the year from 1995 to 2021 using a logarithmic scale, with data loaded from a CSV file. It uses p5.js for canvas rendering and map data points as green circles positioned along the x-axis based on logarithmic calculations of sales figures. The visualization includes labeled tick marks and grid lines to indicate magnitudes from 1 million to 1 billion, with the log scale enabling compact representation of a wide value range.

OOlha

81% match

Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the relationship between ticket sales and income for movies from 1995 to 2021. Each circle represents a movie, with its horizontal position mapped to income and vertical position to tickets sold. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load the data from a GitHub Gist. Seagreen circles are joined to the data using `selectAll` and `.join("circle")`, with title and axis labels added as SVG text elements.

OOlha

77% match

Loading thumbnail…

Bar Chart p5.js

This bar chart displays the most successful film distributors by movie count from 1995 to 2021. It loads CSV data from a GitHub raw URL using p5.js’s `loadTable` in `preload()`, then renders bars with `rect()` and text labels in `draw()`. The chart includes grid lines, axis labels, and a title, all drawn directly on a 500×350 canvas created with `createCanvas`. The data source is visible as a remote CSV file, and the visualization uses static, hard-coded tick positions rather than dynamic scaling.

OOlha

77% match

Loading thumbnail…

Bar Chart with p5.js

This p5.js bar chart displays the most successful film distributors from 1995 to 2021, ordered by the number of movies they distributed. The visualization uses a classic bar-and-axis layout, with distributor names on the y-axis and a count scale on the x-axis. It loads CSV data via the `loadTable()` function from a GitHub repository, then renders the chart using `rect()` and `text()` calls within the `draw()` loop. The chart includes gray gridlines, axis labels, and a blue fill for the bars, highlighting the quantitative ranking.

OOlha

76% match

Loading thumbnail…

Dot Plot

This dot plot displays the metric sales data for video game publishers from 2003 to 2009, using a circle for each publisher’s sales value. The visualization is built with the p5.js library, loading a CSV dataset via `loadTable` and rendering the plot with `circle` and `text` functions. Data is sourced from a GitHub-hosted CSV file based on the Corgis video game dataset, which was modified for this example. The chart labels the axes and includes a title, with a dark background and blue circles representing sales figures.

AAllen Jake Polintan

74% match

Loading thumbnail…

as3_c1_p5.js

This example visualizes the distribution of MPAA ratings from a movie dataset using p5.js. It loads CSV data from a GitHub gist in `preload()`, counts occurrences of each rating in `setup()`, and renders vertical bar charts on a canvas. The sketch draws grid lines, axis labels, and colored rectangles for each rating value, with text annotations for counts and categories. The bars are positioned manually using numeric calculations rather than a charting library, with axes drawn using p5.js primitives like `line()`, `rect()`, and `text()`.

OOlha

73% match

Loading thumbnail…

P5 Dot Plot

This example visualizes natural gas prices in the industrial sector from 1961 to 2016 using a dot plot. Each dot represents a sampled year, positioned horizontally by price and vertically by time, with labels for both the year and price value. The code uses the p5.js library, loading CSV data from a GitHub repository via `loadTable`, then rendering points, text, and axis lines on a 600x500 canvas. The plot includes a labeled x-axis for price increments and annotations for the most and least expensive years.

Mmariahdiaz

72% match

Loading thumbnail…

Scatter Plot

This scatter plot displays movie titles against their release years, using D3 v5 with SVG rendering. The visualization is built with d3.scaleLinear for both axes, d3.extent to compute domains, and d3.axisLeft/axisBottom for tick marks, with data loaded from a semicolon-delimited CSV. Circles of radius 15 are positioned via d3.csv, with the x-axis formatted using d3.format to abbreviate large numbers. The chart includes axis labels and a title, styled through external CSS.

DD0no

71% match