Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aapolan
Last edited Oct 31, 2016
Created on Oct 31, 2016

A treemap visualizes the assets of two political parties, A and B, with each party subdivided into individual members and their holdings across ground, building, and cash categories. A dropdown menu switches the treemap’s value metric between total, building, ground, and cash, using `d3.layout.treemap` with a sticky layout. Clicking a cell zooms into that branch with a smooth `transition`, and option-clicking returns to the root. The hierarchy comes from a JSON file, and the cells are colored by parent party using `d3.scale.category20c`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

An interactive red-on-white dendrogram visualizes a hierarchical JSON dataset from `turbo.json`. Clicking a node collapses or expands its children. The tree uses `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Animated transitions via `d3.select(...).transition()` reposition nodes and links when branches open or close. Leaf nodes with URLs render as clickable text anchors.

HHamishWoodrow
72% match
Loading thumbnail…

fresh block

This visualization plots political topics as colored nodes on a force-directed layout, with each node split into red and blue halves to show Republican versus Democratic mention rates. The underlying data comes from presidential debate transcripts, and topic counts are normalized per word and scaled by a square-root scale. The code uses d3.v4’s force simulation, collision detection with custom padding, and clickable links that trigger hash-based topic selection.

SSamyMe
71% match
Loading thumbnail…

fresh block

A tree diagram displays hierarchical data with rounded rectangular nodes and connecting curved links, all rendered in a clean white-and-steelblue palette. The visualization uses D3 v4 to generate the layout, with each node labeled by text and positioned via an external vertical_tree.js script. The code loads D3 from a CDN and applies CSS styling to define node fills, strokes, and link thickness. The example demonstrates a static, non-interactive tree structure, relying on D3's core selection and data-join methods rather than force simulation or animation.

JJoseEduinCulmaCaviedes
70% match
Loading thumbnail…

fresh block

An interactive organizational chart displays a company’s departments and employees as a collapsible tree. The D3 v4 tree layout arranges nodes vertically by depth, with circles and text labels styled by department or person. Clicking a node expands or collapses its children using the `d3.hierarchy` and `update` functions. The SVG animation transitions nodes and links smoothly, and jQuery displays selected employee names and locations in a separate info panel.

Aandrew-menendez
70% match
Loading thumbnail…

fresh block

This interactive circle-packing visualization displays a hierarchical dataset from flare.json, using nested bubbles to represent categories and their relative sizes. The view begins with a zoomed-out root node and supports click-to-zoom transitions between hierarchy levels, with labels fading in for parent nodes. Built with D3 v4, it uses the `d3.pack` layout, `d3.hierarchy` for tree traversal, and `d3.interpolateZoom` for smooth zoom animations. Circle fills follow a linear color scale applied by depth, while SVG rendering and CSS hover effects highlight nodes. The root background shifts to a warm hue, and clicking anywhere resets the view.

AAkriti97
70% match
Loading thumbnail…

fresh block

This example shows a hierarchical tree of machine-learning topics as a tidy dendrogram, with internal nodes drawn as dark circles and leaf nodes as lighter ones. Each node displays a label, and the data is loaded from a local CSV file using `d3.csv` and structured with `d3.stratify`. The layout is computed by `d3.cluster`, and the curved links between parent and child nodes are rendered as SVG paths with a custom cubic Bézier curve. Clicking any node opens a new browser window.

HHamishWoodrow
69% match
Loading thumbnail…

fresh block

This visualization gallery entry presents a suite of D3.js charts, each embedded via external scripts and configured through data attributes. It shows multiple interactive views of 2018 data, including regional comparisons, partner breakdowns, and beneficiary analyses, with toggles for sorting and average lines. The code leverages D3.js for rendering, with responsive layouts and lazy loading, while the source data is fetched from linked gist-hosted scripts.

GGerardoFurtado
69% match
Loading thumbnail…

fresh block

A collapsible tree visualization displays a hierarchical document structure, with nodes representing items in an "ETO Document Suite." The visualization uses D3.js v3 to render SVG nodes and links, with collapsible branches and a text input to filter or reset the tree to its root. Animated transitions smooth node expansion and collapse. The tree layout uses `d3.layout.tree` with a diagonal path generator, and the data source is a static array of parent-child pairs. Hover tooltips and custom styling are included, while a fixed logo and header image are embedded via SVG image elements.

FFraserMacMillanGithub
69% match