Skip to main content
SimilarExport ZIP
100%

Viz - biPartite - orient

✓ Published0🌍 Public
NNPashaP
Last edited Jan 7, 2018
Created on Jan 7, 2018

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.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

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
89% 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
88% 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
87% match
Loading thumbnail…

Viz - biPartite - pad

This example presents a bipartite graph visualization using the Viz.js biPartite API, which renders two vertical sets of nodes connected by curved links. The chart displays six weighted relationships between three source nodes (A, B, C) and two target nodes (X, Y), with each link’s thickness proportional to its numeric value. The visualization uses SVG rendering with custom CSS classes for bar styling, and the biPartite layout applies a padding of 10 pixels between elements. The code initializes the chart by calling `viz.biPartite().pad(10).data(data)` on a D3 v4 selection, demonstrating the integration of the Viz.js library with D3’s selection and transformation methods.

NNPashaP
87% 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
87% match
Loading thumbnail…

Viz - biPartite - min

Two small groups of nodes with three categories on the left and two on the right are connected by curved links whose thickness represents the weight of each pair. The visualization uses the `viz.biPartite()` API from VizJS to create the bipartite layout, with the `.min(50)` threshold filtering out any links whose value is below 50. The chart is rendered as an SVG inside an HTML page, and the example passes a hard-coded JavaScript array of six triples as the data source. The code also relies on D3 v4 to select the SVG `<g>` element and apply the layout.

NNPashaP
85% 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
84% match
Loading thumbnail…

Viz - biPartite - sortSecondary

A bipartite diagram shows two vertical groups of rectangles, left and right, representing categories A, B, C and X, Y, with connection bands whose thickness encodes the numeric values from a hardcoded array. The code uses the vizjs library’s `viz.biPartite()` API, passing a custom sort function to `sortSecondary()` that orders the right-side nodes using `d3.ascending` with an array index lookup. Data is supplied as an array of triples, and the visualization is rendered in SVG within an HTML page that loads D3 v4 and vizjs.

NNPashaP
84% match