100%

dex.js : Sankey Diagram

✓ Published0🌍 Public

Last edited Aug 7, 2017

Created on Jan 14, 2017

This example uses dex.js to render a Sankey diagram from a CSV of U.S. presidents, linking each presidency to its president, party, and home state. The code loads the data with `d3.csv`, then the `dex.charts.d3.Sankey` component visualizes the flow between categorical fields, with a configuration pane enabling interactive exploration of the chart’s options. The visualization relies on dex.js’s Bootstrap and jQuery UI integrations to manage layout and resizing.

AI-generated description

Sankey Diagram

This is the default Sankey diagram that comes with dex.js

Options

mit Licensed

Similar vizzes

Loading thumbnail…

dex.js : Vis.js Network

This example demonstrates a network visualization of U.S. presidents, their parties, and home states, encoded as connected nodes and edges. The code uses the dex.js library with the Vis.js Network chart component to render the graph, loading data from a CSV file via d3.csv. It integrates jQuery UI layouts for a resizable interface and a configuration pane, allowing interactive adjustments to the chart’s appearance and data selection. The visualization highlights relational patterns, such as party affiliations and regional ties, through the network’s layout and styling.

663anp3ca

82% match

Loading thumbnail…

dex.js : Vis.js Network

This example shows a network visualization of U.S. presidents, where each president is a node connected to their party and home state, using data from the `presidents.csv` file. The dex.js library configures a chart via `dex.charts.vis.Network`, which leverages the Vis.js library for rendering. The interface includes a configuration pane for interactive adjustments. The network is built by including four columns of the CSV data, and the chart is responsive, resizing with the browser window.

PPatMartin

82% match

Loading thumbnail…

dex.js : Clustered Force

The dex.js Sunburst visualization organizes U.S. presidential data by party and home state, using a radial hierarchical layout with colored arcs and labels. It loads `presidents.csv` via `d3.csv`, then processes the data with a `dex.csv` object and renders the chart through `dex.charts.d3.Sunburst`. The example includes an interactive configuration pane, built with `dex.ui.ConfigurationPane`, for adjusting chart settings. D3.js powers the underlying rendering, while jQuery UI and Bootstrap handle the page layout and styling. The visualization focuses on displaying categorical relationships, with label placement and dynamic sizing noted as areas for future improvement.

PPatMartin

81% match

Loading thumbnail…

Chord Diagram

This chord diagram visualizes the relationships between U.S. Presidents, their political parties, and home states, using data loaded from a CSV file. The code relies on the dex.js library’s `dex.charts.d3.Chord` component to render the diagram and includes an interactive `dex.ui.ConfigurationPane` for adjusting chart settings. The visualization uses D3.js internally, as dex.js builds on it, and the layout is managed with jQuery UI’s layout plugin to keep the chart and configuration panel responsive.

PPatMartin

80% match

Loading thumbnail…

Dendrogram

A dendrogram visualizes the hierarchical relationship among U.S. presidents, grouping them by party, then home state, and finally by presidency number. The example loads data from `presidents.csv` using D3’s `d3.csv` method and renders an interactive tree chart through the DEX library’s `dex.charts.d3.Dendrogram` component. The chart is embedded in a full-page `div` and styled with Bootstrap and jQuery UI, while the underlying D3 layout computes the branching structure.

PPatMartin

79% match

Loading thumbnail…

Parallel Coordinates

This example uses dex.js and D3 to create an interactive parallel coordinates chart of U.S. presidents, plotting categorical and ordinal variables such as presidency number, party, and home state along parallel axes. The `dex.charts.d3.ParallelCoordinates` component renders the lines, while a configuration pane built with `dex.ui.ConfigurationPane` exposes data filters and GUI options for narrowing the displayed presidents. The layout uses jQuery UI’s `layout` for resizable panels, and the labels on the outer axes may overflow into margins if not expanded.

PPatMartin

75% match

Loading thumbnail…

Radial Tree

This radial tree visualization displays the sequence of U.S. presidents, branching by party affiliation and home state, using data from a CSV file. The chart, built with dex.js and D3 v4, renders a hierarchical layout with a color scale mapping parties to red, blue, green, and black. It uses `d3.csv` to load the data and `d3.scaleOrdinal` for the color scheme, though it is not interactive. The example adapts Mike Bostock’s radial tree technique for reusable presentation.

PPatMartin

74% match

Loading thumbnail…

SANKEY Experiment

This Sankey diagram visualizes flows between named entities using d3.js v4, with data loaded from an external CSV file containing only source, target, and value columns. The chart uses the d3.sankey plugin to compute node positions and link thicknesses, rendering nodes as colored rectangles with labels and links as curved paths whose stroke width encodes flow magnitude. Hovering over a link or node reveals the exact quantity in "Widgets" via a tooltip. Nodes are draggable, and the layout dynamically recalculates link paths on drag. The example, based on D3 Tips and Tricks v4, demonstrates how to transform raw tabular CSV data into a Sankey diagram with minimal preprocessing, using d3.nest to deduplicate nodes and d3.drag for interactivity.

JJoePlant

73% match