0-1CxH

@0-1CxH·7 public vizzes

Untitled

This example visualizes a network graph by rendering a JSON-graph file (wEFP.json) into an interactive display using the Sigma.js library, specifically the sigma.parsers.json API. The graph is loaded into a container with a fixed 400x400px size, and its nodes are colored with a default red (#ec5148). The rendering leverages Sigma.js’s built-in graph layout and canvas-based drawing, with the sigma.min.js core script handling the visualization. The setup is minimal, relying on Sigma’s parser to directly convert the JSON structure into a visual network.

Feb 14, 2020

Loading thumbnail…

Directed Graph Editor

This example shows an interactive directed graph editor where nodes and links can be dragged and selected within a full-screen SVG. The graph uses a force-directed layout via `d3.forceSimulation` with charge and centering forces, rendering nodes as circles and links as stroked paths. Users can add or modify connections, with selected links shown as dashed lines and reflexive edges highlighted. Styling is handled through CSS classes in `graph.css`, while the React-based version integrates these D3 v5 APIs into a component structure.

Feb 14, 2020

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor displays a network of nodes and links that respond to mouse events. Users can click nodes to select them, and drag to create or modify connections. The visualization uses D3 v5’s force simulation (`d3.forceSimulation` with `forceManyBody` and `forceCenter`) for layout, while SVG paths and circles render the graph elements. The code styles interactions through CSS classes, including draggable links and reflexive node states.

Feb 14, 2020

Loading thumbnail…

Directed Graph Editor

This interactive tool demonstrates a directed graph editor using React and D3 v5, where users can create and manipulate nodes and edges through direct manipulation. The visualization employs `d3.forceSimulation` to handle physics-based layout, with nodes rendered as circles and links as paths whose thickness and dashed styling indicate selection states. The code utilizes D3’s selection API to bind drag behavior, enabling dynamic node repositioning, while the `graph.js` script dynamically sets the SVG dimensions to the window size. Users can also draw new connections via a dragline interaction, though the implementation details for editing actions are partially implicit in the CSS and script structure.

Feb 14, 2020

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor lets users create, drag, and connect nodes with labeled links, highlighting selected edges with dashed styling. The visualization is built using D3 v5's force simulation for node placement and SVG elements for rendering, with graph interactions handled through mouse events in a React application. The code uses `d3.forceSimulation` to manage node positions and link forces, while CSS controls visual feedback such as cursor changes and stroke styles. The graph is displayed in a full-window SVG canvas.

Feb 14, 2020

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor displays nodes and edges that users can drag, select, and modify. The visualization uses d3.forceSimulation for physics-based layout, with SVG circles for nodes and paths for links. Clicking nodes toggles reflexive edges, dragging between nodes creates new links, and dragging on empty space adds nodes. The React framework manages the component structure, while D3 handles the simulation, rendering, and event handling through d3.drag and pointer coordinates.

Feb 14, 2020

Loading thumbnail…

Directed Graph Editor

This interactive tool lets users create and edit directed graphs by dragging nodes, clicking to add new ones, and selecting edges. It visualizes a force-directed layout using `d3.forceSimulation` with custom link and node elements. The code handles node dragging, edge creation between nodes, and node deletion, with reflexive edges drawn as loops. Styling distinguishes selected links with dashed strokes, while the simulation uses `d3.drag` and `d3.forceLink` to manage interactions and positions.

Feb 14, 2020