Nimmi Thomas

@thomasnimmi29·3 public vizzes

SANKEY Experiment

This example visualizes a notification routing workflow using a Sankey diagram, showing how 65,205 total notifications flow through matched categories like XRM, Prodc, PN OTD, and CRB, while 29,098 are scrapped. Built with React and D3.js version 3.5.17, the code defines a custom `d3.sankey` layout function that computes node positions, link depths, and bezier curve paths for SVG rendering. The diagram uses interactive node dragging and hover effects on links, with data loaded from a JSON file containing node names and link values.

Apr 6, 2020

Loading thumbnail…

ANY JSON tree (DRAFT) more data

This example visualizes a hierarchical JSON tree structure from a FileMaker Data API response, using a left-to-right tree layout to display nested data fields and values. Nodes represent objects, arrays, and leaf values, with text labels showing the data type and content. The visualization uses D3 v5’s `tree()` layout, `hierarchy()`, `linkHorizontal()` for the curved links, and `zoom()` for pan and zoom interaction. SVG rendering displays the nodes and paths, with color coding applied via `scaleSequential()` and `interpolateRainbow` from D3’s color module.

Apr 5, 2020

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, with each country name displayed as a leaf node. The tree layout, generated with d3.tree and d3.hierarchy, positions nodes horizontally, and links are drawn using d3.linkHorizontal. The SVG rendering supports zooming and panning through d3.zoom, while font size decreases with depth to emphasize hierarchy. Data comes from a JSON file with nested continent and regional groupings.

Apr 1, 2020