ICE-6

100%

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

This example shows a bar chart of video game sales, comparing the total sales across different game platforms. A dropdown menu lets the viewer switch the y-axis metric among customer-related attributes like name, segment, country, city, or state. Built with React and rendered as SVG, the chart uses d3.scaleBand and d3.scaleLinear for axes, with custom AxisBottom, AxisLeft, and Marks components. Data is loaded asynchronously via d3.csv from a Kaggle-hosted dataset of top game sales.

AI-generated description

A bar chart shows the sales of Top 500 different games in different regions on different game platforms. The data comes from https://www.kaggle.com/gregorut/videogamesales

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar Graph 11554625

This bar graph displays global video game sales across different genres, using horizontal bars to compare the total sales figures for twelve genres. Built with React and rendered as an SVG, the visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map genre names to y-axis positions and sales values to bar widths, with red gridlines and axis ticks generated via `xScale.ticks()`. Data is loaded from a remote CSV of video game sales via D3’s `csv` function, which parses the `Global_Sales` column for each row.

MManohar Kowthavarapu

86% match

Loading thumbnail…

ice 6

This horizontal bar chart displays the global sales of the top 11 video games, using orange bars to compare their performance. The visualization is built with React and D3 v5, leveraging `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG for rendering. Data is loaded asynchronously from a CSV file via `d3.csv`, with sales values parsed and then filtered to the first 11 entries. Tick marks and labels are manually generated from the scales, while axis lines are omitted for a cleaner design.

TTejamod

85% match

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA

83% match

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch

83% match

Loading thumbnail…

A Bar Chart(Platform)

This interactive bar chart displays global video game sales across platforms, with a dropdown menu to switch between sales regions including North America, Europe, Japan, and other markets. The visualization uses React with D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, with axes generated through custom components. Sales data is loaded from a Kaggle dataset via d3.csv, and each bar includes a tooltip showing the formatted sales value.

RRED98310

83% match

Loading thumbnail…

ICE-6 Country Sales Bar Chat

This example shows a horizontal bar chart of sales figures for the top ten countries from a CSV dataset. Each green bar represents total sales per country, with axes labeled and tick marks rendered. The code uses React with hooks to manage loading data via d3.csv, and d3.scaleBand and d3.scaleLinear for positioning. It renders SVG elements directly in JSX, constructing the chart with d3’s scale functions and max helper. The dataset is fetched from a GitHub gist, and the layout includes custom margins for the left-aligned country names.

Aarchanagoli@my.unt.edu

82% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

82% match

Loading thumbnail…

season bar chart

This bar chart displays video game sales across different gaming platforms, with a dropdown menu allowing viewers to switch between global, EU, JP, NA, and other regional sales figures. The visualization uses React with D3 v5, employing `d3.scaleBand` for the categorical platform axis and `d3.scaleLinear` for the sales values. SVG rectangles render each bar, and D3 utilities like `axisLeft` and `axisBottom` style the axes, while tooltips show formatted sales values. Data comes from a CSV of top 500 games sourced from Kaggle.

MMichael Bergerson

82% match