Skip to main content
SimilarExport ZIP
100%

ICE 6 Bar Chart

✓ Published0🌍 Public
MM Hema
Last edited Mar 20, 2024
Created on Mar 20, 2024
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

ICE 6 Manasa V Jadda

This visualization displays earthquake magnitudes using a horizontal bar chart of the top 12 seismic events. The chart highlights each earthquake’s title on the y-axis and its magnitude on the x-axis, with red gridlines marking tick values. The code uses React with hooks and D3 v5’s `scaleBand`, `scaleLinear`, `csv` parsing, and SVG rendering to draw the bars. Data is loaded from a GitHub-hosted CSV file, with a basic color scheme and minimal styling.

MManasa891-git
80% match
Loading thumbnail…

ICE-6

This bar chart displays the magnitudes of earthquakes across different states in India, ranking the first 50 records from a CSV dataset. The visualization uses React for component structure and D3 v5 scales and SVG rendering to map state names to a y-axis band scale and magnitude values to an x-axis linear scale. Blue gridlines and labeled axes help compare the relative severity of seismic activity across regions, with data loaded asynchronously via D3’s `csv` function and rendered as horizontal rectangles.

Aav.dj.2000@gmail.com
80% match
Loading thumbnail…

A2_BarChart

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.

DDuc Pham
77% match
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
77% match
Loading thumbnail…

Histogram

This visualization displays the frequency of earthquake impact magnitudes from 2016 as a histogram, with seven bins covering ranges from 0-0.9 up to 6-6.9. The p5.js library loads CSV data from a GitHub gist, parses the "impact magnitude" column, and counts values into bins. The draw loop renders axes, gridlines, and interactive bars using p5.js `rect()` and `text()` functions, showing the count when hovering over each bar. The chart includes labeled axes for frequency and magnitude ranges.

CChandana Srinivas
76% 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
75% match
Loading thumbnail…

ICE-6

This bar chart displays the average height of men across 20 countries, with countries listed along the vertical axis and height values on the horizontal axis. The visualization uses React to manage the component state and D3 v5’s `csv` loader to fetch data from a GitHub-hosted CSV file, while `scaleBand` and `scaleLinear` position the bars. Blue rectangles represent the height values, and the SVG rendering approach uses custom ticks and gridlines generated with D3’s `scaleLinear` ticks method.

Ssaidhiraj16
74% match