Skip to main content
SimilarExport ZIP
100%

Art Tree

✓ Published0🌍 Public
VVicfreak10
Last edited May 26, 2020
Created on May 26, 2020
Forked from Art Tree

This data visualization displays a hierarchical tree of chemical reaction pathways, with the root substance branching into various synthesis precursors and alternative reactions. The tree layout uses the d3.tree algorithm, positioning nodes horizontally with the linkHorizontal generator to draw curved connections between parent and child nodes. The visualization renders as an SVG, pulling data from a JSON file containing substance URIs, catalog item counts, and reaction yields. The code imports specific d3 components including select, json, hierarchy, and linkHorizontal to construct the interactive diagram.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Tree with labels

A tree diagram visualizes a retrosynthetic analysis pathway for a chemical substance, with branching paths representing alternative synthesis routes and precursor compounds. Each node is labeled with its substance URI, and connecting links are drawn as horizontal paths. The visualization uses D3 version 5’s `d3.tree` layout, `d3.hierarchy`, and `d3.linkHorizontal` to compute positions and link paths, rendering to an SVG canvas. Data is loaded from a JSON file containing nested precursor and reaction alternatives.

VVicfreak10
86% match
Loading thumbnail…

Proof concept chem tree

This proof-of-concept shows a chemical synthesis tree, where substance nodes branch into alternative precursor routes, each with yield percentages and reaction URIs. The code loads a nested JSON hierarchy and renders it as horizontal dendrogram links, using `d3.hierarchy`, `d3.tree`, `d3.linkHorizontal`, and SVG path generation. Node positioning follows the tree layout’s computed coordinates, while link paths trace the parent–child relationships. The visualization is static, with no interaction or added node labels visible.

VVicfreak10
82% match
Loading thumbnail…

test1

This example visualizes a tree of chemical synthesis routes, showing a root molecule branching into multiple possible reactions and intermediate compounds. Each node represents either a chemical species or a reaction step, with scores indicating predicted feasibility. The tree is rendered as an SVG using D3.js v3, with circles for chemical nodes, rectangles for reaction nodes, and text labels. The layout uses D3’s tree hierarchy to position nodes and links, with styling applied via CSS classes. Data comes from the ASKCOS retrosynthesis API, as indicated by the SMILES URLs.

YYiming Mo
79% match
Loading thumbnail…

Art Tree

This visualization shows a tree layout of world geography, branching from continents down through regions and into individual countries. The hierarchy is rendered as an SVG path diagram using d3.hierarchy and d3.tree, with linkHorizontal generating the curved connections between nodes. The data is loaded from a JSON file with d3.json, and the layout is sized to fill the browser window using the viewport dimensions. The visualization uses a React framework and d3.v6 to display the complete geographic hierarchy without labels or interactivity.

DDannie2020
74% match
Loading thumbnail…

A

This interactive tree visualization displays hierarchical data from a JSON file using D3.js v5 and React. The visualization presents nodes as colored circles—green for parent nodes and red for leaf nodes—connected by animated horizontal links. Users can click on circles to collapse or expand subtrees, with smooth transitions updating the layout. The implementation uses d3.hierarchy, d3.tree, and d3.linkHorizontal for position calculations, while SVG elements and CSS transitions handle the rendering and animation effects.

Aamorenos25
73% match
Loading thumbnail…

Tree 7

This interactive tree diagram displays a hierarchical bill of materials, starting from a root part number and expanding into multiple branches of subcomponents and part numbers. Using the D3.js library (version 3.5.17) with an SVG rendering, the visualization loads JSON data from `xt_tree.json` and presents it with a tidy tree layout. Nodes are clickable, allowing users to collapse or expand child nodes with smooth animated transitions via `d3.layout.tree` and `diagonal` path generators.

Nnadia-el
73% match
Loading thumbnail…

Art Tree

This visualization displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and size-scaled labels that shrink with depth. Built with D3 v6 in React, it loads hierarchical JSON data and uses `d3.tree()` with `d3.hierarchy()` to compute the layout, while `d3.linkHorizontal()` generates curved edges. Pan and zoom interactions are enabled via `d3.zoom()`, and text elements are positioned along the tree with depth-based font sizing.

Nnsadath
73% match
Loading thumbnail…

Art Tree

This visualization displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and size-scaled labels that shrink with depth. Built with D3 v6 in React, it loads hierarchical JSON data and uses `d3.tree()` with `d3.hierarchy()` to compute the layout, while `d3.linkHorizontal()` generates curved edges. Pan and zoom interactions are enabled via `d3.zoom()`, and text elements are positioned along the tree with depth-based font sizing.

Nnsadath
73% match