bP Example - Double Vertical bP with labels

100%

bP Example - Double Vertical bP with labels

✓ Published0🌍 Public

Last edited Aug 7, 2016

Created on Jun 17, 2016

Two side-by-side bP charts compare counts for product size categories across US states, with the left chart showing sales attempts and the right chart showing completed sales. Each bar is split into primary and secondary segments, labeled with category names and percentage values. The visualization uses the viz.js bP() API with custom mouseover and mouseout handlers to highlight matching bars across both charts. D3 v4 selects SVG elements and applies data from an embedded array to render the bipartite layout.

AI-generated description

For more examples, check VizJS

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

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

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

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

72% match