Vicfreak10

@Vicfreak10·6 public vizzes

Parse SVG picture

This example parses an external SVG file and injects its contents into a D3.js visualization. The code uses `d3.xml` to load the `drawing.svg`, then appends the document element directly into the SVG container, which is sized to the browser viewport via `document.body.clientWidth` and `clientHeight`. Styling defined in CSS applies to the imported paths, lines, and text. The result displays the original vector picture, with tree layout functions imported from D3 but not used in the final rendering.

Jun 19, 2020

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.

May 27, 2020

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.

May 26, 2020

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.

May 26, 2020

Loading thumbnail…

D3 Starter

This example shows a simple smiley face drawn with SVG shapes, including a yellow circle, two eyes, animated eyebrows, and a mouth created using an arc path. The animation moves the right eyebrow up and down via chained `transition` calls with a two-second duration. Built with D3 v5 within a React framework, it uses `select` to target the SVG and the `arc` generator to construct the mouth, demonstrating basic SVG rendering and animation techniques in a minimal starter template.

May 26, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository's Auto MPG Data Set. It displays each car as a red, semi-transparent circle, with axes labeled "Horsepower" and "Weight." The visualization is built using D3 v5, employing `scaleLinear` for scaling, `axisBottom` and `axisLeft` for axes with gridlines, and SVG rendering. The data is loaded from a CSV file and parsed into numeric fields before being plotted.

May 24, 2020