Fork of Fork of Fork of ICE-6 Bar Graph

100%

Fork of Fork of Fork of ICE-6 Bar Graph

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

Forked from 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.

AI-generated description

A whole smiley face

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

87% match

Loading thumbnail…

Fork of A Bar Chart

This fork of a bar chart visualizes the sales of video game genres across different regions, sourced from a Kaggle dataset. It displays the total sales per genre with a dropdown menu to switch between global, EU, JP, NA, and other regional sales figures. Built with React and D3 v5, the SVG rendering uses scaleBand and scaleLinear for axes, while axis components construct ticks with formatted labels via d3.format. Tooltips on each bar provide precise sales values.

RRED98310

85% match

Loading thumbnail…

Fork of Bar graph-task1

This bar chart displays North American sales for the top twelve video games, with each game's name on the vertical axis and its sales figures on the horizontal axis. The visualization is built using React and D3 v5, employing `d3.csv` to load the dataset and `d3.scaleBand` and `d3.scaleLinear` to map the data to SVG rectangles. The chart is rendered with red gridlines and labeled axes. While the primary view is a horizontal bar graph, the code also contains a separate Plotly-based 3D scatter plot that compares North American and Japanese sales over time, indicating the source data includes multiple regional sales metrics.

Cchandanagandla

85% match

Loading thumbnail…

Fork of Bar graph-task1

This example shows a horizontal bar chart of North American video game sales for the top twelve titles, ranked by their NA_Sales values from a CSV dataset. The chart uses D3 scales (scaleBand for categories and scaleLinear for values) to position bars and axis ticks, while React manages the component state and data loading. The visualization renders as an SVG with red gridlines and labeled axes, using d3.csv to fetch and parse the data, and d3.max to determine the x-axis domain.

Aajaysonu

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

84% match

Loading thumbnail…

Fork of React Starter

This bar chart displays global video game sales by genre, with bars extending horizontally from the y-axis. The React application loads CSV data from a GitHub gist, parsing it with D3's `csv` function. It uses `scaleBand` for the categorical genre axis and `scaleLinear` for the sales values, rendering the chart as SVG elements within a React component. State management and data fetching are handled through React hooks `useState` and `useEffect`.

RRED98310

84% match

Loading thumbnail…

Fork of Bar graph-task1

This example shows a horizontal bar chart of the top 12 video games by North American sales, with game names on the y-axis and sales values on the x-axis. It uses React state to load CSV data via d3.csv, then renders SVG rectangles scaled by d3.scaleBand and d3.scaleLinear. Custom gridlines and tick labels are drawn manually using d3.scaleLinear.ticks, while axes are positioned with SVG group transforms. The visualization updates asynchronously when data arrives, with a loading state displayed beforehand.

Aajaysonu

84% match

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes global sales for different video game genres, sourced from a CSV file, with a D3 v6 rendering. It uses `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to map genres to bars and provide axes. On mouseover, the chart changes a bar’s fill to orange and back to steelblue on mouseout via D3’s selection and transition methods. The SVG output includes data labels for axes and a rotated genre title.

Ssucotton9

84% match