Skip to main content
SimilarExport ZIP
100%

A2_BarChart

✓ Published4🌍 Public
DDuc Pham
Last edited Apr 2, 2024
Created on Feb 6, 2024
Forked from HTML Starter

This bar chart visualizes the average earthquake magnitude for different countries, sorted alphabetically, with bars colored orange and highlighted green on hover. It displays a tooltip showing the country name and average magnitude when the mouse moves over a bar. The visualization is built using p5.js, loading earthquake data from a CSV file via `loadTable()`, and uses custom drawing functions like `rect()`, `line()`, and `text()` to render the chart, axes, and labels.

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 - Bar Chart with Log Scale

This bar chart displays the average earthquake magnitude per country, filtered to show only countries with an average above 3.0. It uses a base-2 logarithmic scale on the x-axis to better visualize the range of values, with bars colored orange and annotated with their exact magnitudes. The visualization is rendered using p5.js, with data loaded from a CSV file hosted on GitHub. Interactive tooltips appear on hover, and the chart also highlights the highest (Japan) and lowest (Afghanistan) averages.

DDuc Pham
89% match
Loading thumbnail…

A2_DotPlot

This dot plot visualizes the average earthquake magnitude for countries with values above 4.0, using data loaded from a CSV file via p5.js’s `loadTable`. Each dot’s color indicates whether the magnitude exceeds 4.8 (red) or falls below (orange), with Japan and Afghanistan labeled as highest and lowest. The visualization computes averages through nested loops, renders points and axes on a p5.js canvas, and includes a hover tooltip that displays country and magnitude details when the mouse moves near a dot.

DDuc Pham
86% match
Loading thumbnail…

A2_HeatMap

A heatmap visualizes earthquake magnitudes across different countries and months, with each cell color-coded to indicate impact level, where pink represents high magnitude and blue represents low magnitude. The visualization also includes a legend and tooltip that displays country, month, and magnitude details when hovering over a cell. Built with p5.js, the code loads earthquake data from a CSV file using `loadTable()` and renders rectangles via the Canvas API, using color interpolation based on magnitude values to encode severity.

DDuc Pham
82% match
Loading thumbnail…

Bar Chart

This example displays a bar chart comparing the average impact magnitude of earthquakes across different locations, highlighting that Japan has the highest average and Afghanistan the lowest. Built with the p5.js library, the visualization loads CSV data from a GitHub gist, filters locations with magnitudes above 3.0, and calculates the mean per location. Rendered on a 1000x600 canvas, it uses p5 rect() for bars, text() for labels, and line() for the axes and grid ticks, with results shown on a scale from 0.5 to 4.5.

CChandana Srinivas
79% match
Loading thumbnail…

ICE 6 Bar Chart

This bar chart displays the average impact magnitude of earthquakes across different locations, filtering for values above 3.0. It reads data from a CSV file containing earthquake records, processing it with p5.js’s `loadTable` and custom sorting logic in `setup`. The visualization uses p5.js’s `createCanvas` and drawing functions, including `rect` for bars and `text` for labels and tick marks, to plot each location’s average magnitude. Japanese and Afghan averages are highlighted directly on the chart.

MM Hema
77% match
Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes earthquake counts by magnitude range across U.S. states for selected years. A dropdown menu lets viewers switch between 2017 and 2018 data, triggering a 750ms transition that updates bar positions and total labels. Built with D3 v5, the chart uses `d3.stack()` and `d3.scaleBand()`, rendering SVG rects and text elements. Color encoding distinguishes three magnitude categories (7.0+, 6–6.9, 5–5.9), with data loaded from a CSV file via `d3.csv`.

CChristoph Diefenthal
76% match
Loading thumbnail…

Untitled

A stacked bar chart displays earthquake counts by magnitude range (7.0+, 6–6.9, 5–5.9) for six U.S. states across the years 2017 and 2018. A dropdown menu switches between years, triggering a 750ms transition that updates bar heights, axis scales, and total labels. The visualization uses D3 v5 with `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and ordinal color mapping, rendering SVG elements with animated transitions. Data is loaded from a CSV file via `d3.csv`.

Rrichad97
76% match
Loading thumbnail…

Untitled

A stacked bar chart displays earthquake magnitudes across U.S. states for selectable years, with each bar segmented by magnitude range (7.0+, 6–6.9, 5–5.9) and annotated with the total count. Users choose a year from a dropdown menu, triggering a 750ms transition that updates bar positions, heights, and axis scales. The visualization uses D3 v5, leveraging `d3.csv` for data loading, `d3.stack` for layering, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG transitions to animate changes.

SSwapna1915
75% match