Skip to main content
SimilarExport ZIP
100%

test1

✓ Published0🌍 Public
YYiming Mo
Last edited Jan 4, 2020
Created on Jan 4, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

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
79% 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
78% 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
77% match
Loading thumbnail…

Tree Example

An interactive tree diagram displays hierarchical data with collapsible nodes, marking leaf nodes and internal nodes distinctly with text labels. Clicking a node toggles its child branches, with animated transitions repositioning nodes and links. The visualization uses D3.js 3.5.17, SVG rendering, and React via the VizHub framework, building the tree via `d3.layout.tree` and drawing curved diagonal links with `d3.svg.diagonal`.

JJonathan Liu
68% match
Loading thumbnail…

Tree Example

An interactive collapsible tree diagram displays hierarchical data from a hardcoded JavaScript array, with a single root node ("seat") branching into five child nodes. The visualization, built with the D3.js library (version 3.5.17) and rendered as SVG, uses animated transitions to redraw nodes and links when a node is clicked, expanding or collapsing its children. The tree layout algorithm (d3.layout.tree) positions nodes vertically by depth, while d3.svg.diagonal draws the curved links between parent and child nodes.

Sshmouelsamares
67% match
Loading thumbnail…

tree test

A hierarchical tree diagram displays a professor as the root node with three children, each branching to two or three leaf nodes. Rendered using D3.js v3 and SVG, the visualization features green circles connected by violet diagonal links and includes animated transitions when nodes are clicked. The tree layout uses `d3.layout.tree` and `d3.svg.diagonal` projections, with click handling that collapses or expands child nodes while updating positions smoothly.

SSweetierams
67% match
Loading thumbnail…

Tree

This example visualizes a hierarchical tree structure using a force-directed layout, rendering nodes and links as the graph settles into equilibrium. The React component employs the D3.js library’s `forceSimulation` and `forceLink` APIs to compute node positions and edge forces, while SVG circles and lines display the resulting network. The visualization demonstrates how D3’s data-binding updates the DOM dynamically during simulation ticks, offering an interactive view of parent-child relationships within the dataset.

66264kusuma@gmail.com
67% match
Loading thumbnail…

Tree Example

This example shows an interactive tree diagram built with D3.js, where clicking a node collapses or expands its children with smooth animated transitions. The data is a hardcoded JSON structure representing a family hierarchy, with names like Roshan and Nimmat. The code uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` to draw curved links between parent and child nodes. Node and link elements are rendered as SVG circles, text, and paths, with transitions handled by D3's `transition` API.

Ssalimjivani
67% match