supermoose

@supermoose·4 public vizzes

Sequences sunburst

A sunburst chart shows the make and type of vehicles stolen in São Paulo in August 2019, segmented by exterior color, with each arc’s angle and radius encoding the theft count. Hovering an arc highlights its ancestors and updates a breadcrumb trail with the percentage of total thefts. The visualization uses d3.partition, d3.arc, and d3.hierarchy to layout the hierarchy, loading data via d3.text and d3.csvParseRows. A toggleable legend and a 1-second opacity transition on mouseleave are rendered with d3.select and d3.transition.

Aug 25, 2019

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualizes hierarchical path data from a CSV of user clickstreams, showing the proportion of each navigation sequence in a metagenome sample. The interactive chart uses d3.partition and d3.arc to render the radial layout, with breadcrumb trails and percentage labels updating on hover via mouseover and mouseleave handlers. It fades non-ancestor segments and animates opacity transitions, using d3.hierarchy and d3.csvParseRows to process the data.

Aug 24, 2019

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare software package, with each ring segment representing a directory or file and its area proportional to a numeric value. It uses D3 v5’s `d3.partition` layout and `d3.arc` generator to draw SVG arcs, with click interactions and smooth transitions (`transition.attrTween`) that recenter and rescale the hierarchy. A color scale from `d3.interpolateRainbow` distinguishes top-level categories, while labels rotate and fade based on visibility. Data loads asynchronously via the Observable standard library’s `require` function.

Aug 24, 2019

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization presents a hierarchical sunburst chart of the Flare software project’s package structure. Clicking any arc zooms into that subtree, animating the radial layout with smooth transitions. Built with D3 v5, it uses `d3.partition` and `d3.arc` to compute and draw the arcs, with `transition.attrTween` handling the zoom animation. Colors derive from a `d3.scaleOrdinal` with an interpolated rainbow palette, while labels rotate and reposition via `labelTransform`. Data loads from the @observablehq/flare module.

Aug 24, 2019