Skip to main content
SimilarExport ZIP
100%

Viz - biPartite - height width

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

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.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

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

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.

NNPashaP
88% match
Loading thumbnail…

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.

NNPashaP
88% match
Loading thumbnail…

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

NNPashaP
87% match
Loading thumbnail…

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.

NNPashaP
87% 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
86% match
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…

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
85% match