Laowei42

@Laowei42·4 public vizzes

Untitled

This interactive bubble chart visualizes a hierarchical dataset from the imported `flare.json`, organizing terms by crime categories such as theft, assault, and drugs. Built with D3 v4’s `d3.pack`, it renders circles as SVG nodes, with zoom and pan handled via `d3.interpolateZoom` and transition tweens. Clicking a node zooms to that subtree, while leaf nodes remain unfilled and only root-level labels display. The color scale uses HSL interpolation to denote depth.

Mar 26, 2023

Loading thumbnail…

Untitled

This interactive visualization uses a circular packing layout to display a hierarchical dataset from the file `flare.json`. The code employs D3.js v4, React, and SVG with animation, leveraging `d3.hierarchy` to aggregate leaf sizes and `d3.pack` to position circles. Clicking on a node triggers a smooth zoom transition via `d3.transition` and `interpolateZoom` to focus on that subtree, while text labels fade in and out based on parent relationships.

Mar 26, 2023

Loading thumbnail…

Untitled

A zoomable circle-packing visualization displays hierarchical data as nested circles, with an initially clicked root (`assault`) revealing child nodes labeled “man,” “information,” “anyone,” and “area.” Built with React and D3 v4, it uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to animate transitions between levels, while `d3.scaleLinear` with HCL interpolation colors the circles. Clicking any circle zooms into its subtree, fading labels in and out, all rendered as SVG elements in a 900×900 viewport.

Mar 26, 2023

Loading thumbnail…

Fork of Untitled

This interactive visualization uses a circular packing layout to display the hierarchical structure of the flare dataset, with nested circles representing categories and their sub-items sized by a numeric value. Clicking a circle zooms into that node, smoothly animating the view through a tween on the interpolateZoom function while adjusting label visibility and opacity for the new focus. The SVG is rendered with D3 v4, using the d3.pack layout and d3.hierarchy API to compute circle positions, and a linear color scale with HSL interpolation to encode depth. The code is built as a React component, though the visualization itself relies on direct DOM manipulation through D3 selections.

Mar 25, 2023