Skip to main content
100%

D3js Max Bill Modern Art

✓ Published0🌍 Public
Aandresin87
Last edited Feb 18, 2016
Created on Feb 18, 2016

This example visualizes a dynamic, abstract composition inspired by Max Bill’s geometric art, using a force-directed simulation to arrange colored nodes and links. The code loads data from an external JSON file and renders it with D3’s `forceSimulation` and SVG paths, updating positions each tick. Node colors and link widths are mapped from data attributes, while a canvas overlay uses `getImageData` to sample pixel colors for a subtle background texture. The visualization continuously animates as forces settle, blending modern art aesthetics with interactive data-driven layout.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist ac6609815065d552b0fb

This visualization animates a simulated physics system where nodes are connected by links and pushed apart by collision forces, with each node tracking a changing color value over time. The code uses `d3.forceSimulation` to manage node positions and velocities, while a canvas renderer draws the network each frame. A color scale maps per-node data to RGB values, and the simulation updates continuously through tick events, redrawing the scene with `context.clearRect` and `context.fillRect`. The example relies on the Force-directed graph API from D3.js and raw Canvas 2D drawing methods, with no external data source visible in the provided code snippet.

Aandybak
76% match
Loading thumbnail…

JS and HTML

This example demonstrates how to build a custom visualization by combining JavaScript and HTML with D3.js. It shows a dynamic scene driven by a force-directed simulation, where nodes move and interact in real time. The code uses `d3.forceSimulation` to compute physical forces and update node positions, while `d3.select` and `d3.create` manage the SVG container and elements. The rendering is performed entirely through JavaScript DOM manipulation, with the `index.html` file providing a minimal body that loads D3 from a CDN and attaches the `bundle.js` script. The visualization’s appearance changes dynamically, emphasizing the interplay between code, layout, and interactive graphics.

GGautier DAVID
75% match
Loading thumbnail…

Gist 160b8b16e4775e57e6f7736c7739dfd9

This visualization uses D3.js to render a network of interconnected nodes, positioned with `d3.forceSimulation` and drawn as circles on an SVG canvas. The code applies a color scale to nodes based on their degree (number of connections), and uses `d3.drag` to make nodes interactive and movable. It reads data from a simple array defined in the script, and displays the graph without axes or geographic elements. The example demonstrates force-directed layout and basic interactivity, with node colors and link strokes providing visual encoding of network structure.

Aandrei-antal
75% match
Loading thumbnail…

Gist 11145951

This visualization uses a force-directed simulation with D3’s `d3.forceSimulation` to arrange a network of linked nodes. The code loads external data (likely from a JSON or CSV file) and renders the graph as an interactive SVG, with node positions updated continuously through the simulation’s tick events. Links are drawn as simple lines, while nodes appear as colored circles, and the layout responds to mouse interactions for dragging. The example also includes a footer with social media icons, but the core graphic focuses on the dynamic network structure.

Aandybak
75% match
Loading thumbnail…

Gist 3de8cf86d3b2f2dda02884fee53b1abf

This example visualizes a force-directed network graph using D3.js, rendering clustered nodes and curved links on a dark background. It employs `d3.forceSimulation` with collision, charge, and link forces to position the nodes, while `d3.drag` enables interactive node movement. The visualization updates positions on each tick via SVG transforms, and node colors distinguish groups. Data appears to be generated inline within the JavaScript, with no external file loaded. The code uses D3 v3 APIs, including `d3.layout.force()` (the pre-v4 predecessor to `d3.forceSimulation`) and `d3.svg.diagonal` for edge paths.

AAnaMal08
75% match
Loading thumbnail…

D3 Force Simulation

This example shows a force-directed layout with 100 randomly connected nodes rendered as steelblue circles on an SVG canvas. The code creates nodes and links with random positions and connections using `d3.range` and `Math.random`. It uses `d3.select` to bind data and append circle elements with `attr` calls for positioning and styling. However, the simulation itself is not implemented—no `d3.forceSimulation` is invoked, so the graph remains static rather than animated. The visualization relies on D3 v4 and renders entirely via SVG.

CCarlosACalvo
75% match
Loading thumbnail…

Untitled

This interactive visualization displays a network of nodes connected by curved links on a dark background. Using D3’s force simulation, nodes repel each other while links maintain distances, and a zoom-and-pan canvas supports exploration. The example renders paths via `d3.forceSimulation` for physics, `d3.zoom` for viewport control, and Canvas 2D drawing for real-time rendering. Node positions update each tick, with link strokes drawn as quadratic Bézier curves, and the data appears to be synthetic, generated in code. The interface runs entirely in the browser with no external data files.

Mmaximus2581
75% match
Loading thumbnail…

Gist 422ff4efea8ee3a1f3398f709a81fe94

This example uses a force-directed graph to visualize the connections between nodes, with each node rendered as a small circle and links as lines. The simulation, powered by `d3.forceSimulation`, computes node positions based on charge and link forces, while `d3.drag` enables interactive node repositioning. The visualization updates in real time as the simulation runs, with link opacity and node radius varying based on underlying data attributes. The code relies on D3’s selection and data-binding methods, and the rendering is performed using SVG elements appended dynamically to the page.

Aandramalmen
75% match