fCC Treemap

100%

✓ Published0🌍 Public

Last edited Dec 7, 2023

Created on Dec 6, 2023

Forked from Reuseable D3 Scatter Plot Exercise

This visualization displays a treemap of the top 100 highest-grossing movies, grouped by genre. Each rectangle’s size represents a movie’s box office value, and color encodes its category, with an interactive tooltip revealing the movie name and value on hover. Built with React and D3.js, it uses `d3.hierarchy` and `d3.treemap` for layout, and dynamically renders SVG rectangles and text labels. The color legend, defined in static SVG, maps seven genres to distinct fills, while data loads from a freeCodeCamp-hosted JSON dataset. The chart fills the entire browser window, with a tooltip that tracks the cursor.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

CodePen - D3 TreeMap

This interactive treemap visualizes box office revenue for top-grossing movies, hierarchically grouped by genre. Users can click any tile to zoom into that category, revealing individual film titles, their genre, and revenue values via a tooltip on hover. Built with D3 v5, it uses `d3.hierarchy` and `d3.treemap` to compute the layout, with `d3.scaleOrdinal` assigning colors and `d3.schemeCategory10` for the palette. The code fetches movie data from a local JSON file and animates transitions between zoom levels with `d3.transition` and `d3.easeCubicOut`.

VVickoh

83% match

Loading thumbnail…

Treemaps

This treemap visualizes a hierarchy of movie genres and individual film titles, with color-coded circles representing different generations of the data. The dataset defines a root "MovieGroup" with subcategories like Action, Romantic, and Mythology, each containing specific movies. Built with d3.stratify and d3.tree, the visualization uses SVG elements, including animated paths for connections and circles that transition to a fixed radius. Text labels display the names of each genre and movie, rendered in bold white text over the circles.

SSwapna1915

76% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3_Ramakanth

This visualization displays the top 10 highest-grossing movies in USD as a horizontal bar chart, with movie titles on the y-axis and weekend gross earnings on the x-axis. The React app fetches CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` to map film names and gross values, and renders SVG rectangles for bars with tick lines and labels. It relies on React's `useState` and `useEffect` hooks to load and sort the data, while D3 v5 handles the scales and chart layout.

Vvegurusaiprathyusha

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

73% match

Loading thumbnail…

Movie tree

This visualization shows a hierarchical tree of movie genres and film titles, with a central “Movies” root branching into Action, Horror, Thriller, and Drama, each leading to specific movies. The D3.js `stratify()` method converts flat parent-child data into a hierarchy, which is then laid out using `d3.tree()`. SVG circles represent nodes, connected by animated paths that draw straight lines, while text labels fade in with a staggered duration based on depth. The rendering emphasizes a simple, colorful circular-node aesthetic over explicit positional encoding.

Bbindusreeja

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

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

72% match

Loading thumbnail…

Tree Map Representation

This tree map shows a hierarchy of movie genres and example titles, with nodes represented as colored circles and connections drawn as straight lines. The visualization uses D3 v6’s `d3.stratify` to convert the flat parent-child dataset into a hierarchy and `d3.tree` to compute the layout, which aligns nodes at the same depth vertically. Circles are color-coded by generation level (root, genre, and title) and animate their radius and link paths on load via `.transition().duration()`. The SVG is rendered with a centered HTML heading and black strokes on the circles.

SSwapna1915

71% match