fresh block

100%

✓ Published0🌍 Public

Last edited Apr 10, 2017

Created on Apr 10, 2017

A static tree diagram displays a small genealogical hierarchy of nine named individuals, including Eve, Cain, Seth, and Abel. The visualization renders internal and leaf nodes as distinct gray circles connected by curved links, with text labels for each name. The code builds the hierarchy from a flat array of name-parent pairs using `d3.stratify()` and renders it as SVG, though no layout algorithm or simulation is applied.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/ebb20c99d7e35f09de5131da6df81b3f'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/429a486559d434309849dbbfa9fbbcdb'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Stratify tree diagram

This visualization uses the d3.stratify layout to render a small genealogical tree from hardcoded CSV data, displaying the names Eve, Cain, Seth, and their descendants. The tree diagram uses SVG paths generated by d3.linkHorizontal for the connecting links, while text labels are positioned based on the computed x and y coordinates. The code demonstrates a React-compatible approach by importing select and tree from d3, applying a custom stratify function to parse parent-child relationships, and styling the paths with a teal stroke color defined in CSS.

NNita

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

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

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

75% match

Loading thumbnail…

fresh block

A tree diagram displays the logical structure of an AND/OR expression, with nodes for operators like "AND" and "OR" and leaf terms such as "levenshtein," "soundex," and "metaphone." The visualization, built with d3.js v3, uses the `d3.layout.tree` layout and `d3.svg.diagonal` projections to draw curved links. Circles at each node are clickable, toggling the expansion of child nodes and animating the transition using d3 transitions over a 750-millisecond duration. The tree renders as an SVG, loading its hierarchical data from the `flare.json` file.

MMattDionis

74% match

Loading thumbnail…

Family Tree

This family tree visualization displays a hierarchical dataset of family members across several generations, with nodes colored by generation and connected by animated green links. Built with D3.js v6, the code uses the `d3.stratify()` utility to structure the parent-child data and `d3.tree()` to compute the layout. Nodes are rendered as SVG circles with a 1.5-second path-drawing transition, while text labels identify each person. Generation colors are assigned via a custom `setGenerations()` switch function, ranging from orange for the root to teal for deeper levels.

GGARIDIDEEKSHITHREDDY

74% match

Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Eeravellisaimeghana

74% match