Skip to main content
Log in
R

robinjohn.inc@gmail.com

@SenseiTesting·12 public vizzes

Loading thumbnail…

Fork of SVT Fundamentals V2

This example presents a sign-in/sign-up form UI, demonstrating an animated toggle between the two modes with smooth transitions, including input field visibility, tab highlighting, and button label changes. The implementation relies on vanilla JavaScript functions (`sign_in`, `sign_up`) to manipulate DOM element classes and styles, while CSS handles the animations and layout. It uses jQuery for DOM traversal and event handling, and includes a PDF generation library (jsPDF) despite no PDF functionality being triggered in the visible code. React scripts are loaded but not utilized in the provided files.

Feb 25, 2025
Loading thumbnail…

Fork of Force Directed Graph with single links

This force-directed graph demonstrates how to render a single link between any two nodes. It visualizes relationships between people and animals from a nested JSON data file, using D3 v6’s `d3.forceSimulation`, `d3.forceLink`, and `d3.forceCenter` to position nodes and edges. Node icons are loaded from an external image manifest and displayed with SVG `<image>` elements, while link labels and arrowheads are drawn using `<path>` and `<textPath>` elements. The example also supports dragging and clicking nodes to fix or select them.

Aug 23, 2024
Loading thumbnail…

Fork of Zoomable Circles with D3-Zoom

This example shows a set of six colored circles that can be panned and zoomed using the d3-zoom module. It uses the `select` and `zoom` functions from d3 to attach an interactive zoom behavior to an SVG container. The current transformation state, updated via `setState` on each zoom event, is applied to the group element holding the circles, which have fixed coordinates and radii. The visualization demonstrates how to integrate d3-zoom for panning and zooming within a VizHub environment.

Aug 21, 2024
Loading thumbnail…

Fork of let's make a list from a data file! (json)

This example displays a simple bulleted list of strings loaded from a JSON data file. It shows how D3 can fetch external data and use it to build DOM elements. The code uses the `d3.json` method to load `data.json` and then leverages D3's selection API to create `<li>` elements inside a `<ul>` via `selectAll`, `data`, and `enter`. Styling is minimal, with a body reset and a `.poop` class defined in CSS but not applied.

Aug 7, 2024
Loading thumbnail…

Fork of Force-Directed Graph hierarchy with drill up & drill down

This interactive force-directed graph visualization enables hierarchical exploration of the Les Misérables character network and email-Eu-core datasets. Users can drill down into community clusters or drill up to view higher-level groupings, with the graph layout recalculating at each level. The implementation uses d3.forceSimulation for physics-based node positioning, d3.zoom for pan and zoom capabilities, and dynamically loads network data from remote text files. SVG rendering displays nodes and links, with community membership encoded through node colors. The drill-up/drill-down navigation relies on a stack-based data structure that stores previously viewed hierarchical levels.

Jul 15, 2024
Loading thumbnail…

Fork of Grakn D3 Force Graph

A force-directed graph from Grakn visualizes event and attribute nodes as rectangles and triangles. It reads network data from a JSON file, styling entities in dark blue and attributes in orange. Using D3 v4’s physics modules—`d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`—the layout is computed in SVG. Right-clicking a node opens a custom context menu, whose actions log the node to the console.

Jul 12, 2024
Loading thumbnail…

Fork of Node2Vec Force-Directed Graph

This example shows a force-directed graph of character co-occurrences in the novel *Les Misérables*, with nodes colored randomly by group and labeled with character names. The code uses D3 v7’s `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to layout the network, while `drag` and `zoom` enable interaction. Data is fetched from a remote `miserables.json` file, and the SVG rendering includes links as lines and nodes as circles with text labels.

Jul 12, 2024
Loading thumbnail…

Fork of D3 Forces - ZOOM

This example shows a small directed graph with two nodes and one link, rendered as SVG shapes whose positions are driven by D3's force simulation. It demonstrates zooming and panning interactions, along with different node styles (gray and green circles) and a thick link line. The code is implemented using `d3.forceSimulation`, `forceManyBody`, `forceCenter`, `forceLink`, `drag`, `zoom`, and `symbol` from D3 v3, with data defined in `data.js` and the graph logic in `forceGraph.js`.

Jul 11, 2024
Loading thumbnail…

Fork of Force Directed Graph Starter

A force-directed graph visualizes three nodes connected by two links, using D3's `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute positions. The SVG circles and lines update on each simulation tick. The example also demonstrates a zoom interaction by appending a circle to an SVG with `d3.zoom`, though the zoomed circle is independent of the force layout. Rendering uses SVG elements selected and manipulated via D3's `select` and data joins.

Jul 11, 2024
Loading thumbnail…

Testing Zoom

This example demonstrates interactive panning and zooming on a set of colored circles arranged in a scatter-plot-like layout. The visualization uses the `d3` library’s `zoom` API to handle user gestures, and the SVG `transform` attribute is updated dynamically to reflect the current view state. A custom data array defines the circles’ positions, sizes, and fills, and a tooltip is attached via `tip.show` and `tip.hide` on mouseover, though no tooltip content is defined here. The rendering relies on the standard `select` and `join` methods to manage SVG elements efficiently.

Jun 4, 2024
Loading thumbnail…

Testing

This example demonstrates a simple organization graph diagram with three nodes and two links, rendered as circles and lines in an SVG container. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to compute node positions and update the elements on each simulation tick. The code selects the SVG container using `d3.select`, binds data to circle and line selections, and assigns x and y attributes dynamically. The dataset is hardcoded in the JavaScript with nodes for Alice, Bob, and Carol, and the rendering is performed entirely through D3 v6's SVG manipulation.

May 31, 2024
Loading thumbnail…

SVT Fundamentals

This example demonstrates interactive SVG animations triggered by CSS transitions. It plays with two circles: one changes its fill color and stroke width on hover, while the main scene in a separate SVG uses a hardcoded path and circles with a drop shadow filter to illustrate positioning. The code uses raw SVG elements with CSS styling for hover effects, relying on a `transition: all 500ms` property. It also includes a broken radial gradient definition, alongside basic text rendering, and is built with React and rendered as SVG.

May 24, 2024