Fork of Sunburst Chess

100%

Fork of Sunburst Chess

✓ Published0🌍 Public

Last edited May 31, 2023

Created on May 30, 2023

This visualization shows the first moves of chess games as an interactive sunburst diagram. Players explore opening sequences by hovering over arc segments, which highlight the path from the center and display the percentage of games following that line. The code uses D3’s `partition` layout with a hierarchy built from CSV data, rendering SVG paths with `d3.arc`. Each move’s color is mapped via `scaleOrdinal`, and the chessboard preview uses the chessboardjs library.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Sequences sunburst

This interactive sunburst diagram displays a game’s asset hierarchy, showing the proportional size of each category and its subcategories. Hovering over a segment highlights the path from the root, displays the percentage of the total, and updates a breadcrumb trail. Built with React and D3 v4, it loads CSV data via `d3.csvParseRows`, constructs a hierarchy with `d3.hierarchy` and `d3.partition`, and renders arcs using `d3.arc`. Colors are assigned using `d3.scaleOrdinal` with `d3.schemeTableau10`, and mouseover/mouseleave events control the highlighting and animation.

Cchalasanigayaetiri@gmail.com

81% match

Loading thumbnail…

reusable D3 Scatter Plot

This visualization presents a sunburst chart of the first K steps in chess games, using a sequence of page types (account, home, product, etc.) as hierarchical segments. The chart is built with D3.js within a React framework, leveraging the `d3` library to render the nested ring structure. Data is sourced from a CSV file containing step sequences and their counts, which drives the size of each arc. The layout and interactivity are handled through D3’s hierarchical layout functions, allowing users to explore the frequency of different navigation paths.

PPeiyang Li

78% match

Loading thumbnail…

Chess for Newbies

Chess for Newbies visualizes common chess openings and traps from the Lichess database across different player rating levels. An interactive sunburst chart displays the frequency of move sequences, with larger arc regions indicating more popular moves, and users can explore how strategies differ between beginners and elite players. The visualization pairs the sunburst with a chessboard, allowing users to play moves and see matching patterns highlighted in the chart. Built with D3.js, it uses hierarchical data and transitions to update the visualization based on user selections.

PPeiyang Li

78% match

Loading thumbnail…

Fork of Sequences sunburst

This interactive sunburst chart visualizes hierarchical browser navigation sequences, showing the proportion of visits that begin with each path as a ringed radial layout. Built with D3 v4 in a React framework, it uses `d3.partition()` and `d3.arc()` to render the rings, while a breadcrumb trail above displays the current hovered sequence. The visualization animates on mouseover by fading non-ancestor nodes to 30% opacity and highlights the active path, with color assigned via `d3.scaleOrdinal` and `d3.schemeTableau10`. Data comes from a CSV file of page-access sequences.

Ggitdhtuts

76% match

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualization displays hierarchical data as a radial partition layout, where each arc segment represents a node’s proportional value from CSV data. Hovering over a segment highlights its ancestor path and shows a breadcrumb trail with the percentage of total visits, while other segments fade to 30% opacity. The implementation uses D3 v4’s `d3.partition`, `d3.arc`, `d3.hierarchy`, and `d3.scaleOrdinal` with `d3.schemeTableau10` for color mapping. Interactive mouseover and mouseleave events dynamically update the display, with the total size computed from the root node’s aggregated value.

WW9183907

75% match

Loading thumbnail…

Fork of Sunburst

This example visualizes a hierarchical dataset of network infrastructure using a sunburst diagram. Each ring represents a level in the hierarchy, from geographic regions down to individual server racks, with arc lengths proportional to the value counts. The visualization is built with D3 v5 and React, using `d3.partition()` to compute the layout and `d3.arc()` to generate the SVG paths. Colors are assigned per top-level branch via `d3.scaleOrdinal` and `d3.interpolateRainbow`, with labels shown for larger segments. The data is loaded from a JSON file and rendered into an SVG element.

Jjimmyjs1607

75% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare software library, with each ring representing a level of the codebase and arc size proportional to data values. The D3 v5 code uses the `d3.partition` layout algorithm, `d3.arc` for drawing segments, and animated transitions triggered by clicking on any visible arc to zoom into the selected branch. SVG paths and text labels render in the browser, with colors assigned via `d3.scaleOrdinal` and an interpolated rainbow palette, while the dataset is loaded asynchronously from an Observable-hosted JSON file.

DDries Lagae

75% match

Loading thumbnail…

Chess board Visualization

This visualization displays a chessboard with move annotations on the side, where hovering over a move like "d4 d5" highlights the corresponding squares in red. Built with D3.js v7, it uses D3 selections to append SVG `rect` elements for the board squares and `text` elements for coordinates and moves, with mouseover and mouseout events to trigger color changes via style modifications. Data for the board squares is generated programmatically from column and row arrays.

Bbubbabjh

75% match