100%

Fork of Video Game Sales - TreeMap Diagram

✓ Published0🌍 Public

Last edited Nov 24, 2022

Created on Nov 24, 2022

Forked from 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.

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…

Video Game Sales - TreeMap Diagram

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.

MMohammed Banani | MbDev

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

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

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

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

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

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

77% match

Loading thumbnail…

Fork of A Bar Chart(Platform)

This interactive bar chart displays video game sales across different platforms, allowing users to switch between global, EU, JP, NA, and other regional sales metrics via a React dropdown menu. The visualization uses d3.scaleBand and d3.scaleLinear to map platforms and sales values to SVG rectangles, with axes rendered through custom React components and d3 formatting. Data comes from a Kaggle video game sales dataset, loaded asynchronously via d3.csv and processed through React's useState and useEffect hooks.

RRED98310

76% match