Untitled

100%

✓ Published1🌍 Public

Last edited Mar 26, 2023

Created on Mar 26, 2023

Forked from 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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

A zoomable treemap visualizes crime data from a JSON hierarchy, with rectangles sized by offense counts and colored by rate of change from blue (negative) to red (positive). Users click parent nodes to drill down between broad categories like violent and non-violent crimes, while hover effects reveal child rectangles. The implementation uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleLinear` for color, rendering animated transitions via D3 v4 in React with SVG. A separate `flare.json` dataset and parsed `friends.js` array are included but not shown in the main chart.

LL1EO

87% match

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.

LLaowei42

87% match

Loading thumbnail…

Untitled

This interactive graph visualizes a hierarchical dataset, starting with a root "flare" node and expanding through categories like "analytics," with the force-directed layout used to position nodes. Built with D3 v3, it uses `d3.layout.force()` to simulate physical forces, with node size proportional to the `size` property from the `graph.json` file. The visualization demonstrates how clicking on a parent node toggles the display of its children, allowing users to explore the tree structure. Nodes are rendered as SVG circles with labels, and links are drawn as lines, with color coding distinguishing collapsed, expanded, and leaf nodes.

JJediquu

84% match

Loading thumbnail…

Untitled

This interactive zoomable icicle chart visualizes the hierarchical Flare-2 dataset through animated rectangular partitions. Users click nodes to zoom, with smooth SVG transitions recalibrating the layout to focus on the selected subtree. Built with React and D3’s `partition` layout, it uses `scaleOrdinal` and `interpolateRainbow` for color encoding, while `transition.attr` animates rectangle and text positions. The visualization loads JSON data via `d3.json` and renders entirely in SVG, with tooltips showing ancestor paths and numerical values.

BBen McCarty

83% match

Loading thumbnail…

Untitled

This interactive zoomable circle packing visualization displays the hierarchical structure of the flare.json dataset, with nested circles representing parent and child nodes sized by their numeric values. Users click circles to zoom into deeper levels, with smooth animated transitions between views. The visualization uses D3.js v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to animate the zooming effect, rendered as SVG elements with a linear color scale distinguishing depth levels. Text labels appear and fade based on the current zoom focus.

CCHENNI-Nidhaleddine

83% match

Loading thumbnail…

Untitled

This visualization shows a zoomable circle packing layout of the Flare software dependency hierarchy, where each node’s area encodes its size value. Clicking a circle zooms to that subtree, smoothly interpolating the view with `d3.interpolateZoom` and animating label opacity and display. It uses `d3.pack`, `d3.hierarchy`, and `d3.scaleLinear` with HCL interpolation, rendering in SVG within a React framework. Data comes from the bundled `flare.json` file.

Iilincaion

83% match

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.

LLaowei42

83% match

Loading thumbnail…

Untitled

This interactive zoomable sunburst diagram visualizes the hierarchical structure of the Flare software package, using nested arcs sized by file metrics. Built with D3 v3 and SVG, it employs `d3.layout.partition` to compute the layout and `d3.svg.arc` for rendering. Clicking a node triggers `transition.attrTween` to smoothly zoom into that subtree, recalculating scales and updating text labels. The color scale `d3.scale.category20c` distinguishes parent categories, while labels rotate based on their angular position.

BBhavyatulasi

80% match