biPartite - duration

100%

biPartite - duration

✓ Published0🌍 Public

Last edited Aug 7, 2016

Created on Jul 7, 2016

Two side-by-side bipartite graphs show how the hover transition duration affects visual feedback. The left graph uses the default 500-millisecond duration, while the right graph animates in 100 milliseconds using the `viz.bP().duration()` method from the VizJS library. Data consists of six entries mapping three primary categories to two secondary categories with numeric weights. Built with D3 v4 and SVG rendering, the code applies a color scale to primary groups and displays both nodes and edges with adjustable opacity.

AI-generated description

viz.bP().duration

This method sets the duration for the transition when hovering mouse over the parts.

The example on the left has the default duration 500 and the example on right has duration 100.

For other options and examples, check VizJS

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

biPartite - update

Six small biPartite graphs animate their edge weights as the underlying data updates every second. The visualization uses the VizJS `bP()` function with a custom `update()` method to transition between random values, while D3 v4 renders the SVG nodes and edges with animated opacity changes. The code defines three categorical colors for the left-side nodes and refreshes the bipartite layout at regular intervals, showing how the library handles dynamic data binding.

NNPashaP

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

76% match

Loading thumbnail…

Viz - biPartite - multiple

Two bipartite graphs display the same dataset side-by-side on an SVG canvas. Each graph uses a separate `viz.biPartite` instance, with the left showing a default value mapping and the right using a custom `value(d=>d[3])` accessor. Both graphs share synchronized mouseover and mouseout events, where hovering a main bar in either graph highlights the corresponding element in both. The example relies on the `viz.biPartite` API from vizjs, the `d3.select` and event-handling methods from D3 v4, and draws to a static SVG with no animation. The raw data is an explicit array of six source-target-value tuples.

NNPashaP

75% match

Loading thumbnail…

Viz - biPartite - edgeOpacity

This example shows a bipartite graph with five links connecting two sets of nodes, A–C on the left and X–Y on the right. Link edge opacity is set to 0.9 using the `viz.biPartite()` API from the Viz.js library. The chart renders in SVG, with the `d3.select("g").call(bP)` pattern applying the layout to hardcoded data arrays. The small multi-part bars for each node use CSS classes for crisp edges and transparent fills.

NNPashaP

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

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

74% match

Loading thumbnail…

biPartite - min

Two bipartite diagrams compare default group sizing with a minimum pixel height applied through the `viz.bP().min` method. The left chart shows bars whose heights directly reflect data values, while the right chart enforces a 200-pixel minimum, adding white space to smaller groups. The example uses the VizJS library with D3 v4 to render SVG shapes, coloring each primary group via a fixed color map. This option prevents label overlap by guaranteeing a readable size for small data values.

NNPashaP

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