wl-treemap

100%

✓ Published0🌍 Public

Last edited Sep 20, 2017

Created on Sep 19, 2017

This visualization shows the win rates for each team in the 2016 Summer NALCS regular season, broken down by game number and previous match outcomes. It uses two complementary treemap layouts: one with nested rectangles showing the percentage of games won and the conditional win rates in subsequent games, and another with a stacked bar-like "ice" layout. The code leverages the custom `d3+_.js` library, which extends d3 with methods like `d3.select`, `d3.append`, and `d3.nestBy`, to process the game data and render SVG paths. A tooltip is attached to each colored rectangle, revealing details on hover, with an animated transition revealing the treemap cells sequentially.

AI-generated description

During the 2016 Summer NALCS, each team played 18 best of three matches. These charts show the percent of games 1s each team won, and then how their winning percentage in game 2s changed based on the result of game 1.

They also try to show how winning percentage in game 3s changed based on previous matches, but the charts are a little too noisy to see that clearly.

Similar vizzes

Loading thumbnail…

todo

A scrollytelling visualization maps every possible outcome of the final two days of the 2018 Mid-Season Invitational. The code renders a 64×64 grid per team on canvas using `d3.conventions` and `d3.graphScroll`, showing how each team’s advancement status varies by win/loss combinations. Clicking game toggles opacity to filter scenarios, while mouseover highlights matching cells and underlines relevant match labels. Data comes from `matches.tsv`, with tiebreaker scenarios precomputed in `calc-scenarios.js`.

11wheel

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

68% match

Loading thumbnail…

Winrates

A small multiples chart displays winrates for a game, comparing opponents across a series of matches. Colored lines with smooth curves represent each opponent, and the legend maps colors to opponent names. The D3 code loads tab-separated data from a GitHub gist, uses `d3.line` with `curveBasis` for smoothing, and `d3.nest` to group by opponent. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and a custom `colorLegend` function draws the color key.

Ddbdr

66% match

Loading thumbnail…

D3 treemap tutorial

This example demonstrates a D3 treemap that visualizes task data from a CSV file, aggregated by priority (e.g., WISH, COULD) and then by status (DONE, TODO). Each leaf rectangle’s size encodes the total time spent on tasks in that group, while its color indicates the priority category, with a legend for reference. The visualization uses `d3.nest()` for hierarchical aggregation, `d3.hierarchy()` to build the tree, and `d3.treemap()` to compute tile layouts. Rendering is done with SVG, showing rectangles, text labels, and hover titles.

JJdlv00

65% match

Loading thumbnail…

Gist 1e62506e7bca2ddfbb82

This visualization maps every NBA game since 1946 onto a grid where the x-axis represents combined losses and the y-axis represents combined wins. Each cell’s color and size indicate the number of games played between teams with that specific combined win-loss record. The chart uses d3.csv, d3.nest, and d3.scale.quantile to process the game data and render the colored rectangles. The visualization also highlights the best and worst historical records with step-after lines, making it easy to compare team performance over time.

11wheel

65% match

Loading thumbnail…

Wavy treemap

This visualization shows the D3.js source code as a treemap where rectangular cells are distorted into a wavy, custom shape. The layout uses a standard `d3.treemap` with `d3.stratify` to structure the data, then applies custom distortion functions to the computed rectangles, converting them into SVG paths. The wavy warping is animated over five seconds using a transition, with the final shape approximating the D3 logo. Hovering a cell reveals its file path and line count in a tooltip.

KKcnarf

65% match

Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller rectangles, with each node's area proportional to its value, encoding the hierarchical structure and size of the Flare visualization toolkit's packages through both position and color. The visualization includes an interactive radio-button control that toggles between summing leaf sizes and counting leaves, triggering a 750-millisecond transition that animates rectangle boundaries using D3 v4's `d3.treemap` with the `d3.treemapResquarify` tiling algorithm. Rendered as SVG, the code uses `d3.hierarchy`, `d3.scaleOrdinal` with the `schemeCategory20` color palette, and `d3.json` to load the packaged flare.json dataset.

Mmbostock

65% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualization displays the hierarchical structure of the flare.json dataset, with nested rectangles sized by either node size or leaf count. The interactive chart allows toggling between these two aggregation modes via radio buttons, triggering a smooth animated transition. Built with D3 v4, the visualization uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` for coloring, rendering SVG cells with clipped text labels and tooltips.

Bbootshine2

65% match