Skip to main content
SimilarExport ZIP
100%

Stressed Cells 1

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Aug 12, 2016
Created on Aug 12, 2016

Stressed Cells 1 shows 500 colored cells that deform and change opacity in response to pressure from neighboring cells, with each cell extending multiple "feelers" that shrink when overlapped by another cell's polygon. Users can drag any cell to disrupt the equilibrium and observe the cascading stress responses. The visualization uses d3.forceSimulation with custom collision and tension forces, d3.quadtree for neighbor detection, and d3.cubehelix for cell coloring, all rendered as animated SVG paths.

AI-generated description

Cells adapt their shape to their environment. When pressed by surrounding cells, they get stressed and become more opaque.

Drag a cell to play.

Made by Philippe Rivière with blockbuilder.org.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 Starter

This visualization displays student academic stress levels as a force-directed bubble cluster, with each circle representing an individual student. Users can filter by academic stage via a dropdown menu. Bubble color encodes stress intensity using a threshold scale (green, yellow, red), while bubbles cluster by study environment category (peaceful, noisy, disrupted, unknown). Implemented with d3.csv, d3.forceSimulation, d3.forceX/Y, and d3.forceCollide, the SVG rendering includes interactive tooltips showing stress, peer pressure, and home pressure details. Data is loaded from a remote CSV dataset hosted on GitHub.

Kkoushika.3002@gmail.com
72% match
Loading thumbnail…

Expand and fill force (work in progress)

Five hundred colored circles cluster in a cloud, then slowly diffuse outward as a force simulation seeks lower-density regions. The visualization uses custom forces within d3.forceSimulation, including a grid force and a hexbin-based expand force that samples random hexagon rotations and pushes nodes toward emptier neighboring bins. Rendered on Canvas, the circles respond to mouse movement, with the first node pinned to the cursor and the simulation restarting on interaction. The code employs d3.hexbin to compute density weights and d3.forceCollide to prevent overlaps.

PPhilippe Rivière
71% match
Loading thumbnail…

third

This visualization shows student academic stress levels as a bubble cluster chart, with circles colored by stress index (green, yellow, red) and grouped by study environment using d3.forceSimulation to position them around labeled cluster centers. A dropdown filters by academic stage, and hovering reveals tooltips with peer pressure and home pressure details. The code loads CSV data from a GitHub repository and renders the SVG using d3.v7, with a legend on the right side explaining the color scale.

Hh.harrycoding@gmail.com
70% match
Loading thumbnail…

Fork of first

This interactive bubble chart visualizes student academic stress levels, grouped by study environment (Peaceful, Noisy, Disrupted, Unknown). Color encodes the stress index via a threshold scale (green, yellow, red), while circle radius scales with the stress value. A dropdown filters by academic stage. Built with d3.v7, it uses `d3.forceSimulation`, plus the `forceX`, `forceY`, and `forceCollide` forces to cluster data points. A tooltip reveals detailed pressure metrics on hover. The data is loaded from a raw CSV file.

Kkoushika.3002@gmail.com
70% match
Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Mmbostock
69% match
Loading thumbnail…

Clustered Force Layout II

Ten clusters of colored circles drift and separate on a dark background, with each cluster gathering around its largest member while circles avoid overlapping. The visualization uses d3.layout.force with custom cluster and collide forces, leveraging d3.geom.quadtree for collision detection and d3.scale.category10 for colors. Data is procedurally generated in the browser, with 200 circles of varying radii across 10 groups, rendered as SVG elements.

Mmbostock
68% match
Loading thumbnail…

Arbitrary Visualization

Clicking on the canvas generates a cluster of blue-tinted, gradient-filled SVG shapes that grow, fade, and dissolve over time. Each click creates a new group of nodes connected by closed basis curves, which are then simulated through a force-directed layout using `d3.forceSimulation` with charge, collision, and Y-position forces. The nodes and links are drawn as SVG `path` elements, with a radial gradient fill and animated opacity transitions that remove each shape after a 60-second delay. The code uses d3 v4 and a custom `d3.line` with `curveBasisClosed` to define the bubble edges.

MMTClass
68% match
Loading thumbnail…

fourth

This visualization shows how student academic stress levels cluster by study environment across different academic stages. An interactive dropdown filters the dataset by academic stage, while a force-directed layout positions each student as a bubble whose size corresponds to their stress index and color reflects the same scale. The code uses d3.forceSimulation with forceX, forceY, and forceCollide to group students into labeled clusters like “Peaceful” and “Noisy” based on their study environment. Data is loaded from a remote CSV, and a tooltip reveals detailed information on hover.

Hh.harrycoding@gmail.com
68% match