fresh block

100%

✓ Published0🌍 Public

Last edited Feb 14, 2019

Created on Feb 14, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

A collapsible hierarchical tree diagram displays the structure of analytical customer data records, organized into nested categories such as raw and derived attributes. The visualization uses the D3.js v3 library with its tree layout and diagonal path generator to render SVG nodes and links. Clicking a node toggles its children, animating the expansion and collapse with transitions. The data is loaded from the dendogram.json file.

DDAVINDER

76% match

Loading thumbnail…

fresh block

This example uses D3.js (v5) to visualize a network of chemical compounds, targets, and annotations as linked circles. It shows how nodes are arranged in three concentric rings based on their group—compounds on the outer ring, targets on the middle, and annotations at the center—using `d3.forceSimulation` with a custom `forceRadial` constraint. Links between nodes are rendered as black lines, with stroke width and class names indicating link type. The code loads `nodes.csv` and `links.csv`, then applies forces for collision, link distance, and radial positioning. The resulting static SVG chart is built entirely through D3’s data-join and tick event updates.

GGerardoFurtado

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

74% match

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

KKerchoo

73% match

Loading thumbnail…

fresh block

This example displays a circular arrangement of ten circles, each with a radius of 50 pixels, positioned around a central point using a computed angle function. The visualization is built with D3.v4, rendering SVG elements onto a 960x500 canvas, with circles placed via an angular distribution formula. The code includes a mouseover event that is intended to change the circle's style, though the specific styling action is not defined. The data comes from a simple generated range of ten values.

GGJHazelaar

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

73% match