bar_chart_steam

100%

bar_chart_steam

✓ Published0🌍 Public

Last edited Oct 24, 2017

Created on Oct 24, 2017

This example visualizes the average playtime for different video games from a CSV dataset. A bar chart displays each game on the x-axis and its average time in hours on the y-axis. The code uses `d3.csv` to load data, `d3.nest()` with a `rollup` function to compute mean times per game, and `d3.scaleBand` with `d3.scaleLinear` for scales. Bars are rendered as SVG rectangles with hover effects.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/c607174fc6fd5c7bfaa804d46ca70eab'>simple bar chat with interaction</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart of video game data, mapping each game’s maximum number of players to bar length and its release year to vertical position. The bars are rendered as SVG rectangles with a steelblue fill, using D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the scales and axes. Data is loaded asynchronously from a CSV file via `d3.csv`, then parsed and bound to the visualization. The chart’s margins and inner dimensions are calculated explicitly to position the plotting area.

SSimon Hackbert

77% match

Loading thumbnail…

new

This bar chart displays the number of hours required to beat each game from a dataset loaded via a CSV file. The visualization uses D3.js v7 to render SVG rectangles, with bars colored steel blue that turn orange on hover. It employs d3.csv to fetch data, d3.scaleBand for the categorical x-axis, and d3.scaleLinear for the numeric y-axis. Rotated axis labels and custom fonts style the chart, with axes formatted using d3.axisBottom and d3.axisLeft. The chart’s title and axis labels are added as SVG text elements.

Rranjithkmr598@gmail.com

76% match

Loading thumbnail…

Vedio Games Bar Chart

This example visualizes video game data as a bar chart, with bars rendered in blue that highlight yellow on hover. The SVG chart is built using D3 version 6, with data loaded from a CSV file via `d3.csvParse`. The code defines scales and axes in the script, though the specific axis and bar positioning setup is incomplete. The implementation uses `d3.select` and `svg.append` to create the chart structure, and includes tooltip and axis placeholders. The static bar sizing is set to 500 by 100 pixels.

RRED98310

75% match

Loading thumbnail…

Bar Graph in D3

This bar graph visualizes the maximum player counts for video games by year from 2004 to 2008, with each year represented as a horizontal bar. The visualization uses D3 v7’s `csv`, `scaleLinear`, and `scaleBand` APIs to load data from a GitHub-hosted CSV file and map values to SVG rectangles. The chart includes labeled axes, with years on the y-axis and player counts on the x-axis, and uses `axisLeft` and `axisBottom` for tick marks. The bars are styled with a steelblue fill via CSS.

SSimon Hackbert

75% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the frequency of game-playing habits across different age groups, with each bar segment representing a specific frequency category. The data is loaded from a CSV file using d3-dsv, then processed with d3-array to compute totals and sorted in descending order. The chart uses d3-scale for positioning and color encoding, d3-shape to compute stacked positions, and d3-axis for the axes, with y-axis labels formatted using SI prefixes via d3-format. The visualization is rendered as SVG, displaying the full distribution of responses across all age cohorts.

JJdlv00

74% match

Loading thumbnail…

ice5.1

This bar chart shows how long it takes to beat various video games, with each game represented by a steelblue bar that turns orange on hover. The chart uses d3.csv to load external game data, then d3.scaleBand and d3.scaleLinear to map game names and hours onto the SVG canvas. Axes are generated with d3.axisBottom and d3.axisLeft, while rotated labels and explicit axis titles clarify the game names and the “HoursToBeat” measurement. The visualization is built entirely with D3 v7 and rendered as SVG using a custom HTML/CSS layout.

Kktvgs25@gmail.com

74% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart comparing esports teams by their total earnings, using a CSV dataset loaded from `data.csv`. The visualization renders as SVG, with each team represented by a steelblue rectangle sized according to its earnings value. The code imports specific D3 v5 modules—`csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to parse the data, map earnings to a linear x-scale and team names to a banded y-scale, and generate the corresponding axes. Margins and an inner plotting area are defined to position the chart within a 960×500 SVG canvas.

PPushkov Fedor

72% match

Loading thumbnail…

D3 Bar Chart

This example displays a bar chart using D3.js within a React framework, showing the average review scores of top video game publishers from a CSV file. The visualization loads data from `top_10.csv` using the `loadTable` function and renders bars as colored `div` elements with steelblue backgrounds. The code uses D3.js selection methods like `d3.select` and `.selectAll` to bind data, while also defining an SVG canvas with width and height attributes. The chart is generated client-side entirely with JavaScript and CSS, without any additional charting libraries.

Pplai1

72% match