Fork of Fork of treee

100%

Fork of Fork of treee

✓ Published1🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

This network visualization plots twelve fictional individuals in a circular layout, with edges linking them. Node color and size encode reported sleep hours and productivity percentages, and hovering reveals a tooltip with the exact values. The chart is built with D3 v7, using a manual circular layout rather than a force simulation, and renders as SVG with CSS transitions for the hover effect.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of treee

This example visualizes a hierarchical dataset of sleep-related attributes using a tree layout. Three person nodes branch to attribute leaves such as sleep duration, stress level, and productivity, with circles for persons and rounded rectangles for attributes. Built with D3 v7, it uses `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` to position the SVG elements. Hovering over a node highlights its circle and displays the node's name in an HTML tooltip.

VVignesh Nallamothu

84% match

Loading thumbnail…

Fork of treee

This example displays a hierarchical tree diagram illustrating sleep data for three people, with leaf nodes representing specific attributes like sleep duration, stress level, and productivity. The root node, "Sleep Data," branches to person nodes, which then branch to their respective attributes. The visualization is rendered as an SVG using D3 v7, employing the `d3.hierarchy` and `d3.tree` layout functions to position nodes and `d3.linkVertical` to draw connecting paths. Node colors vary by depth: blue for the root, yellow for person nodes, and red for attribute leaves.

VVignesh Nallamothu

82% match

Loading thumbnail…

Fork of fork

This social network visualization displays nine named individuals connected by weighted links, with node positions determined by a force-directed layout. Using the D3 v4 library through the `d3.layout.force()` API, the code creates a SVG canvas with yellow circular nodes labeled with each person’s name, while black link strokes vary in thickness according to the connection weight. The network is interactive, allowing dragging of nodes via the force layout's drag functionality, with gravity, distance, and charge parameters controlling the spatial arrangement. Data comes from a local JSON file containing node group assignments and link weights.

TTekmal-Bhavana

82% match

Loading thumbnail…

Fork of Fork of Network Graph

This visualization shows a network graph of employee relationships, with circles representing individuals and lines connecting each person to their parent node. The graph uses a force-directed layout driven by `d3.forceSimulation`, applying link distance, charge, and centering forces to position nodes. Data loads from a CSV file hosted on a Gist, and the code builds nodes and links from the Name and Parent columns. Rendered as SVG, the graph updates node positions and link coordinates on each simulation tick, with styling applied to links, circles, and text labels.

Ssdarsi2404@gmail.com

81% match

Loading thumbnail…

Fork of Fork of Network graph

This network graph displays eight employees and their weighted connections using a force-directed layout. The visualization reads data from a local `data.json` file and renders nodes as red circles with blue text labels, while purple links vary in stroke width according to each connection’s weight. The graph uses the older `d3.layout.force` API to apply gravity, charge, and distance parameters that position the nodes. SVG is the rendering approach, with drag interactions enabled through the force layout’s drag method.

Nnagamaheswar

79% match

Loading thumbnail…

Fork of Network chart

This interactive network chart displays seven named nodes connected by weighted links, with node groups distinguished through a force-directed layout that positions circles and labels on a tan background. The visualization uses d3.layout.force to simulate physics-based placement, allowing users to click and drag nodes across the SVG canvas. Data comes from an external graphFile.json containing node names and link weights, which are rendered as dark blue lines of varying thickness and green circles with 15px strokes.

SSheshidharreddy

78% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This chart visualizes the sleep duration of 17 individuals as a smooth area graph, with the filled region emphasizing the distribution of hours per person. The SVG rendering is built using D3 v6, employing `d3.scalePoint`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveMonotoneX` to generate the shaded area and its boundary line. Custom CSS styles the area and line, while `d3.axisBottom` and `d3.axisLeft` produce rotated and labeled axes for the categorical names and numerical hours.

VVignesh Nallamothu

78% match

Loading thumbnail…

Fork of Network Graph

A fork of the D3 network graph example visualizes a social network of ten people, with circular nodes representing individuals and directed links showing friendship relationships. The graph uses a force-directed layout via `d3.forceSimulation` with forces for link distance, charge repulsion, collision detection, and centering. Nodes are draggable, and hovering highlights them. Data is loaded from a JSON file containing nodes and links with relationship metadata. The visualization is rendered as an SVG with green circles, red labels, and blue arrows, using D3 v6.

BBhavanaGIrni

78% match