Relations

100%

✓ Published0🌍 Public

Last edited Jan 30, 2018

Created on Jan 30, 2018

The visualization shows a character-relationship diagram for a tabletop role-playing game, distinguishing player characters (PJ) from non-player characters (PNJ) across roles like druid, sorcerer, and noble. It uses D3 v4 to render an SVG circle layout, with an outer radius for node placement and an inner radius reserved for potential link connections. The data is loaded from an embedded CSV array listing each character’s name, class, and affiliation. The code sets up the SVG canvas and computes radial dimensions, but does not yet implement the simulation or drawing logic.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Graph

This example visualizes a network of board game relationships as an interactive force-directed graph. Nodes represent distinct games and are rendered as small circles, while curved paths between them show connections weighted by a numeric value. The visualization uses `d3.forceSimulation` with link, charge, centering, and X/Y forces to position nodes, and supports dragging with `d3.drag` to manually reposition elements. The graph reads its source and target pairs from a imported CSV file, with SVG elements styled via external CSS.

Hhaiyangwhy1015

68% match

Loading thumbnail…

new

This example visualizes a network of board game relationships as a force-directed graph. Nodes represent games and are rendered as labeled circles, while curved links connect related games, with line style and thickness differentiating link values. The visualization loads data from `board_games.csv` and uses `d3.forceSimulation` with link, charge, and centering forces to compute the layout. All elements are drawn in SVG, and nodes are interactive via `d3.drag`.

Bbpaul37@gatech.edu

68% match

Loading thumbnail…

D3 rugby plyer stats

This example presents a static SVG graphic titled "D3 rugby plyer stats," featuring two primitive shapes: a single circle and a blue rectangle. The visualization uses D3 version 6 within an HTML document, despite the absence of dynamic data or statistical plots. The scene is rendered via SVG elements, drawing the circle at coordinates (50,50) and a 300x500 rectangle at (400,100). The code directly employs SVG markup rather than higher-level D3 APIs, showing only basic shape creation without data binding or interactive behavior.

NNyashaBradleymhepo

68% match

Loading thumbnail…

Data Visualization

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

Hharika-1929

68% match

Loading thumbnail…

Network graph of social connection

This example shows a network graph of social connections, with nodes representing characters from a fictional world and links indicating relationships between them. The graph uses D3’s force layout (d3.layout.force) to position nodes, which are rendered as purple circles with dark outlines and labeled with names. Links appear as black lines, and link thickness is set based on a numeric weight attribute when present. Users can click and drag nodes to rearrange the layout, which updates in real time. The visualization reads data from a local JSON file and renders entirely in SVG.

SSamanvitha1

68% match

Loading thumbnail…

D3 Node-Link Diagram

This example demonstrates a node-link diagram representing social connections among 16 tribal groups, with 58 edges showing positive or negative relationships. A D3 force-directed layout positions the nodes using `d3.forceSimulation` with link, charge, and centering forces. Circles are rendered as SVG elements with dark blue fill and partial opacity, while lines represent connections. The data is loaded from a CSV file, and hover interactions trigger tooltip visibility. The code uses D3 v7 and includes the d3-legend and d3-scale-chromatic libraries, with the simulation updating node and link positions on each tick.

Pplai1

67% match

Loading thumbnail…

Cricle Relation Diagramming

This example presents a prototype for visualizing complex systems interactions as a circle relation diagram. It renders placeholder text on a blank page using D3 version 7. The code imports the `select` function from the D3 library and applies it to the body element, setting its text content to “Hello D3 version 7”. The visualization demonstrates a minimal setup for future network layout work, with the current output showing only static text rather than any actual node-link or circular relation rendering.

Rricphillips

67% match

Loading thumbnail…

Radial Arc Diagram

An interactive radial arc diagram displays a small network of four people—Bob, Jane, Sue, and Tom—arranged in a circle, with curved paths connecting each person to their listed connections. The visualization loads data from a local JSON file and renders nodes as circles with labels, using d3.scale.ordinal with rangePoints to position them angularly around a central point. Each link is drawn as an arc using a custom curve function that calculates chord lengths, while node labels flip orientation when positioned on the left side of the circle. The code relies on d3.json for data loading and SVG elements with D3’s enter/update selections.

Mmbostock

67% match