Fork of Dot-plot

100%

Fork of Dot-plot

✓ Published0🌍 Public

11994331347@qq.com

Last edited Mar 24, 2026

Created on Mar 24, 2026

Forked from Dot-plot

This fork of a dot-plot visualizes the fuel economy (MPG) of individual cars from a CSV dataset loaded via p5.js's `loadTable()`. Each car's brand name is labeled along the y-axis, while blue dots are positioned horizontally along the x-axis according to their MPG value, scaled against the maximum value in the dataset. The chart includes labeled axes and a title, using Canvas drawing functions like `ellipse()` and `text()` within the `draw()` loop. The rendering occurs on a tall 1800×6000 pixel canvas, showing the distribution of efficiency across vehicle models.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Dot-plot

This dot plot visualizes the fuel economy of various car models, with each dot’s horizontal position encoding miles per gallon (MPG) on a single axis. The sketch, built with p5.js, loads a CSV dataset from a GitHub Gist, scales the values against the maximum MPG, and places each car’s name along the vertical axis. The chart includes axis labels, a title, and a margin-based layout, using ellipses as the primary glyphs for data points.

Mmacodiero@yahoo.com

89% match

Loading thumbnail…

Fork of Dot Plot Chart of P5 CSV Loader in CS 360

This example visualizes fuel economy (mpg) for a small set of cars, with each car represented as a horizontal bar sorted by its name, using p5.js. The sketch loads a CSV dataset of car specifications from a GitHub gist via the `loadTable()` function, then maps the economy values to bar widths on a custom-drawn axis. The chart uses `createCanvas()` and `map()` to scale the data, and truncates long car names to keep the display legible.

Hhxu51@usfca.edu

88% match

Loading thumbnail…

Fork of Dot Plot Chart of P5 CSV Loader in CS 360

This example visualizes car data from a CSV file, plotting each vehicle as a dot based on its weight (logarithmic scale on the x-axis) and fuel economy (linear scale on the y-axis). The p5.js sketch loads the data using `loadTable` in `preload()`, calculates column minimums and maximums, and renders interactive dots with tooltips showing car name, weight, and MPG on hover. Grid lines and axis labels are drawn manually. The code uses `map()` and a custom `mapLog()` function for coordinate scaling, and `createCanvas()` for a 900×700 pixel display.

Hhxu51@usfca.edu

85% match

Loading thumbnail…

Lab2 Dot Plot

This dot plot visualizes the relationship between fuel efficiency (mpg) and model name for a selection of cars, with each vehicle represented as a small circle. The visualization uses the p5.js library to create an 800x800 pixel canvas and reads its data from a CSV file hosted on GitHub. The code directly accesses the 'mpg' and 'model' columns from the loaded table, plotting each car's mpg value horizontally at fixed vertical intervals and labeling each point with its model name in black text.

PPatrick

84% match

Loading thumbnail…

dot Plot

This dot plot visualizes the average fuel economy (mpg) of cars by year, drawing data from a CSV file of car specifications. The visualization uses p5.js to render horizontal bands for each year, with red points positioned along a scale from 14 to 36 mpg. The code computes annual averages by aggregating individual car mpg values from the loaded table, then maps these averages to screen coordinates using a linear scale. Grid lines and labeled tick marks (16–34) provide reference points for interpreting the trend across years.

Ccwb314159@gmail.com

83% match

Loading thumbnail…

Strip Plot

This strip plot visualizes the fuel economy (mpg) of individual cars from a CSV dataset loaded via p5.js `loadTable()`. Each point is jittered vertically with random offsets to reveal data density along a horizontal axis, with min/max values and tick marks labeled. The code sorts the mpg array in increasing order, then uses p5.js `point()`, `line()`, and `text()` to render the plot on a Canvas.

Ccwb314159@gmail.com

82% match

Loading thumbnail…

Cars

This example visualizes fuel economy data from a CSV file of cars, showing each vehicle’s miles-per-gallon rating as a horizontal bar sorted by row order. The bars, drawn in yellow on a gray background, increase in length proportionally to the fuel efficiency value. The code loads the dataset using p5.js’s `loadTable` with a header row, retrieves the numeric `economy (mpg)` column, and renders the rectangles in the `draw` loop. The visualization uses the p5 canvas API with `createCanvas`, `rect`, and `fill`.

Kkmduncan2@dons.usfca.edu

80% match

Loading thumbnail…

Fork of sketch with D3

A scatter plot visualizes the relationship between car mileage and price, with points colored by fuel type (Petrol, Diesel, Hybrid, Electric). Using D3 v7, the code loads data from a CSV file via `d3.csv`, maps values to numeric types, and renders an SVG with `d3.scaleLinear` axes, `d3.axisBottom` and `d3.axisLeft` labels, and a legend built from unique fuel types. The x-axis begins at zero, while the y-axis domain is padded by 10% to improve point visibility.

BBismark Kofi Owusu Sarfo

78% match