P5js Dotplots

100%

✓ Published1🌍 Public

Last edited Feb 15, 2022

Created on Feb 8, 2022

This example shows the average horsepower of six German car brands as dot plots, with each brand’s value represented by a steelblue circle on a grid. The brands are listed vertically on the left, while the horizontal axis is labeled from 50 to 500 horsepower. The p5.js sketch loads data from a CSV file using `loadTable()`, then in `draw()` it renders the grid lines, labels, and circles based on the parsed values. The code uses p5.js 1.4.0, including the canvas API and text and shape functions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

P5js Dotplot

This dot plot compares the average horsepower of top German car brands, showing values like Porsche’s 512.5 and Volkswagen’s 192.5. The p5.js sketch renders steel-blue circles for each brand’s data point on a grey grid with labeled axes. It loads the CSV dataset via `loadTable`, then uses `circle` and `text` to draw the visualization, with rotated labels for the y-axis title.

Vvishusikka

93% match

Loading thumbnail…

P5js Barchart

This bar chart displays the average horsepower for six German car brands, visually sorted by the highest-performing manufacturers. The visualization uses p5.js, creating a canvas that renders brand labels, a grid with axis lines, and colored rectangular bars drawn with the `rect()` function. Horsepower values are loaded from a CSV file using `loadTable()` and mapped to bar widths, while a rotated text label identifies the dataset. The rendering is static within the `draw()` loop, using grid lines and tick marks to establish the numeric scale.

Ddriftcafe

88% match

Loading thumbnail…

P5js Barchart

This bar chart displays the average horsepower of top German car brands, including Porsche, Mercedes-AMG, and BMW, with values read from a CSV file. The visualization uses the p5.js library, loading data via the `loadTable` function and rendering bars with the `rect` API on a canvas. A horizontal grid with labeled tick marks aids comparison, and brand names are rotated vertically on the left axis. The chart’s color scheme uses muted green bars against a light gray background.

Vvishusikka

84% match

Loading thumbnail…

P5js Heatmap big test

This p5.js example displays a small heatmap comparing horsepower and MPG across six car brands, with green cells indicating higher values and orange indicating lower values. It loads data from a CSV file using the p5.js `loadTable` function, then renders colored squares via the `square()` canvas API. The `heatMapColorforValue()` function maps each numeric value to a hue range using p5.js `map()`, while the table’s Max and Min rows drive the color scaling for both columns.

Ddriftcafe

81% match

Loading thumbnail…

Fork of P5js Heatmap

This fork of a P5.js heatmap visualizes the relationship between car brand, horsepower, and MPG for six manufacturers. The sketch loads a CSV file from a GitHub gist and renders a 2-column grid of colored squares, where each square's hue is mapped from the minimum to maximum values for each metric. Using the p5.js `loadTable` API, it colorizes data points from green (higher values) to orange (lower values), and includes a legend explaining the gradient. The visualization highlights how Porsche and Mercedes-AMG prioritize horsepower while Volkswagen optimizes fuel efficiency.

TTushar Upadhyay

80% match

Loading thumbnail…

P5js Heatmap

This p5.js heatmap visualizes the relationship between car brands and two metrics, Horsepower and MPG, using a color-coded grid. The color of each cell transitions from orange (lower values) to green (higher values) based on the data's minimum and maximum. Built with the p5.js library, the visualization loads CSV data from a Gist, calculates color values using the `map()` function, and renders the results as colored squares. The chart includes labels for the axes and a color legend indicating green for higher and orange for lower values.

Vvishusikka

78% match

Loading thumbnail…

Scatter plot

This scatter plot displays the relationship between average horsepower and average torque for various German car brands. Each circle represents a brand, positioned along the axes and colored by manufacturer using a D3 ordinal color scale. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.select to build the SVG. Hovering reveals a tooltip with exact values, generated via d3.csv and event handlers. Data comes from the CSV file `stripechart1.csv`.

Pprateekvasi

78% match

Loading thumbnail…

p5.js.boxplot

This p5.js visualization shows a boxplot of car engine horsepower across different models from 2009–2012, using data from the CORGIS cars dataset. The sketch loads a CSV via `loadTable()` in `preload()`, then calculates the minimum, quartiles, median, and maximum values from the horsepower column. It draws tick marks, axis labels, and statistical summary annotations using p5.js canvas API functions like `line()`, `rect()`, and `text()`. The dark background and white strokes highlight the distribution of horsepower in the sample.

EEunice Tu

77% match