Sol Lewitt - D3 1 shape

100%

Sol Lewitt - D3 1 shape

✓ Published1🌍 Public

Last edited Feb 21, 2025

Created on Dec 17, 2024

This example reproduces a family tree as an interactive force-directed graph, loading data from a CSV and arranging nodes with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`. Draggable circles represent individuals, with lines showing parent–child links; hovering reveals a tooltip via D3's `title` element. The code builds a hierarchy from flat CSV rows and uses D3 v7's `d3.csv` and `d3.hierarchy` to structure the data before simulation.

AI-generated description

Trying to reproduce Sol Lewitt art in D3.

To know which version is the latest D3, go to Unpkg.com - when produced, latest version was D3.7.9

package.json --> used to pull in D3.js latest version

MIT Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph - Simple

This example displays a simple force-directed graph built from a CSV file containing hierarchical data, showing parent-child relationships as an interactive tree layout with curved links and labeled circular nodes. The code uses d3.v5’s `d3.csv`, `d3.stratify`, and `d3.hierarchy` to transform the flat tabular data into a tree structure, which is then rendered as an SVG via the `d3.tree()` layout. Nodes are drawn as circles with text labels, connected by cubic Bézier paths, with styling applied through CSS classes.

JJimMaltby

78% match

Loading thumbnail…

Force Directed Graph - Simple

This example shows a force-directed graph built from hierarchical data stored in a flat CSV file. The visualization converts the parent-child relationships into a network layout using `d3.stratify`, then renders the resulting nodes as circles positioned by the `d3.forceSimulation` with link, charge, and center forces. The example uses D3 v5 to load the data with `d3.csv`, applies a paired color scale to nodes based on their parent, and draws the output as SVG elements. The code includes commented-out drag and tooltip interactions that are not active in the final rendering.

JJimMaltby

77% match

Loading thumbnail…

Fork of Circles with D3

This example combines a force-directed network graph and a hierarchical family tree in a single page. The network graph uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position nodes and links, with labels updated on each tick. The family tree is built with `d3.stratify` and `d3.tree`, rendering nodes as circles and connections as lines. Both visualizations use SVG, with data embedded directly in the script. Styling is applied through CSS classes, and all rendering is performed with D3 v7.

Ddmouli369@gmail.com

76% match

Loading thumbnail…

Force-Directed Tree II

A force-directed tree visualization displays the hierarchical file structure of the D3.js library, with nodes representing individual modules and paths. The layout is computed using `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and positional forces, rendering to a Canvas 2D context via `context.arc` and `context.lineTo`. Nodes are draggable, with drag behavior implemented through `d3.drag` and a simulation `find` query. Data originates from a CSV file parsed by `d3.csv` and structured with `d3.stratify`.

Mmbostock

76% match

Loading thumbnail…

(d3.js)Network Graph and Family Tree

This example displays two distinct visualizations: a network graph and a family tree. The network graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes based on attractive and repulsive forces, rendering connections as lines. The family tree uses `d3.tree` and `d3.stratify` to convert parent-child relationships into a hierarchical layout. Both visualizations render as SVG elements with nodes as styled circles and labels, with data hardcoded in JavaScript arrays.

Mmogantirudhrani@gmail.com

76% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates two distinct D3.js visualizations: an interactive network graph and a hierarchical family tree, both built from the same underlying dataset of people and relationships. The network graph uses D3’s `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes based on connections, while the family tree uses `d3.tree` and `d3.stratify` to arrange the same individuals into a clear parent-child hierarchy. Both visualizations render as SVGs, with nodes, links, and labels styled via CSS and updated dynamically through a tick handler.

VVarun Gadde

76% match

Loading thumbnail…

Force Directed Graph - Simple

A force-directed graph displays hierarchical data through a network of linked nodes. The example loads a flat CSV file, converts it into a tree hierarchy using `d3.stratify`, and renders it with SVG paths and circles. The layout is computed by `d3.tree`, with curved links drawn between parent and child nodes. The visualization uses `d3.csv`, `d3.hierarchy`, and `d3.select` to structure and display the data from `data.csv`, showing relationships from "Top Level" down to individual leaf nodes.

JJimMaltby

75% match

Loading thumbnail…

D3 Network Graph and Family Tree

This example presents a family tree and a network graph side-by-side, both visualizing the same 13-person genealogy dataset. The left panel uses a force-directed network layout, while the right panel uses a structured tree layout. The network graph employs D3's `forceSimulation` API with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while the family tree uses the `d3.tree` and `d3.stratify` functions to create a hierarchical structure from the parent-child relationships. Both are rendered as SVG with circles and text labels.

VVarun Gadde

75% match