Dot Plot

100%

✓ Published0🌍 Public

Last edited Feb 5, 2022

Created on Feb 4, 2022

This dot plot visualizes average chocolate ratings by company location, filtering to show only locations with ratings above 3.0. It uses p5.js to load a CSV dataset via `loadTable()`, compute averages, and render the plot on a canvas. Each row displays a location name and its corresponding average rating, with points positioned horizontally based on a transformed rating value using exponentiation. The chart includes axis lines and tick marks, with text labels drawn for each data point.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Dot Plot

A dot plot visualizes the average impact magnitude of earthquakes across different locations, filtering to show only those with magnitudes above 4.0 and highlighting the highest values in black. The p5.js sketch loads earthquake data from a CSV file, computes averages per location, and renders labeled dots along a scaled axis in a canvas. It uses `createCanvas`, `loadTable`, and `point` to draw the plot, with horizontal grid lines and tick marks for magnitude values ranging from 4.0 to 5.0.

CChandana Srinivas

77% match

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of company ratings, with each slice representing a company and its corresponding rating value. The visualization uses D3.v5 and React to render an SVG-based pie chart, where colors are assigned through `d3.scaleOrdinal` and the arc segments are created using `d3.arc`. The data is loaded from a CSV file hosted on GitHub, and legends with company names and rating values appear on the right side, generated through D3's `select` API.

DDineshK2602

72% match

Loading thumbnail…

Scatterplot Chocolate Data

This scatterplot visualizes chocolate data, plotting the count of ingredients against cocoa percentage. Each brown, semi-transparent circle represents a chocolate bar, with its position determined by these two variables. The visualization is built using D3 version 6, leveraging functions like `csv` for data loading, `scaleLinear` for scaling axes, and `axisLeft` and `axisBottom` for generating the axes. The plot renders as an SVG, sized to fill the browser window, and uses data from a raw CSV file hosted on GitHub.

LLeah Mitchell

70% match

Loading thumbnail…

Scatterplot_restaurant

This scatter plot visualizes the relationship between restaurant ratings and total review counts. Each circle represents a restaurant, positioned by its rating on the x-axis and total reviews on the y-axis, with a warm fill color against a blue background. Built using React and D3 v6, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear` for both axes, and renders circles as SVG elements. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with labels rotated for the y-axis.

Bbhavana.bayyapu@gmail.com

70% match

Loading thumbnail…

D3 Scatter Plot of Flavors Of Cocoa showing CocaoPercent (X) vs. Rating (Y)

A D3 scatter plot visualizes the relationship between cocoa percentage and flavor rating for chocolate bars, with each circle representing a sample. The x-axis maps the cocoa percentage while the y-axis shows the ratings, revealing potential correlations. Built with d3.v6, the code uses d3.csv for data loading, d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.axisLeft/axisBottom for rendering. Data comes from the FlavorsOfCacao.csv dataset, rendered as SVG circles sized with a fixed radius of five pixels.

TT-Reiser

70% match

Loading thumbnail…

dotPlot

This dot plot visualizes carbon intensity (gCO2/kWh) for 2020 across multiple countries, with each circle representing a data point positioned along the y-axis based on its value. The chart includes labeled axes, tick marks, grid lines, and a rotated axis title indicating the measured metric. The visualization is built using p5.js, loading data from a CSV file via `loadTable()` and rendering circles with the `circle()` function. Data is processed from the `powerData.csv` source, with countries listed on the x-axis and carbon intensity values plotted vertically.

Hhollyjpotter

70% match

Loading thumbnail…

Dot Plot

This dot plot visualizes the ages of billionaires, with each green dot representing one individual’s age along the y-axis and their sequential index on the x-axis. The p5.js sketch loads a CSV dataset in `preload()` using `loadTable`, filters out zero-age entries, then renders axes, tick marks, and axis labels in `draw()`. It uses `map()` to scale data points, `ellipse()` for the dots, and `line()` for the chart framework, all within a 900x600 canvas.

RRiya Mathur

69% 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

69% match