Fork of Bar graph-task1

100%

Fork of Bar graph-task1

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

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.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

Fork of Bar graph-task1q1

This visualization presents a horizontal bar chart of North American video game sales for the top 12 games, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering bars as SVG rectangles. The chart includes tick lines and labels drawn manually. A second, unused component in the same file defines a 3D scatter plot using Plotly, showing North America and Japan sales over time.

UUmarani Vemula

90% match

Loading thumbnail…

Bar graph-task1

This interactive bar chart, built with React and D3 v5, visualizes the top 12 video games by their North American sales figures. Each game is represented by a rectangular bar, with the horizontal axis encoding sales value and the vertical axis categorizing game titles. The chart is rendered as an SVG within a React component, using D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with data loaded from a CSV file via `d3.csv`. A second, separate plotly-based 3D scatter plot is also included in the project files, but the main gallery view shows the D3 bar graph.

SSheela2930

87% match

Loading thumbnail…

Assignment2-Task_1_Bar graph

This bar chart displays the top 12 video games by North American sales from a CSV dataset. Each bar’s height corresponds to the game name on the y-axis, while the bar’s length represents total sales on the x-axis, with a red-to-blue color scale indicating sales magnitude. The visualization uses React for component rendering and D3’s `csv`, `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs within an SVG. Data is fetched from a GitHub gist and processed with D3’s CSV loader.

Ssreekarthanda@gmail.com

86% 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…

Fork of Rendering Data with React & D3

This example shows a bar chart of global video game sales by genre, with bars rendered as SVG rectangles whose heights are scaled by sales figures. The code loads CSV data using `d3.csv` and manages state with React hooks (`useState`, `useEffect`), while `d3.scaleBand` and `d3.scaleLinear` map genres and sales values to pixel positions. The chart is drawn entirely through React components that return SVG elements, demonstrating a hybrid approach where D3 handles data processing and scales, while React handles the DOM rendering.

RRED98310

82% match

Loading thumbnail…

Fork of A Bar Chart(Platform)

This interactive bar chart displays total video game sales across platforms, with a dropdown menu to switch between global, EU, JP, NA, and other regional sales figures. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position SVG rectangles, with axes rendered through custom `AxisBottom` and `AxisLeft` components. Data comes from a Kaggle dataset of the top 500 games, loaded via D3's `csv` method. A tooltip appears on hover, showing the exact sales value for each bar.

NNarayana Reddy

82% match