Proof concept chem tree

100%

Proof concept chem tree

✓ Published1🌍 Public

Last edited May 26, 2020

Created on May 26, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

VVicfreak10

82% match

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

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

77% match

Loading thumbnail…

a Tree

A hierarchical family tree rendered as a horizontal node-link diagram. The visualization displays ancestor and descendant relationships using curved paths and text labels, with zoom and pan interaction enabled. The code uses D3 v5's `hierarchy`, `tree`, and `linkHorizontal` to compute the layout, `json` to load data from `family.json`, and `zoom` with event transforms for navigation. Nodes are drawn as SVG text elements positioned by the tree layout, while links are rendered as horizontal paths.

AAdam Sisk

69% match

Loading thumbnail…

Exercise 5

This example shows a hierarchical tree visualization generated from a JSON data source, representing the structure of an “antimony” object. The code uses the D3.js library to compute the tree layout and render the relationships as a series of horizontal links. It relies on `d3.hierarchy` to process the data, `d3.tree` for layout calculations, and `d3.linkHorizontal` to generate SVG path data for each connection, which are then appended to the SVG canvas. The visualization animates the complete dataset at once, displaying the entire tree structure without interaction.

GGrant Ferrell

69% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

69% match

Loading thumbnail…

Simple horizontal tree diagram using v5

A simple horizontal tree diagram visualizes hierarchical data with three levels: a top-level root node, two second-level branches, and two leaf nodes. The code uses D3.js v5’s `d3.tree()`, `d3.hierarchy()`, and `d3.select()` APIs to compute the layout and render SVG paths for curved links and circles for nodes, with text labels positioned left or right based on whether a node has children. The diagram is defined by a static JavaScript object `treeData` and styled via CSS classes.

Dd3noob

69% match

Loading thumbnail…

Tree Visualization with D3.js

This visualization presents a hierarchical tree of fruit categories, using circles to represent nodes and curved horizontal links to show parent-child relationships. It loads D3 v7 via UNPKG and builds the layout with `d3.tree()` on a `d3.hierarchy` data structure. The SVG renders colored node circles based on fruit-specific color data, while labels position differently for internal nodes versus leaves. The code uses `d3.linkHorizontal()` to generate paths and dynamically adjusts the SVG height from the computed tree extent.

VVinay Vemuri

69% match