Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Feb 25, 2021

Created on Feb 25, 2021

This example displays a bar chart of video game genres from a CSV dataset, plotting each genre’s global sales using a D3 scaleBand for the x-axis and a scaleLinear for the y-axis. The React component loads data via d3.csv, maps sales values to numbers, and renders SVG rectangles with heights proportional to sales. The code uses D3 v6’s scaleBand, scaleLinear, max, and csv functions alongside React hooks like useState and useEffect to manage data fetching and state. The chart is static, with no axes or labels, and uses a dataset hosted as a GitHub gist.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

bar chart

This example shows the global sales of video games grouped by genre as a static bar chart. The code loads CSV data from a GitHub gist, parses the `Global_Sales` column into numbers with `d3.csv`, and renders bars using React and SVG. The `xScale` uses `scaleBand` for each genre, while `yScale` uses `scaleLinear` with the maximum sales value mapped to the chart’s height, although the bars are drawn with their y-position fixed at zero.

RRED98310

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

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

86% match

Loading thumbnail…

Fork of Bar Chart

This example displays a vertical bar chart comparing global sales across video game genres, using data loaded from a CSV file. The chart renders as SVG, with genre labels on the x-axis and sales figures on the y-axis. The code builds scales with d3.scaleBand and d3.scaleLinear, and uses d3.axisBottom and d3.axisLeft for axes. Interactive mouseover and mouseout events change bar fill colors from steelblue to orange, with a d3 transition animating the change back over 250 milliseconds.

Kkaruppuraja

85% match

Loading thumbnail…

Fork of Bar Chart

This fork of a bar chart visualizes global video game sales by genre, using data loaded from a CSV file. D3 v6 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` construct the chart within an SVG, while mouseover and mouseout events trigger `transition` animations that change bar fill from steelblue to orange. The chart includes labeled axes for genre and global sales, with bars rendered via `selectAll` and data joins.

MMaldewar

85% match

Loading thumbnail…

Fork of A Bar Chart

This example shows the total sales of video game genres across different regions, with a dropdown menu allowing the viewer to switch between global, EU, JP, NA, and other regional sales. The bar chart uses React with D3 v5’s scaleBand and scaleLinear to position bars, and custom AxisBottom and AxisLeft components render tick marks. Marks are drawn as SVG rect elements with tooltips, and the dataset comes from Kaggle’s video game sales CSV.

AAntwanHak

84% match