p5 dot plot

100%

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 6, 2024

This dot plot visualizes the average number of infections by disease type, using a logarithmic scale to manage wide value ranges. The visualization highlights that measles has the highest average infection count, with annotations explaining its contagious nature. Built with p5.js, the sketch loads CSV data via `loadTable()` and renders interactive tooltips on hover, which display the exact infection numbers for each disease. The chart includes labeled axes, grid lines, and a custom color scheme on a dark background.

AI-generated description

A dot plot of Average Number of Infections by Disease.

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/health/

MIT Licensed

Similar vizzes

Loading thumbnail…

p5 bar chart

This p5.js bar chart visualizes the distribution of diseases from a simplified 1968 health dataset. It shows infection counts for various diseases, highlighting the lower number of Measles cases due to the introduction of the vaccine in 1963. The chart uses a dark background, axes, and labels, with interactive tooltips that appear on hover for each bar. The tooltip displays the disease name and its total infection count, implemented using the p5.js `loadTable` function and mouse-position checks via a custom `isMouseOverTooltip` function.

AAndrew

83% match

Loading thumbnail…

p5 box plot

This p5.js visualization displays a box plot of infection counts across US states from 1970 to 1980, using a dark-themed canvas. It renders the box, whiskers, median line, and outlier points from a CSV dataset, with axis labels and gridlines. The sketch implements mouseover tooltips for the box and individual outliers, showing quartile values and summary statistics. The code relies on p5.js functions like `map`, `loadTable`, and custom quantile calculations to position elements.

AAndrew

78% match

Loading thumbnail…

p5 heatmap

This visualization displays a heatmap of yearly infection counts for US states from 1970 to 1980. It uses p5.js to render colored squares on a 1000x1000 canvas, with darker reds indicating higher infection numbers. The map includes state labels, year markers, and a color legend. Hovering over any square triggers a tooltip that reveals the exact year, location, and infection count. The data is loaded from a CSV file via the `loadTable` function, with square fill colors computed directly from the numeric infection values.

AAndrew

77% match

Loading thumbnail…

p5 strip chart

This interactive p5.js sketch displays a strip chart of yearly infection counts for US states from 1970 to 1980, using a simplified dataset derived from the CORGIS health repository. Red dots are jittered along the x-axis to reduce overplotting, with y-axis positions mapped to case numbers. The visualization includes axes, gridlines, and a hover tooltip that reveals the specific year and infection count for each point. The `preload()` function fetches CSV data via `loadTable`, while `setup()` initializes the canvas and random jitter values, and `draw()` renders the chart and handles mouse interaction.

AAndrew

76% match

Loading thumbnail…

p5 histogram

This visualization displays a histogram of total infection counts for US states from 1970–1980, with bars representing binned data ranges up to 30,000. It uses p5.js to load a CSV dataset from a GitHub gist, render the chart on a 1000x1000 canvas, and provide interactive tooltips that appear on hover to show each bin’s range and frequency. The code draws axis labels, grid lines, and bars using p5’s `rect`, `text`, and `map` functions, with data processed via the `table.getColumn()` API.

AAndrew

76% match

Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data

This interactive strip chart, created with p5.js, visualizes the number of infections per year for each US state from 1970 to 1980. Each dot represents a single annual record for a state, with its vertical position encoding the infection count and horizontal jitter reducing overplotting. Hovering over a dot reveals the specific year and value via a tooltip. The visualization reads data from a remote CSV file using `loadTable` and maps the numeric values to screen coordinates with the `map` function, drawing the plot within a dark-themed canvas.

TTarun Kumar Bosupally

73% match

Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes the distribution of diseases in 1968, showing the number of infections for each disease type. Built with D3 v6 and SVG, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. The dataset is loaded via `d3.csv` from a GitHub Gist URL. Interactive tooltips appear on mouseover, displaying infection counts, implemented with D3 selection and event handlers.

AAndrew

72% match

Loading thumbnail…

d3 scatter plot

A D3 scatter plot visualizes the relationship between state population and the number of infections for diseases in the US in 1975, using a logarithmic scale on both axes. Each maroon circle represents a state-disease data point, and hovering over a circle turns it crimson and reveals a tooltip with the disease name, state, population, and infection count. The visualization uses `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft` for scaling and axes, with data loaded via `d3.csv` from a remote gist. Rendered as SVG, the plot includes labeled axes and a title, with the tooltip styled through an HTML div.

AAndrew

72% match