Skip to main content
SimilarExport ZIP
100%

ice 6

✓ Published0🌍 Public
TTejamod
Last edited Jun 25, 2022
Created on Jun 25, 2022

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

1. Bar Plot ICE -6

This visualization displays the top 15 best-selling video games by global sales, shown as horizontal bars with length encoding sales volume and sequential blue color encoding relative magnitude. It uses React with D3 v5 scales (scaleBand, scaleLinear, scaleSequential) and loads CSV data from a Gist URL. Each bar includes hover effects, a tooltip showing sales in millions, and value labels, with a title, axis label, and grid lines rendered as SVG elements.

AAbhiramPudi@my.unt.edu
89% match
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-06

This visualization displays the top 20 best-selling games in Japan using a horizontal bar chart, with each bar’s length encoding sales figures and game titles on the y-axis. The chart uses React for component management and D3.js scales (scaleBand, scaleLinear) to map data, while SVG rectangles render the bars with red outlines and yellow fills. Data is loaded asynchronously from a CSV file via d3.csv, sorted by sales, and truncated to the top 20 entries. The chart includes custom axes, tick marks, and grid lines drawn as SVG elements.

Ssatishnarne99@gmail.com
85% match
Loading thumbnail…

bar chart from bonus ice

An interactive bar chart displays global sales figures for ten video games and programming languages, with hover highlighting that reveals the percentage difference between the selected bar and all others. Built with React and D3 v5, the visualization uses SVG rendering and transitions to animate bar opacity and width changes on mouse events. D3 scales (`scaleBand`, `scaleLinear`) drive the axes, while grid lines and axis generators (`d3.axisLeft`, `d3.axisBottom`) structure the layout. A dashed horizontal line and divergence labels appear on hover, with data sourced from a hardcoded sample array containing names, sales values, and colors.

TTejamod
85% match
Loading thumbnail…

ICE-6

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.

PPrasanth Damarla
85% match
Loading thumbnail…

Video Games Sales

This visualization displays the top 20 video games ranked by global sales in millions, with each game shown as a vertical bar. The bar chart shows sales values on the y-axis and game names on the x-axis, with rotated labels for readability. The code uses D3.js `d3.csv` to load and parse the video game sales dataset, then applies `d3.scaleBand` and `d3.scaleLinear` for positioning. The chart includes axes via `d3.axisBottom` and `d3.axisLeft`, with bars rendered as SVG rectangles colored steelblue.

Ssamozarif@gmail.com
84% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart shows North American sales for the top 12 video game genres, with each genre plotted along the vertical axis and sales values on the horizontal axis. The visualization uses React hooks for state management and D3 v5’s `csv` loader to fetch data from a GitHub gist, then renders the bars as SVG rectangles scaled by `scaleLinear` and `scaleBand`. Gridlines and axis labels are generated manually using D3’s `ticks()` method. The graph includes a title and red vertical gridlines for readability.

Ppemmasaniprudhvinadh
84% match
Loading thumbnail…

ice 7 line

This line chart visualizes global video game sales from 2003 to 2014, plotting annual total sales in millions against the year. The visualization uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with axes generated by d3.axisBottom and d3.axisLeft. A d3.line generator draws the path, colored blue, over the SVG canvas. Data is loaded asynchronously via d3.csv from a public GitHub Gist, with parsed numerical sales and date objects.

TTejamod
82% match