Debating + Recommendations Visualization

100%

Debating + Recommendations Visualization

✓ Published0🌍 Public

Last edited Dec 14, 2017

Created on Dec 14, 2017

This interactive zoomable circle packing visualization maps the structure of a debate on extracurricular activities in Lyon, with circles representing topics, participant groups, and individual comments. The hierarchical layout uses D3’s `d3.layout.pack` to arrange circles, with colors indicating categories like “Parents” or “Professeurs,” while leaf nodes are white. Clicking a circle zooms to that subtree, smoothly animating positions and radii via `d3.scale.linear` transitions. Hovering reveals text labels for comments under 30 characters, and the code loads data from a local `flare.json` file.

AI-generated description

Click on any package to zoom in or out. See also this static circle packing example.

forked from <a href='http://bl.ocks.org/renecnielsen/'>renecnielsen</a>'s block: <a href='http://bl.ocks.org/renecnielsen/9904735'>Zoomable Circle Packing</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/3fd4c26900abe8f6d4615088e4e3a571'>Zoomable Circle Packing</a>

forked from <a href='http://bl.ocks.org/Nicorr/'>Nicorr</a>'s block: <a href='http://bl.ocks.org/Nicorr/aafc829f2ff2bbf14725347f6b185040'>Debating + Recommendations Visualization</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/664ea4ea2761a2846de0524fe0164309'>Debating + Recommendations Visualization</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Basic Circle Pack (Matthias) und Juliane

This example shows an interactive circle-pack visualization of French political dogwhistles. Clicking a bubble zooms it to the center and opens an overlay with the term’s origin, meaning, rally-signal function, and usage example, with a toggle switch between French and English translations. Built with d3.v5, it uses `d3.pack()` and `d3.hierarchy()` to compute the packed layout, renders circles and labels as SVG with multi-line text wrapping, and relies on D3 transitions for zoom and fade effects. Data comes from a local `data.json` file.

Ppeter.sime@gmail.com

72% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization uses a zoomable circle packing layout to display the hierarchical structure of the Flare data set. Each circle represents a node, with nested circles showing child categories, and clicking a circle zooms to that level while clicking the background returns to the root. Built with D3 v3, it uses `d3.layout.pack` for the layout, `d3.scale.linear` for coordinate scaling, and animated transitions via `transition.attr` to smoothly resize and reposition circles and labels. The SVG output uses color gradients based on depth and hover effects to highlight nodes.

PP15GitHubStudent

71% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

70% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays a hierarchical dataset as nested circles, where each circle represents a node and its size corresponds to the node's value. Clicking any circle animates a zoom to that node, revealing its children and hiding unrelated elements. The implementation uses d3.layout.pack for the circle layout and d3.interpolateZoom for smooth zoom transitions. The data comes from the flare.json file, which contains a tree structure with named categories and numeric sizes. The visualization renders with SVG circles and labels, with a color scale applied by tree depth.

AAndresAnayaIsaza

70% match

Loading thumbnail…

Zoomable Circle Packing

This example visualizes a hierarchical dataset as nested circles, with each circle’s size proportional to a value and color indicating depth. Clicking any circle smoothly zooms to that node, re-scaling the layout to center and enlarge its children. The visualization uses `d3.layout.pack` and `d3.scale.linear` for positioning and color, with SVG transitions animating circle radii and label opacity. It renders `flare.json` data, a common D3 hierarchy, and applies `d3.interpolateHcl` for color interpolation.

PP15GitHubStudent

70% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays the hierarchical structure of the Flare class library using nested circles, where each circle’s area encodes the size metric from the underlying flare.json dataset. Clicking any circle triggers a smooth zoom transition, bringing that node and its descendants into focus, while clicking again zooms back out. The visualization is built with D3 v4 and rendered as SVG, with hover effects highlighting nodes and labels that adjust dynamically as the hierarchy expands and collapses.

663anp3ca

70% match

Loading thumbnail…

Zoomable Circle Packing

A zoomable circle packing visualization displays a hierarchical dataset as nested circles, where each circle's size corresponds to a numeric value. Clicking a circle zooms into that branch, expanding its children while hiding others, and clicking the background returns to the root. Built with D3 version 3, it uses `d3.layout.pack` to compute the circle layout and `d3.scale.linear` for positioning. The view animates via `transition.attr` over 750 milliseconds, updating circle positions and radii. The code uses the `flare.json` dataset and renders with SVG elements, including circles and text labels.

PPacsangon

70% match

Loading thumbnail…

Layout

This example shows an interactive circular packing diagram where each circle represents a node in a hierarchical dataset, with leaf nodes as white circles and parent nodes colored by depth. Clicking a circle zooms to focus on that subtree, smoothly transitioning the view. Built with D3 v4, it uses the `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the data from a local `flare.json` file. The visualization is rendered as SVG, with hover highlighting on nodes and a zoom transition that repositions and rescales circles and labels via the `transition` API.

AAkriti97

69% match