biPartite - Horizontal Example

100%

biPartite - Horizontal Example

✓ Published0🌍 Public

Last edited Aug 7, 2016

Created on Jun 24, 2016

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.

AI-generated description

For More examples check VizJS

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

biPartite Example I

This example demonstrates both vertical and horizontal bipartite graphs using the Viz.js biPartite API within a D3 v4 SVG environment. It visualizes a small dataset of relationships between primary and secondary categories, with two separate graphs rendered side-by-side to compare orientation styles. The code loads the Viz library and uses the `viz.bP()` function with customizable properties like bar size, padding, and edge modes. Bars are colored based on their category using the `fill` accessor, and hovering over bars triggers a transition effect as described in the accompanying readme.

NNPashaP

84% match

Loading thumbnail…

biPartite - Adding labels

This example demonstrates a biPartite visualization that links product sizes on the left to state codes on the right, with the thickness of connecting bars representing data values. The SVG rendering uses D3 v4 and the VizJS library’s `bP()` API to lay out the bipartite graph, while custom labels and percentage annotations are added via `g.selectAll(".mainBars")` and `append("text")` calls. Hover interactions trigger `mouseover` and `mouseout` functions that redraw the percentage labels based on the underlying data.

NNPashaP

82% match

Loading thumbnail…

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.

NNPashaP

81% match

Loading thumbnail…

Viz - biPartite - barSize

A bipartite diagram with adjustable bar sizing maps six relationships between three left-side categories and two right-side categories. The visualization renders as an SVG graphic, with each connection drawn as a bar whose thickness encodes the numeric value from the source data array. The example uses the D3.js v4 library and the Viz.js framework's `biPartite()` function with a `.barSize(10)` configuration. Rows are positioned through D3's SVG selection and group transform, while the data itself is embedded directly in the code as a JavaScript array of triples.

NNPashaP

78% match

Loading thumbnail…

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.

NNPashaP

78% match

Loading thumbnail…

Viz - biPartite - default

This example displays a bipartite graph with three left nodes (A, B, C) connected to two right nodes (X, Y), where link thickness encodes numeric values from the embedded data array. The SVG visualization uses the `viz.biPartite()` API from the vizjs library, invoked via `d3.select("g").call(...)`, with d3.v4 handling selection and rendering. Sub-bars on each side use the CSS class `viz-biPartite-subBar` with crisp edge rendering, while the main bars remain transparent with invisible strokes. The entire graph renders inside a 960×700 SVG canvas, translated to position the layout.

NNPashaP

78% match

Loading thumbnail…

biPartite - barSize

Two biPartite diagrams from the VizJS library compare the default and reduced bar dimensions. The left panel uses the default barSize of 35, while the right panel sets barSize to 10, making the bars thinner. Both diagrams encode categorical pairings (A, B, C with X, Y) via colored bars and semi-transparent edges, with bar height reflecting numeric values from the hardcoded data array. The example uses d3.v4 for SVG rendering and viz.bP() with a custom .fill() color mapping.

NNPashaP

77% match

Loading thumbnail…

Viz - biPartite - label

This example shows a bipartite graph with three source nodes (A, B, C) on the left and two target nodes (X, Y) on the right, where link thickness encodes the numeric edge weights. Hovering over a main bar highlights its connections and updates the percentage labels displayed on each node. The visualization is built with D3 v4 and the Viz.js library, using the `viz.biPartite()` layout to position the bars and links. Rendered as SVG, the code computes each node’s percentage from its total edge weight and formats those values with `d3.format(".0%")`.

NNPashaP

77% match