100%

Video Game Sales - TreeMap Diagram

✓ Published2🌍 Public

Last edited May 25, 2022

Created on May 20, 2022

Forked from Visualize Data with a Heat Map| fcc project-3

A treemap visualization displays the top 100 most-sold video games grouped by platform, with each rectangular tile sized by sales value and colored by category. The interactive chart uses React for component structure and D3 v7’s `treemap` layout with the `treemapResquarify` tiling algorithm to partition the data hierarchy. A hover tooltip shows the game name, category, and sales figures, while a legend maps colors to platform categories. The visualization loads JSON data from the freeCodeCamp dataset and renders as SVG.

AI-generated description

Video Game Sales - TreeMap Diagram

:camera: Preview:

:rocket: Stack: D3, React

:hammer: Module bundler: Rollupjs

:page_with_curl: Video Game Sales Data

Movie Sales Data

Kickstarter Pledges Data

:pushpin: Live Demo

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Video Game Sales - TreeMap Diagram

This interactive tree map visualizes the top 100 best-selling video games, grouped by platform, using a hierarchical treemap layout with `d3.treemap` and the `treemapResquarify` tiling algorithm. Each rectangle represents a game, colored by category, with labels split across multiple lines. The visualization is built with React and D3 v7, rendering SVG elements that respond to mouse hover events to display a tooltip showing the game’s name, category, and sales value. The color legend categorizes platforms, and data is loaded from the freeCodeCamp video game sales JSON dataset.

Aantoniojl-kemaro

94% match

Loading thumbnail…

treemap-Video Game Sales

This interactive treemap visualizes the top 100 best-selling video games, grouped by gaming platform, with each tile’s size and color representing sales value and platform category. Hovering over a tile displays a tooltip with the game’s name, platform, and sales figures. The visualization uses D3 v4’s `d3.treemap()` and `d3.hierarchy()` to layout the hierarchical data, which is loaded as JSON from an external source, and renders to SVG.

Vvaynexie

91% match

Loading thumbnail…

Treemap of video game sales example

This treemap visualizes the top 100 most-sold video games, grouped by platform. The code uses d3.treemap to compute the layout and renders it as SVG rectangles with categorical color scales. Hovering over a tile displays a tooltip with the game’s name, category, and sales value. The dataset is loaded from a JSON file, and the example supports switching between video game, movie, and kickstarter datasets via URL parameters.

Hhelloelectro

89% match

Loading thumbnail…

Fork of treemap-Video Game Sales

This example visualizes video game sales data using a treemap, grouping the top 100 most-sold games by their platform (e.g., Wii, NES, DS). It displays the relative sales value of each title by the area of its corresponding rectangle. The visualization is built with D3.js v4, using `d3.treemap` and `d3.hierarchy` to compute the layout, and renders tiles as SVG rectangles with color-coded categories. Hovering over a tile triggers a tooltip, and the dataset is loaded from an external JSON URL.

Ddr-acc

87% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap displays the top 100 best-selling video games, grouped by platform and sized by sales value in millions. Built with D3 v4, the visualization uses `d3.treemap` with a resquarify tiling algorithm, `d3.hierarchy` for data nesting, and `d3.scaleOrdinal` with a faded category color scheme. SVG rectangles represent each game, with clip-paths and text elements for labels, while the data comes from a local JSON file. The layout is rendered with rounded padding and no animation in the current version.

Ssriramvsharma

87% match

Loading thumbnail…

Video Games Sales

This visualization displays the top 20 video games ranked by global sales in millions, with each game shown as a vertical bar. The bar chart shows sales values on the y-axis and game names on the x-axis, with rotated labels for readability. The code uses D3.js `d3.csv` to load and parse the video game sales dataset, then applies `d3.scaleBand` and `d3.scaleLinear` for positioning. The chart includes axes via `d3.axisBottom` and `d3.axisLeft`, with bars rendered as SVG rectangles colored steelblue.

Ssamozarif@gmail.com

80% match

Loading thumbnail…

Video Games Sales by Platform

This visualization shows total global video game sales for each platform using a bar chart, with platforms sorted in descending order of sales. It loads a CSV dataset containing video game sales figures and aggregates the data by platform using `d3.rollup`. The chart renders with SVG, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, while `d3.axisBottom` and `d3.axisLeft` generate the axes. Bars are drawn as SVG `rect` elements with a steelblue fill, and the x-axis labels are rotated 45 degrees for readability.

PPurnachandraa9999

76% match

Loading thumbnail…

Untitled

This example displays a treemap visualization of hierarchical data, with the current view showing video game sales grouped by platform, or movie and Kickstarter data sets selectable via links at the top. It uses the d3 v4 API, specifically `d3.treemap()`, `d3.hierarchy()`, and `d3.scaleOrdinal` with the `schemeCategory20` color palette, to render the nested rectangles. The SVG output includes tooltips on mouseover, which display the name, category, and value of each tile using data attributes.

Vvaynexie

76% match