Let's make a face with D3.js!

SANKEY Experiment

A Sankey diagram shows the flow of values between five nodes (node0 through node4) across three stages, with links varying in thickness according to their assigned weights. The example uses d3.v6 with the d3-sankey plugin (v0.12.3) to compute the layout, generating SVG paths via `d3.sankeyLinkHorizontal()` for the links and rectangles for the nodes. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) colors each node, and hover effects increase link opacity. Data comes from a static `sankey.json` file, demonstrating a basic multi-stage flow visualization.

84% match

SANKEY Experiment

A small Sankey diagram visualizes energy-style flows between five named people, with links and node values drawn as proportional colored bars and connecting paths. The example demonstrates loading graph data from a JSON file where node and link references use names instead of numeric indices, requiring a lookup map to connect sources and targets. Built with D3 v6 and the d3-sankey module, it renders to SVG using `d3.sankey`, `d3.sankeyLinkHorizontal`, and `d3.scaleOrdinal` for node coloring, with hover tooltips via `title` elements.

small scale sankey

This small-scale Sankey diagram visualizes the flow of values between five nodes, with links weighted by a value of 2 or 4. The diagram uses the `d3.sankey` library to calculate node and link positions, rendering the network as SVG paths and rectangles. Node color is assigned via `scaleOrdinal` with `schemeCategory10`. The data in `data.json` defines the node names and link source-target pairs. The interactive chart includes a color legend constructed from the nodes' domain, and supports zooming and panning via `d3.zoom`.

Ssp212

SANKEY Experiment

This visualization demonstrates a Sankey diagram using D3.js v5, displaying flows between nodes with width-proportional links. Built with SVG, it renders colored rectangles for nodes and semi-transparent black curves for links, with interactive drag-and-drop repositioning that triggers smooth link updates. The diagram, titled “SANKEY Experiment,” loads its data from an external JSON file and includes hover tooltips showing source, target, and value. The code adapts a D3 v4 block by d3noob and uses the custom sankey.js layout module to compute node positions and link paths, with a units label of "Widgets" and a color scale from d3.schemeCategory10.

GGerardoFurtado

SANKEY Experiment

A dynamic Sankey diagram visualizes the flow of values between five nodes using D3.js v5 and the Sankey plugin layout methods (`d3.sankey`, `sankey.layout`, and `sankey.link`). The SVG-based chart renders colored nodes and curved links with widths proportional to link values, supporting interactive node dragging via `d3.drag` to reposition elements and trigger `sankey.relayout()`. Data from a static JSON file defines node connections and quantitative weights, with hover tooltips showing source–target pairs and formatted widget counts. The example demonstrates custom link-path generation for a compact, explorable flow network.

D3 Sankey

This example demonstrates a basic D3.js Sankey diagram using the v3 API, mapping flows between nodes as proportional ribbons. It renders an energy or material flow visualization using the `d3.sankey` layout, with `d3.svg.arc` and linear gradients for smooth link transitions. The code initializes the Sankey plugin and binds data via `d3.json`, though the HTML file currently contains only placeholder text, leaving the diagram unexecuted. Built with the React framework, it relies on D3’s selection and layout methods to generate the static network graph.

Llendup71

82% match

SANKEY Experiment

This example demonstrates an interactive Sankey diagram with draggable nodes using d3.js v5. The visualization shows flow relationships between five nodes with seven weighted links, rendered as SVG paths and rectangles. The code loads data from a JSON file via d3.json, applies the d3.sankey plugin for layout computation, and uses d3.drag to enable node repositioning. A relayout function recalculates link paths dynamically when nodes are dragged. The diagram uses color from d3.scaleOrdinal and formats values as "Widgets" units.

82% match

SANKEY Experiment

A Sankey diagram visualizes the flow of quantities between five nodes, with node colors distinguishing categories and link thickness representing value. The diagram supports interactive dragging of nodes in both axes, recalculating link paths during movement. Built with D3 v4, it uses the d3.sankey plugin for layout and d3.drag for interaction. Data comes from a static JSON file, and the SVG rendering includes hover tooltips showing source, target, and formatted values in "Widgets" units.