Skip to main content
SimilarExport ZIP
100%

A2 Bar graph

✓ Published0🌍 Public
Ddonaldminer
Last edited Feb 8, 2022
Created on Feb 7, 2022
Forked from HTML Starter

This visualization displays the number of poisonous mushrooms across different families, using horizontal yellow bars on a gray canvas. The p5.js code loads a CSV dataset from a GitHub gist, processes it with a p5.TypedDict to count occurrences, and renders each family name as a label with a proportional bar. A scaled axis below the bars marks count values with tick lines. The algorithm tracks the maximum count to scale the chart appropriately.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A4 Bar Chart

This example visualizes the number of inedible mushrooms across various families using a horizontal bar chart. The chart is rendered with SVG and leverages D3 v6’s `d3.csv`, `d3.rollups`, and scale functions like `d3.scaleLinear` and `d3.scaleBand`. Data is loaded from a CSV file hosted on GitHub, and the code filters counts for poisonous classes before mapping them to bar widths. The chart includes axes generated by `d3.axisBottom` and `d3.axisLeft`, with bars styled in a green fill.

Ddonaldminer
87% match
Loading thumbnail…

A3 Histogram

This visualization displays the distribution of mushroom cap diameters from a CSV dataset, using a bar chart where each bar represents the log-scaled count of caps within a 5-centimeter bin. The p5.js TypedDict stores counts per diameter, while the canvas renders grid lines, axis labels, and colored bars. The code loads data via `loadTable` from a GitHub Gist and uses `log` to compress the y-axis values, with a legend and header text clarifying the measurement units.

Ddonaldminer
79% match
Loading thumbnail…

A2 Heatmap

This heatmap visualizes the distribution of various mushroom species across eight habitat types—grasses, leaves, meadows, paths, heaths, urban, waste, and woods—and four seasons (spring, summer, autumn, winter). Each cell’s color intensity reflects the number of species recorded in that habitat-season combination, with data loaded from a CSV file. The visualization uses the p5.js library to create a canvas, process the tabular data with a `TypedDict`, and render colored rectangles via `lerpColor` to map species counts to a purple gradient.

Ddonaldminer
75% match
Loading thumbnail…

A2 Dot Plot

This dot plot compares the number of mushroom species found in eight different habitats, including woods, grasses, leaves, meadows, heaths, paths, urban, and waste areas. The visualization displays a single dot for each habitat along a logarithmic x-axis, using a log base of 1.5 to manage the wide range of species counts. The plot is built with p5.js, using its `createCanvas` and `ellipse` functions, and pulls data from a CSV file hosted on GitHub. Habitat names are displayed on the left, with the transformed log values plotted along the bottom axis.

Ddonaldminer
74% match
Loading thumbnail…

A3 Box Plot

This example visualizes the distribution of mushroom stem lengths using a box plot. It displays the minimum, maximum, median, and interquartile range of the dataset, which is loaded from a CSV file. The visualization is built with the p5.js library, using its `createCanvas`, `loadTable`, `sort`, and drawing functions. Data is processed by computing quartiles and the median, then rendered as a vertical line for range, a rectangle for the interquartile range, and a line for the median on a 500×500 canvas with custom axis labels.

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

Fork of A4_Bar-chart

This fork of A4_Bar-chart visualizes fruit sizes as a bar chart. The SVG bars are rendered using D3’s `scaleBand` and `scaleLinear`, with a `mouseover` handler that turns a bar orange and shows a tooltip. Data is fetched from a GitHub gist and parsed from CSV text. The chart includes rotated x-axis labels and axis titles labeled "FRUITS" and "SIZE". Built with React but uses vanilla D3 for SVG layout and interactions.

Mmounishnaidu96@gmail.com
67% match
Loading thumbnail…

A2 - Visualizing Amounts using P5js

This example presents four P5.js visualizations of amounts: a bar chart, a dot plot, a heatmap, and a bar chart with a logarithmic scale. It uses the P5.js library for drawing and rendering. Each chart is embedded via VizHub links on a plain HTML page. The code demonstrates different approaches for encoding quantitative values, including rectangular bars, circles, color intensity in a grid, and a log-transformed axis for data with wide ranges.

DDuc Pham
67% match