Fork of Fork of Loading and Parsing CSV Data

100%

Fork of Fork of Loading and Parsing CSV Data

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 7, 2024

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

78% match

Loading thumbnail…

Fork of Loading and Parsing COVID data

This visualization displays the total number of COVID-19 deaths in the United States, aggregated from the latest date in a time-series dataset supplied by the CSSE at Johns Hopkins University. It shows a single large text value that updates dynamically based on the data. The code uses the D3 library (d3.csv) to fetch and parse the CSV file, then applies a reduce function with a sum accumulator to calculate the total. A comma formatter from d3.format displays the result within a pre element.

CCatalina Vajiac

74% match

Loading thumbnail…

d3 histogram

This visualization shows the distribution of yearly infection counts across US states from 1970 to 1980, using a histogram. The code loads CSV data from a GitHub gist, computes bins with `d3.histogram`, and renders rectangles with `d3.scaleLinear` for axes. Hovering over a bar reveals a tooltip with the bin range and count. The SVG chart displays maroon bars that turn crimson on interaction, with clear axis labels and a title.

AAndrew

74% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV dataset of COVID-19 vaccination trends in the US, displaying a summary of the data‘s size, row count, and column count. The visualization uses d3.csv to fetch and parse the data from a GitHub Gist, then formats the statistics with d3.csvFormat. The code also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, illustrating different approaches to asynchronous data loading in D3 v5.

Ccshm407

74% match

Loading thumbnail…

d3 time series heatmap

This example visualizes yearly infection counts for U.S. states from 1970 to 1980 as a time series heatmap, where each cell’s color intensity reflects the number of infections. The chart uses a sequential color scale based on ColorBrewer’s OrRd palette, with a legend generated via the d3-legend plugin. Rendered as SVG, the heatmap positions state labels on the y-axis and years on the x-axis, while a custom tooltip displays state, year, and infection count on hover. The data is loaded from a CSV file using d3.csv.

AAndrew

73% match