ICE-6 Anusha Anumula

100%

ICE-6 Anusha Anumula

✓ Published0🌍 Public

Last edited Jun 26, 2022

Created on Jun 25, 2022

This example shows the top 20 PS4 games ranked by North American sales using a horizontal bar chart, with bars representing European sales percentages. The visualization uses React for component structure and D3 v5 for data loading and scales, specifically `csv` for parsing the dataset and `scaleBand` and `scaleLinear` for positioning. SVG rectangles render the bars, with grid lines and tick labels generated manually from the linear scale. Data comes from a CSV hosted on GitHub gists, and the visualization updates reactively once the data loads.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

78% match

Loading thumbnail…

ICE7

This visualization presents a pie chart of video game sales by title, breaking down revenue across North America, Europe, and Japan. The chart uses an ordinal color scale and displays each game’s total sales and percentage in a legend. Built with D3 v5 and React, it loads CSV data and renders SVG paths using `d3.pie` and `d3.arc`, with legends and text labels positioned manually.

Ssatishnarne99@gmail.com

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

77% match