Skip to main content
SimilarExport ZIP
100%

Viz - biPartite - keyPrimary keySecondary value

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

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.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

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
90% 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
86% 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
85% match
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
85% match
Loading thumbnail…

Viz - biPartite - sortPrimary

This example demonstrates a bipartite graph with two columns of nodes, showing weighted connections between three primary items (A, B, C) and two secondary items (X, Y). The primary nodes are sorted according to a custom order (B, A, C) defined in the `sortPrimary` function. Using D3 v4 and the Viz.js library, the code initializes a `viz.biPartite()` layout, applies the sorting rule via `sortPrimary`, and renders the result as SVG elements. The data is hardcoded as an array of tuples, and the visualization includes invisible main bars and a crisp-edged sub-bar style.

NNPashaP
83% 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
83% 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
83% 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
82% match