Resumé Sankey

100%

Resumé Sankey

✓ Published0🌍 Public

Last edited Jul 26, 2016

Created on Jul 26, 2016

Resumé Sankey is a responsive Sankey diagram that visualizes a professional résumé as a flow of experiences and skills. Built with D3 v3 and rendered in SVG, it adapts its height based on viewport width. The diagram features rounded nodes colored in muted earth tones, with dashed links connecting career stages. Hovering over a node highlights its associated links while dimming unrelated connections, using CSS transitions for smooth visual feedback. The visualization is fully responsive, adjusting its layout dimensions for desktop and mobile displays.

AI-generated description

Built with blockbuilder.org

Example of a responsive resumé sankey diagram with hover effect.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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

78% match

Loading thumbnail…

SANKEY Experiment

This visualization uses a Sankey diagram to trace the flow of job applicants through a hiring pipeline, from sources like LinkedIn and referrals to outcomes such as "Interview" and "Hired." The interactive SVG graphic allows users to drag node rectangles to rearrange the layout, with the connecting links updating their paths in real time. Built with React and D3.js v4, the code loads data from a CSV file (sankey.csv) and implements custom node positioning through the `d3.drag` API, demonstrating a hand-crafted Sankey layout algorithm rather than a dedicated library.

CCaparino

78% match

Loading thumbnail…

SANKEY Experiment

This example demonstrates a Sankey diagram built with D3 v3, visualizing the flow of "Widgets" between five nodes. The SVG-based layout uses d3.sankey to compute node positions and link thicknesses, with node rectangles colored by name via a categorical scale and semi-transparent black links. Users can drag nodes vertically to rearrange the flow, triggering a relayout that updates link paths. The diagram includes hover tooltips showing source, target, and value for each link, plus node labels and value titles. Data is loaded from a small JSON file describing five nodes and seven directed weighted links.

Aadry34160

78% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays flow quantities between six named stages—Scrap, Matched, CRB, Prodc, XRM, and PN OTD—with link thickness scaled to numeric values. The D3.js v3 library’s `d3.sankey` plugin computes node positions and link paths, while `d3.behavior.drag` enables interactive node repositioning with automatic relayout. SVG rendering uses color-coded rectangles and bezier curves, with hover tooltips showing exact link and node values.

BBhavyatulasi

78% match

Loading thumbnail…

SANKEY Experiment

A Sankey diagram displays the flow of "Widgets" between five nodes, with links showing the directed transfer values. Built with D3.js version 3.5 and the sankey.js plugin, the SVG visualization renders nodes as draggable rectangles and links as curved paths whose thickness encodes flow magnitude. Data loads from an external JSON file, and the chart supports interactive node repositioning, which triggers recalculation of link paths through the sankey.relayout() method. Node and link hover tooltips reveal names and formatted values.

Dd3noob

78% match

Loading thumbnail…

SANKEY Experiment

This example demonstrates a repurposable Sankey diagram, which visualizes the flow of quantities between interconnected nodes. Built with D3 v4, it loads node and link data from an external JSON file and renders the diagram as SVG, using the `d3.sankey` plugin for layout and `d3.drag` for interactive node repositioning. The code also employs `d3.scaleOrdinal` for node coloring and `d3.format` for display values, with links drawn as cubic Bézier curves via `sankey.link()`.

PPragyagarg

77% match

Loading thumbnail…

SANKEY Experiment

This is a Sankey diagram that visualizes the flow of values between named nodes, with the source and target data loaded from an external CSV file. The diagram uses the `d3-sankey` extension library on top of d3.v6, with nodes rendered as colored rectangles and links as semi-transparent black paths with widths proportional to their values. The code explicitly formats numbers and applies a categorical color scheme using `d3.scaleOrdinal`, while interactive hover states on links increase their opacity. Rendered as SVG, the visualization includes node labels and tooltips via `title` elements.

Dd3noob

77% match

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram, built with D3.js v4, visualizes the flow of "Widgets" between five nodes. Users can click and drag the rectangular nodes in both horizontal and vertical directions, which triggers a recalculation of the diagram's layout and redraws the connecting, curved links. The example leverages a Sankey plugin adapted from Jason Davies and loads its node and link data from a local JSON file, with node colors generated from a categorical color scheme.

MMisunoKitara

77% match