biPartite - orient

100%

biPartite - orient

✓ Published0🌍 Public

Last edited Aug 7, 2016

Created on Jul 6, 2016

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.

AI-generated description

viz.bp().orient

This method is used to set the orientation of the graph. The value can be "vertical" or "horizontal".

The graph on the left is using the default orientation which is vertical and the right graph is using the horizontal orientation.

For other options and 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

87% match

Loading thumbnail…

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.

NNPashaP

86% match

Loading thumbnail…

Viz - biPartite - orient

A horizontal bipartite graph shows two columns of three nodes (A, B, C and X, Y) connected by bezier ribbons whose thickness encodes link values from a six-row array. The visualization uses the viz.js `biPartite()` layout with `.orient("horizontal")`, rendering SVG rectangles and curved paths in an 960×550 viewport. D3 v4 handles the SVG selection and calls the layout via `viz.biPartite()`. The static data is hardcoded as a JavaScript array, with node labels and numeric link weights.

NNPashaP

84% match

Loading thumbnail…

biPartite - edgeMode

This example presents a small dataset of six categorical pairs (A–C and X–Y) as two side-by-side bipartite graphs. The left graph uses the default curved edges, while the right graph uses straight edges, both rendered with SVG shapes. The visualization is created using D3.js v4 and VizJS, leveraging the `viz.bP()` API to construct the bipartite layout and `edgeMode` to toggle between the two edge styles. Node colors are mapped from the data via a custom fill function.

NNPashaP

84% 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

83% match

Loading thumbnail…

Viz - biPartite - fill

This example shows a bipartite graph with three primary nodes on the left linked to two secondary nodes on the right, with link thickness proportional to the numeric values in the data. The visualization uses the `viz.biPartite` API from Viz.js to compute the layout, while a custom `fill` function assigns colors to each primary node. Rendered as SVG within a fixed 960×700 frame, the chart is drawn inside a `<g>` element using D3 v4, and the code sets the frame height to 700 pixels to match the canvas.

NNPashaP

83% match

Loading thumbnail…

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.

NNPashaP

83% match

Loading thumbnail…

Viz - biPartite - edgeMode

A bipartite graph connects three left-side nodes (A, B, C) to two right-side nodes (X, Y) with edge thickness proportional to link values. The example uses the Viz.js library's `biPartite` function, called with `viz.biPartite()`, and sets its `edgeMode` to "straight" for direct link rendering. Both the left and right node bars are drawn as SVGs with a main bar element that has zero fill and stroke opacity, leaving only the connecting edges visible. The underlying data is an inline array of six weighted pairs, and rendering uses D3 v4 to bind the chart to an SVG group inside a fixed 960×700 viewport.

NNPashaP

82% match