biPartite - fill

100%

biPartite - fill

✓ Published0🌍 Public

Last edited Aug 7, 2016

Created on Jul 6, 2016

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.

AI-generated description

viz.bP().fill

The fill method is used to set the fill color function for the bars and edges. The function will be passed an object of the type {primary:...,secondary:...} and should return a color.

The example on the left is using the primary attribute to color whereas the example on the right is using the secondary attribute to color.

For other options and examples, check VizJS

gpl-3.0 Licensed

Similar vizzes

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

86% match

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

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

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

83% match

Loading thumbnail…

Viz - biPartite - keyPrimary keySecondary value

A bipartite chart links primary groups (A, B, C) on one side to secondary subgroups (X, Y) on the other, with bar heights encoding counts. The example uses the `viz.biPartite()` constructor from the vizjs library, configuring `keyPrimary`, `keySecondary`, and `value` accessors to map the data. Rendered as SVG, the visualization is assembled via `d3.select("g").call(bP)` inside a 960×700 frame. Rectangles use crisp edges, while the main bar is drawn with transparent fill and stroke to emphasize the partition structure.

NNPashaP

82% match

Loading thumbnail…

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.

NNPashaP

82% match

Loading thumbnail…

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.

NNPashaP

81% match

Loading thumbnail…

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.

NNPashaP

81% match