A2 - Bar Chart with Log Scale

100%

A2 - Bar Chart with Log Scale

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

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.

AI-generated description

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

Similar vizzes

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

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

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

84% 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…

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

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

74% match

Loading thumbnail…

Untitled

A stacked bar chart displays earthquake counts by magnitude range for individual U.S. states across two years. A dropdown menu lets viewers switch between 2017 and 2018, triggering a smooth 750-millisecond transition that updates bar heights, positions, and axis scales. The visualization uses D3 v5 with SVG rendering, employing d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to map the year, state, and three magnitude categories from a CSV file. Total counts appear as text labels above each bar.

JJens Grochtdreis

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

73% match