biPartite Example I

biPartite - orient

This example demonstrates the `orient` option in the VizJS `bP` (bipartite) layout, comparing a vertical graph (the default) on the left with a horizontal variant on the right, each using the same small dataset of three primary nodes and two secondary nodes. The code embeds both charts in an SVG canvas, using D3.js v4 for DOM manipulation and the VizJS library’s `viz.bP()` API to generate the bipartite node-link diagrams. Node fill colors are assigned by a custom `fill` function mapping each primary key to a distinct hex color, while edges and bars are rendered as SVG shapes with defined opacity and stroke styles.

87% match

biPartite - fill

Two bipartite graphs show the same dataset with edges and bars colored by different categorical variables. The left chart uses the primary category for fill, while the right chart uses the secondary category. The visualization is built with the VizJS library’s `viz.bP()` API, which returns a D3 v4 SVG component. The code defines custom color functions for the fill, and the edges are rendered with a fill opacity of 0.3. Data is hardcoded as an array of tuples with primary, secondary, and two value columns. The rendering relies on SVG shapes and crisp edges for the bars.

86% match

biPartite - Basic

This example shows a basic bipartite graph with three primary nodes (A, B, C) connected to two secondary nodes (X, Y), where edge thickness encodes numeric values from a small inline data array. The visualization uses the VizJS `bP()` function, which calculates the node and edge layouts, while D3 v4 handles SVG rendering and the `fill` callback assigns categorical colors to primary nodes. The code defines custom CSS classes for bars and edges, and positions the chart within an SVG canvas.

biPartite - Linking Multiple biPartites

Two linked biPartite diagrams show the same dataset of group-to-category flows using curved and straight edges. Each diagram uses D3 v4 and the VizJS `bP()` API to render SVG bars with adjustable `value`, `barSize`, and `edgeMode` settings. Hovering over a bar in either chart triggers synchronized mouseover and mouseout transitions across both diagrams via shared event handlers, visually highlighting corresponding bars and edges.

Viz - biPartite - multiple

Two bipartite graphs display the same dataset side-by-side on an SVG canvas. Each graph uses a separate `viz.biPartite` instance, with the left showing a default value mapping and the right using a custom `value(d=>d[3])` accessor. Both graphs share synchronized mouseover and mouseout events, where hovering a main bar in either graph highlights the corresponding element in both. The example relies on the `viz.biPartite` API from vizjs, the `d3.select` and event-handling methods from D3 v4, and draws to a static SVG with no animation. The raw data is an explicit array of six source-target-value tuples.

Viz - biPartite - height width

This example presents a small bipartite graph as a height-and-width-proportional visualization, mapping two categorical groups (A–C and X–Y) to left and right node columns with link thicknesses reflecting edge weights. The code defines a tiny inline dataset and uses the `viz.biPartite()` API from the Viz.js library, invoked on an SVG container via `d3.select("g").call(bP)`. Rendering is SVG-based within a 960×400 canvas, with the graph translated to position (150,50). The chart draws crisp-edged rectangles for nodes and weighted links, while the main bar remains invisible due to low opacity styling.

biPartite - Horizontal Example

This example visualizes a bipartite relationship between service tiers (such as Elite, Grand, and Lite) and U.S. states, using horizontal bars and connecting edges to show the distribution of two numeric values per pair. The chart is built with the VizJS `bP()` API, which handles the layout and rendering in SVG, while custom colors are assigned via a `fill` callback. The underlying data is embedded directly in the script, and the visualization relies on D3 v4 for DOM selection and SVG construction.

84% match

biPartite -keyPrimary, keySecondary, value

Two bipartite graphs visualize relationships between primary and secondary keys, with bar sizes scaled by values. The left panel uses default accessors (first two columns and the third value), while the right panel reverses key roles and selects the fourth column as the value. Both are built with viz.js’s `viz.bP()` API on SVG, using D3 v4 for rendering and custom color mappings per data column.