Brushable Network

100%

Brushable Network

✓ Published0🌍 Public

Last edited Jun 6, 2017

Created on Jan 17, 2013

A brushable network diagram displays 85 nodes as circles and their connections as lines in an SVG. The D3.js v4 code loads node positions from a local `graph.json` file, draws the links with `line` elements, and represents nodes as `circle` elements. Users can drag a rectangular selection using the `d3.brush()` API, which highlights any node falling within the brush extent by adding a "selected" class, turning its stroke red.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Brushable Network, II

A brushable network diagram renders a static graph of 80 nodes and over 200 links as SVG circles and lines. Using D3 v3, the visualization supports multiple selection modes: dragging creates a rectangular brush to select nodes, while holding SHIFT adds to or removes from the selection via XOR logic, and SHIFT-clicking toggles an individual node. The d3.svg.brush component applies an identity scale to the coordinate space, and node and link data comes from a JSON file.

Mmbostock

94% match

Loading thumbnail…

Draggable Network II

This interactive network visualization uses a force-directed layout to display a graph with 80 nodes and numerous links. Users can select individual nodes or drag a rectangular brush across the background to select multiple nodes, with the SHIFT key toggling additional selections. Once selected, nodes can be dragged to reposition, with connected links updating in real-time via the `d3.drag` and `d3.brush` APIs. Arrow keys also nudge selected nodes incrementally. The example demonstrates customizing a force-directed layout through manual adjustment, using the D3.js v4 library and rendering to SVG.

Mmbostock

78% match

Loading thumbnail…

Brushing Circles with D3-Brush

This example demonstrates interactive brushing on a scatterplot of six circles, where dragging a rectangular selection highlights overlapping data points. It shows how a brush can filter or emphasize specific marks in a visualization. The implementation uses D3’s `brush` module, with a `brush` event listener that checks each circle’s coordinates against the selection bounds to update a `highlightedSet` in the state. Circle styling (stroke, opacity) responds to the highlighted set, and the `end` event clears highlights when the brush is dismissed. The rendering uses SVG elements via D3’s `select` and `join` pattern.

CCurran Kelleher

76% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

76% match

Loading thumbnail…

Draggable Network

A force-directed network graph displays nodes and links, drawn as SVG circles and lines, with node positions pre-set from a JSON file. This example shows how to manually adjust a static layout by making each node draggable. Using `d3.drag()`, the code updates a node’s `x` and `y` properties during the drag event and directly rewrites the corresponding circle and connected link line coordinates. The data originates from the included `graph.json` file, and the implementation relies on D3 v4’s selection and drag APIs.

Mmbostock

75% match

Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

11Cr18Ni9

74% match

Loading thumbnail…

Network Graph

A network graph displays seven named nodes connected by weighted links, with node sizes and link thickness reflecting connection strength. The data, loaded from a JSON file, is rendered as an SVG using D3.js v4's force layout, which applies gravity, charge, and distance parameters to position nodes dynamically. Users can click and drag nodes to rearrange the network, while node labels and red-bordered yellow circles remain visible. The visualization uses `d3.layout.force` for simulation and `force.drag` for interactivity, with tick events updating link coordinates and node transforms.

JJerlineJJ

74% match

Loading thumbnail…

d3-brush example

A minimal interactive brush demonstration renders a 400 by 400 SVG rectangle, where the user drags to select a rectangular region. The example uses the d3-brush API from D3 version 4 to track selection coordinates, logging the starting and ending positions to the browser console during brushing and reporting the absence of a selection when the brush is cleared. The code defines the brush extent to match the full drawing area and attaches start, brush, and end event handlers.

FFrissAnalytics

74% match