100%

dex.js : Vis.js Network

✓ Published0🌍 Public

Last edited Oct 17, 2018

Created on Oct 17, 2018

This example demonstrates a network visualization of U.S. presidents, their parties, and home states, encoded as connected nodes and edges. The code uses the dex.js library with the Vis.js Network chart component to render the graph, loading data from a CSV file via d3.csv. It integrates jQuery UI layouts for a resizable interface and a configuration pane, allowing interactive adjustments to the chart’s appearance and data selection. The visualization highlights relational patterns, such as party affiliations and regional ties, through the network’s layout and styling.

AI-generated description

Vis Network

This is the dex.js Vis.js network.

References

dex.js The main site

forked from <a href='http://bl.ocks.org/PatMartin/'>PatMartin</a>'s block: <a href='http://bl.ocks.org/PatMartin/1c5ed1bfbb8d8114798c74204e2a0660'>VisNetwork</a>

mit Licensed

Similar vizzes

Loading thumbnail…

James Eanes - VI 7 - Node-Link

This example visualizes the adjacencies of 49 U.S. states and the District of Columbia as a node-link diagram, with each state represented as a circle and each shared border as a connecting line. The visualization uses D3’s force layout to position the nodes, applying charge and link distance parameters to simulate a physical network. Rendered as an SVG, the code loads data from a JSON file containing node names and edge indices, then draws circles and lines whose positions update on each tick of the force simulation.

JJamestiberiuseanes

67% match

Loading thumbnail…

Document

A network graph and a choropleth map display U.S. state names and connections. The network uses a force-directed layout with D3’s `d3.forceSimulation` to position linked nodes, while the map renders geographic boundaries via `d3.geoPath`. The visualization loads state data from a JSON file and draws SVG elements, with styling applied through Montserrat font and custom classes.

SSaurabh Gupta

66% match

Loading thumbnail…

Untitled

This example presents two linked views of the same network of U.S. states: a node-link force-directed diagram and an adjacency matrix. The matrix cells are colored by the states’ regional group, and the visualization animates reordering between sorted and categorical arrangements. Built with D3 v3, it uses `d3.layout.force` for the node layout, while the matrix uses `d3.scale.ordinal` for axes and `transition.attr` for smooth reordering.

Pprateekvasi

66% match

Loading thumbnail…

James Eanes - VI7 - Matrix View

This interactive adjacency matrix visualizes network connections between U.S. states, with each cell colored by the connected state's degree count. The SVG rendering uses D3 scales and ordinal bands to position rows and columns, while an animation transitions between sort orders (name, count, group) over 2.5 seconds. Hovering highlights the corresponding row and column labels. The data comes from the contiguous-usa.json file, containing 49 nodes and links defining state boundaries.

JJamestiberiuseanes

66% match

Loading thumbnail…

network

This network visualization shows a small social graph of seven named individuals with weighted connections between them, rendered as green nodes with yellow labels on a black background. The force-directed layout, built with d3.layout.force from d3.v4, positions nodes and links while supporting drag interaction. The code loads data from data.json via d3.json, then uses SVG line elements for links with stroke-width determined by the square root of each link's weight, and groups for nodes with attached circles and text labels.

Ddivyagunuguntla

65% match

Loading thumbnail…

A8 - Graph Visualization in D3

This example presents a graph visualization as a series of four interactive demonstrations. It first shows a node-link diagram using a force-directed layout, then compares it to an adjacency matrix representation. The visualization then implements edge-bundling for the node-link diagram and concludes with a slider that allows users to modulate the amount of tension in the edge bundling. The examples use D3.js and are embedded from VizHub, with each part linked to its source code.

DDuc Pham

65% match

Loading thumbnail…

Untitled

This example shows an interactive adjacency matrix of U.S. state connections, where cell opacity encodes link strength and color indicates whether states share a region. Users can reorder the matrix by name, link count, or region using a dropdown, with smooth animated transitions via `d3.transition`. The visualization uses `d3.scale.ordinal` and `d3.scale.linear`, and renders SVG rectangles. A custom legend built with `d3.svg.legend` maps regional colors. The data comes from a local `miserables.json` file containing states and their links.

TTimStapert

65% match

Loading thumbnail…

DataVis

This example combines an adjacency matrix with a force-directed network graph to visualize pairwise relationships from a TSV dataset of numeric node pairs. The matrix displays presence or absence of edges as black or grey cells, while the force simulation using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` positions circles representing nodes. Node colors are assigned based on degree thresholds, and users can drag nodes to rearrange the graph. Both views update simultaneously via d3 v5's zoom and drag behaviors.

EELBOUNIAmine

65% match