Alex Velez

@AlexVelezLl·4 public vizzes

Fork of Page Flow

This example shows a page-flow workflow diagram with colored nodes for sources, pages, and desired or undesired events, linked to illustrate navigation paths. Built with GoJS 2.1.2, it uses diagram templates for nodes and links, editable text blocks, and a layered digraph layout. Users can click a plus button on any selected node to add a new connected node, while the undo manager tracks modifications and the mouse wheel zooms the canvas.

Oct 12, 2021

Loading thumbnail…

Fork of World countries tree

This example presents a hierarchical tree of world countries, with nodes arranged using a cluster layout from D3 v5. The visualization uses data2.json to display branches for continents and regions, with leaf nodes styled as colored rectangles scaled by percentage values. D3's `d3.cluster()` and `d3.hierarchy()` arrange the tree structure, while `d3.scaleLinear()` maps data values to rectangle heights. Text elements list category names, percentages, and associated keywords for each leaf, all rendered as SVG. Zooming and panning are enabled via `d3.zoom()`.

Oct 11, 2021

Loading thumbnail…

Fork of Fault Tree

This example demonstrates a fault tree diagram built with GoJS, showing hierarchical relationships through nodes connected by orthogonal links. Each non-root node displays a gate shape—including AndGate, OrGate, Circle, or Triangle—with distinct color fills and an attached choice label. The diagram uses a TreeLayout with a vertical angle and implements drag-to-rearrange tree functionality. Code examples include node template bindings that dynamically set shape figures, fill colors, and rotation angles based on data properties, with undo/redo support enabled through the diagram’s UndoManager.

Oct 11, 2021

Loading thumbnail…

Fork of Family tree

This radial family tree visualization uses a hierarchical layout to display four generations of a family, with each person’s radial position determined by their birth year. Concentric decade rings and labels from 1930 to 2020 provide a temporal context. The code uses `d3.layout.tree` with a radial diagonal projection, `d3.svg.diagonal.radial`, and maps birth years to radii via a custom `yearToY` function. Node colors vary by depth using `d3.scale.category10`, and the SVG rendering includes interactive styling for links and nodes.

Oct 11, 2021