Skip to main content
SimilarExport ZIP
100%

A2 Dot Plot

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

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
81% match
Loading thumbnail…

A2 Bar graph

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.

Ddonaldminer
74% 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
72% 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
69% 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
69% match
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
67% match
Loading thumbnail…

CS360 A2 Dot Plot

This example renders a dot plot using React and D3, displaying individual data points as circles positioned along axes. The visualization leverages d3-scale for mapping data values to pixel coordinates and d3-axis to generate tick marks and labels. Data is drawn as SVG circles via React’s declarative rendering, with the framework managing state and updates. The plot’s design emphasizes simple, clear encoding of quantitative values, suitable for comparing distributions or categories. The underlying data structure is not specified, but the code follows a standard React starter template.

EEric Yao
65% match
Loading thumbnail…

Interactive Forest Plot (Single File)

This interactive forest plot displays study-level effect sizes and pooled summaries from a metadata JSON file, using a logarithmic odds-ratio scale. Built with React hooks and D3 v6, the visualization renders SVG marks including heterogeneity bands, square markers sized by study weight, and polygons for pooled estimates. Hover cards on each study row use CSS opacity transitions, while d3.scaleLog, d3.scalePoint, and d3.scaleLinear manage spatial encodings. The chart loads external data via d3.json and updates state asynchronously.

WWaseem Medhat
65% match