JosephSKh

@JosephSKh·3 public vizzes

d3.js selection frame example

This example demonstrates an interactive force-directed network graph with rectangle-based selection. Nodes represent characters from *Les Misérables*, with links showing their co-appearance relationships. The force simulation positions the nodes, while each node’s group is encoded with categorical colors. Users can drag nodes to reposition them within the simulation, and click individual nodes to toggle a red dashed selection ring. A separate selection module (selection.js) overlays a semi-transparent orange dashed rectangle on the SVG, allowing users to brush-select multiple nodes simultaneously; selected nodes are visually distinguished by a red dashed stroke. The visualization illustrates how to combine a force-directed layout with custom selection interactions in D3 v4.

Jun 29, 2017

Loading thumbnail…

Force-Directed Graph With Selection

This example demonstrates a minimal force-directed graph visualization, though the provided code only renders static SVG text and does not include any data or simulation logic. It uses the D3.js v4 library, specifically appending an SVG element with `d3.select` and `append`. The code sets fixed width and height attributes (960 by 500) and displays a placeholder message, leaving the actual force simulation, node selection, or graph rendering unimplemented. The visualization shows a blank canvas with instructional text, not an interactive selection interface, and relies on the browser’s SVG rendering without additional data sources or dynamic behavior.

Jun 29, 2017

Loading thumbnail…

d3.js selection frame example

This example demonstrates interactive rubber-band selection in an SVG canvas using D3.js v3. It shows how users can drag to draw a rectangular selection frame over a set of labeled circles, with the selection rectangle dynamically resizing to accommodate drags in any direction. The code uses D3’s `mousedown`, `mousemove`, and `mouseup` events on the SVG element, appending a `rect` with the `.selection` class and updating its position and dimensions via `d3.mouse`. The circles, defined in a static JavaScript array, highlight on mouseover and clear the selection on release.

Jun 29, 2017