reusable D3 Scatter Plot

100%

reusable D3 Scatter Plot

✓ Published3🌍 Public

Last edited May 28, 2023

Created on May 4, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical page-sequencing data from a CSV file, showing the proportion of visits that begin with each sequence of pages. The visualization uses a radial partition layout, with arcs representing nodes and an interactive breadcrumb trail displaying the current path. Built with D3 v4, it utilizes `d3.partition`, `d3.arc`, and `d3.hierarchy` to structure data, while `d3.scaleOrdinal` and `d3.schemeTableau10` assign colors to segments. Hovering over a segment highlights its ancestors in the sequence, and the central explanation shows the percentage of visits associated with that path.

LLo-ov

79% match

Loading thumbnail…

Fork of Sunburst Chess

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.

GGan Gao

78% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot component built with React and rendered as SVG. The visualization initially plots iris flower petal length against sepal length, then cycles through different data columns every two seconds, animating the transitions. It uses D3’s scaleLinear, extent, axisLeft, and axisBottom functions, and leverages the join pattern for efficient SVG updates. The code loads data from a CSV via d3.csv, and the plot adapts to window dimensions.

Ccharlieronchetti@gmail.com

78% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot built with D3 and React, visualizing the classic Iris dataset. It demonstrates how a modular chart component can be configured with data, axis titles, and margins. The code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data to SVG coordinates, and renders circles with a fixed radius. The chart is driven by an asynchronous fetch of a CSV file, parsed into numeric columns, and displayed using the SVG rendering approach.

KKaustav Sen

78% match

Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes hierarchical sequences of page visits, using a radial partition layout where each arc represents a path segment and its size reflects visit counts. Hovering over an arc highlights the entire ancestor chain in the breadcrumb trail above and displays the percentage of visits for that sequence. Built with D3 v4, it uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout, with colors assigned via `d3.scaleOrdinal` and `d3.schemeTableau10`. Data comes from CSV files parsed with `d3.csvParseRows`.

LLo-ov

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

77% match

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical sequence data as an interactive radial layout, with each ring segment representing a step in a user journey. Built with D3 v4, it uses a partition layout and arcs sized by value. Hovering over any segment fades all non-ancestor paths and displays a breadcrumb trail above the chart, showing the sequence of steps leading to the hovered node along with the percentage of visits that follow that path. The visualization also includes a toggleable legend and a centered explanation text that updates dynamically. The data is loaded from a CSV file and converted into a hierarchical JSON structure for rendering. Animated transitions are not used; instead, interaction is driven by mouseover and mouseleave events. The example is adapted from Kerry Rodden's block and licensed under Apache 2.0.

EEE2dev

77% match

Loading thumbnail…

Sequences sunburst

This sunburst visualization uses D3’s partition layout to depict sequences of user navigation paths through a website, based on a CSV of visit sequences (e.g., "home-search-end"). Each arc’s angular extent encodes the count of visits for that step, with colors mapping to page names and a central text panel showing the percentage of visits for the hovered path. Interactive features include a breadcrumb trail that highlights the current sequence and a legend with a toggle. A mouseover on an arc updates the breadcrumb and percentage display, while leaving the sunburst resets the view. The chart handles hierarchical data without pre-generated JSON, using `d3.layout.partition` and an animated, hover-driven transition to reveal the sequence breakdown. The design emphasizes clarity for first-time users by showing percentages explicitly and providing a legend toggle to aid interpretation. The code is based on Kerry Rodden's block and is licensed under the Apache License 2.0.

AAdlopez2016

77% match