Viz - biPartite - fill

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.

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.

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.

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.

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%")`.

85% match

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.

85% match

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.

84% match

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.