Aaron Brion

@aaronjbrion·4 public vizzes

Player Count Scatter Plot

This scatter plot visualizes player count data across several games from 2017 to 2020, with each circle representing a game’s yearly player total. The y-axis displays game titles as categorical bands, while the x-axis shows years. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG circles rendered via `container_g.selectAll(".scatter")`. The data source is `maxPlayerCount.csv`, and the rendering approach is an SVG scatter plot with labeled axes.

Apr 20, 2022

Loading thumbnail…

Player Count Bar Chart

This bar chart shows the maximum concurrent player counts for four popular video games (PUBG, CSGO, Grand Theft Auto, and Rainbow Six Siege) across the years 2017 to 2021. The chart uses grouped bars, with each game represented by a distinct color, allowing for direct comparison of player counts and yearly trends. The visualization is built with d3.v7 and React, using SVG rendering with `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the count axis, and `d3.scaleOrdinal` for color mapping. Data is loaded from a CSV file (`maxPlayerCount.csv`) using `d3.csv`.

Apr 20, 2022

Loading thumbnail…

Player Count Bubble Chart

This bubble chart displays monthly player counts for four games—PUBG, CSGO, Grand Theft Auto V, and Rainbow Six Siege—from September 2017 through December 2021. Each game has its own vertical column of bubbles positioned along the y-axis by player count, with the x-axis grouping the games by name. The visualization uses D3.js v7 to parse the CSV data, create a band scale for the categorical game titles, and a linear scale for the counts. Circles are appended to the SVG canvas within a transformed container group, with axes generated using d3.axisBottom and d3.axisLeft.

Apr 7, 2022

Loading thumbnail…

Player Count Line Chart

This visualization shows a line chart tracking the monthly player counts for four games (PUBG, CSGO, Grand Theft Auto V, and Rainbow Six Siege) from September 2017 through December 2021. The chart uses D3.js v7 with SVG rendering, employing `d3.line` with a basis curve to smooth the trends. Interactive features include a color-coded hover effect that highlights one series by muting others, and a click-to-toggle visibility mechanism that hides or shows individual game lines. The chart also supports zooming via `d3.zoom`, which rescales the x-axis and redraws the lines with `transition.attrTween`.

Apr 7, 2022