fresh block

100%

✓ Published0🌍 Public

Last edited Sep 17, 2019

Created on Sep 17, 2019

This visualization shows the ownership relationships among different cars, with a hierarchical structure indicating whether each car was owned, traded, or learned. The data is loaded from a local CSV file using `d3.csv`, then processed through the `d3.stratify` and `d3.pack` API from the d3.hierarchy extension to create a circle-packing layout. Each node is rendered as an SVG circle with reduced opacity, positioned and sized according to the layout’s computed x, y, and r values, allowing viewers to see the nested size hierarchy of car categories.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This circle packing visualization uses a hierarchical treemap-style layout to display car ownership data from a CSV file. It presents nested circles representing categories like "cars," "owned," and "traded," with leaf nodes sized according to their numerical values. The visualization uses d3.stratify() to build the hierarchy from the flat CSV, d3.hierarchy() with a sum aggregation to compute node sizes, and d3.pack() to calculate circle positions and radii. Fifty lines of code render the result as semi-transparent SVG circles with white strokes on a fixed 300×200 canvas.

DDeanna Bosschert

80% match

Loading thumbnail…

Untitled

A radial dendrogram displays a hierarchy of car-related terms, with "cars" at the center and ten categories—including "owned," "traded," and specific models like "325ci"—arranged as leaf nodes. D3’s `d3.stratify()` builds the hierarchy from the CSV-like data, while `d3.cluster()` computes the radial layout. The code draws SVG paths using `d3.linkRadial()` and renders circles and labels via `d3.pointRadial()`, with the root node emphasized by a larger radius.

JJoker-tr

76% match

Loading thumbnail…

fresh block

This example shows a hierarchical tree of analytical data categories, such as CAR, B2B, and CUSTOMER PROFILE, with branches like RAW and DERIVED leading to detailed attribute names. It renders the structure using SVG circles and links, with d3.v4's tree layout and animated transitions. The data is embedded directly in the source code as a JavaScript object, and node labels use a 10px sans-serif font.

DDAVINDER

76% 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

76% match

Loading thumbnail…

fresh block22

This visualization presents a hierarchical tree of analytical customer data, organized into categories like CAR, B2B, customer profile, contract, and service tickets. The tree shows the structure of raw and derived data fields, with leaf nodes sized by a numeric value. The code uses D3.js v4 to render the tree as SVG nodes and links. Each node is drawn as a circle with a text label, while the connecting links use a stroke-based path, and the visualization is animated.

DDAVINDER

75% match

Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This example demonstrates a circle packing visualization that encodes hierarchical data as nested circles, where the area of each circle represents a numeric size value. The visualization shows a dataset of car acquisition and trading history, with parent-child relationships defined by the CSV structure. The implementation uses d3.v4's `d3.stratify` to process the tabular data, `d3.hierarchy` with a size summation function to compute the tree structure, and `d3.pack` to generate the circle layout. Circles are rendered as SVG elements with white strokes and semi-transparent blue fills.

Oocean1225

74% 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

74% match

Loading thumbnail…

fresh block

A circular packing diagram visualizes a hierarchy of cancer types and their associated biomarkers, with nested orange circles representing categories from broad tumor classes down to specific targets like CD19 or GPC3. The layout is computed with `d3.pack` and `d3.hierarchy` on a JSON dataset, rendering as SVG circles with depth-based opacity. Clicking any circle triggers a custom function that shrinks all nodes sharing that same name to a radius of 10 via `d3.nest` lookup and direct radius manipulation.

GGerardoFurtado

73% match