Fork of treemap-Video Game Sales

100%

Fork of treemap-Video Game Sales

✓ Published0🌍 Public

Last edited Feb 7, 2023

Created on Feb 7, 2023

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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…

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

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

90% match

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

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…

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

83% match

Loading thumbnail…

Fork of a bar chart

This visualization shows the top 30 best-selling video games by global sales, using a fork of a classic bar chart with thin orange bars and labeled axes. The data is loaded from a CSV file containing game names and sales figures. The code uses D3 v6 APIs such as `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to render an SVG chart. It highlights popular titles like Wii Sports and Super Mario Bros., with a custom title and axis labels styled via CSS.

RRED98310

78% match

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

76% match