Skip to main content
SimilarExport ZIP
100%

Bubble Chart

✓ Published0🌍 Public
Hhimavinaytummala@my.unt.edu
Last edited Apr 6, 2024
Created on Apr 6, 2024

This bubble chart visualizes Walmart sales data, plotting total sales against units sold for each item category, with bubble radius scaled proportionally to sales figures. The chart loads a CSV file from a GitHub gist via the Fetch API, parses the data with string manipulation, and renders using Chart.js on an HTML Canvas element. Six semi-transparent color categories distinguish the data points, while the chart's non-responsive configuration keeps dimensions fixed at 900 by 400 pixels.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

line chart

This line chart visualizes Walmart’s total sales over time, with each point representing a daily sales total plotted against the corresponding date. The chart uses the Chart.js library to render the line on an HTML5 canvas, fetching the data from a raw CSV file hosted in a GitHub gist. The code parses the CSV by splitting rows and extracting the date and sales columns, then configures the chart with a blue border and semi-transparent fill. Axis labels for date and sales are set explicitly, and the chart is displayed at a fixed size of 800 by 400 pixels.

Ssaiyogesh9911@gmail.com
81% match
Loading thumbnail…

Area chart

This example visualizes total sales over time as an area chart, using a filled line to emphasize the magnitude of sales across dates. It loads Walmart sales data from a CSV file and renders the chart on an HTML canvas via the Chart.js library, with the `fill: true` option creating the area effect. The chart displays dates on the x-axis and sales figures on the y-axis, using blue tones for the fill and border. Data is fetched asynchronously and parsed from the CSV, while the chart’s responsive mode is disabled to maintain the fixed canvas size.

Ssaiyogesh9911@gmail.com
79% match
Loading thumbnail…

Walmart Sales

Two side-by-side bar charts display weekly sales data for two Walmart stores, with each bar representing a week's total revenue. Users can click bars to highlight and compare specific dates across both charts. The visualization uses D3.js v7 scales (`scaleBand`, `scaleLinear`), axes, and join patterns within a React framework, loading data from a CSV file and rendering SVG elements.

CChris Bodnarchuk
78% match
Loading thumbnail…

Fork of Fork of Fork to pie chart

This pie chart displays total sales by item category for a Walmart dataset, with each slice representing a categorical aggregate. The visualization fetches a CSV file from a GitHub gist, parses rows to extract category labels and total sales values, and renders the chart on an HTML `<canvas>` element using the Chart.js library. The code specifically uses `new Chart(ctx, { type: 'pie', ... })` with custom background colors and a fixed 400x400 pixel canvas, while the `responsive` option is disabled to maintain the set dimensions.

SSushmaNamidi@my.unt.edu
77% match
Loading thumbnail…

Fork of Fork of Fork to pie chart

This pie chart displays total sales by item category, using data fetched from a Walmart CSV file hosted on GitHub. The visualization breaks down sales proportions across categories, with each slice representing a category’s contribution. It loads the data via the Fetch API, parses the CSV text, and passes the category labels and total sales values to Chart.js. The chart is rendered on an HTML canvas element with a fixed 400x400 size, using a semi-transparent color palette for each slice. The code explicitly sets the chart type to `pie` and disables responsive resizing.

Rreddysushma994@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork to pie chart

This pie chart displays total sales by item category, using data fetched from a Walmart CSV file hosted on GitHub. The visualization breaks down sales proportions across categories, with each slice representing a category’s contribution. It loads the data via the Fetch API, parses the CSV text, and passes the category labels and total sales values to Chart.js. The chart is rendered on an HTML canvas element with a fixed 400x400 size, using a semi-transparent color palette for each slice. The code explicitly sets the chart type to `pie` and disables responsive resizing.

Rreddysushma994@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork to pie chart

This example visualizes total sales by item category from Walmart data as a static pie chart. It fetches a CSV file from a GitHub Gist, parses the columns for item category and sales, then renders the chart using Chart.js on an HTML canvas. The chart uses distinct semi-transparent background colors for each slice and displays a title above the plot, with responsive sizing disabled to maintain a fixed canvas dimension.

Rrobertotienonyaranga@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork of Fork to pie chart

This example presents a pie chart of total sales by item category, loaded from a Walmart CSV file. It shows the distribution of sales across categories, with each slice sized by the total sales value. The visualization is built using the Chart.js library, which renders the pie chart onto an HTML canvas element. Data is fetched asynchronously from a GitHub gist, parsed from CSV format, and then mapped to chart labels and values. The chart uses a fixed canvas size and disables responsive resizing to maintain a consistent aspect ratio.

Rreddysushma994@gmail.com
77% match