gitdhtuts

@gitdhtuts·4 public vizzes

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes vulnerability data from a hierarchical JSON file, with arcs colored by top-level category and sized by value. Clicking an arc zooms into that segment, while a breadcrumb trail shows the current path. Built with D3 v5, it uses `d3.partition` for layout, `d3.arc` for rendering, and `transition.attrTween` to animate between views. Labels rotate and fade based on visibility, and hover updates breadcrumbs.

Dec 14, 2022

Loading thumbnail…

Untitled

A zoomable sunburst diagram visualizes hierarchical vulnerability data from a JSON file, with arc segments sized by a numeric value and colored by category. Clicking an arc transitions the chart to focus on that subtree, re-scaling the layout and fading text labels in and out. The visualization uses D3 v3’s `d3.layout.partition`, `d3.svg.arc`, and `transition.attrTween` to animate the zoom, rendering with SVG and applying a category color scale.

Dec 14, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to initialize a D3.js version 7 project and load a CSV dataset for hierarchical analysis. The page displays "Hello D3 version 7" as static text, while the accompanying code uses `d3.csv` to fetch and parse `flare.csv`, which contains vulnerability count data across business units and system types. The parsed data is then fed into a `d3.stratify()` function that transforms it into a nested hierarchy, though the resulting structure is only logged to the console rather than visualized. The implementation relies on the D3 selection API (`d3.select`) and a bundled JavaScript file.

Dec 13, 2022

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.

Dec 8, 2022