Skip to main content
SimilarExport ZIP
100%

phase transition (gas ↔ square lattice) with hysteresis

✓ Published0🌍 Public
JJazzTap
Last edited Oct 13, 2017
Created on Oct 13, 2017

This example demonstrates a phase transition between a gaseous and square-lattice state, with hysteresis, using a NetLogo agent-based model. Turtles compute a stress value based on local crowding and clumping, which drives their movement speed and turning behavior. The visualization renders turtles as semi-transparent gray particles whose opacity and position reveal collective ordering; two plots track the mean and variance of stress over time, highlighting the transition and memory effect. The code uses NetLogo’s `turtles-own`, `ask`, and `plot` primitives to simulate and display the dynamics.

AI-generated description

Similar vizzes

Loading thumbnail…

Turtle test

This stacked area chart visualizes turtle population counts for three species—Green, Loggerhead, and Hawksbill—from 1940 to 2010, based on data from `data.csv`. The chart uses `d3.stack` with `d3.stackOrderAscending` to layer the areas and `d3.area` with `d3.curveBasis` to render smooth paths in SVG. The `d3-area-label` library positions white text labels within each area, while `d3.scaleOrdinal(d3.schemeDark2)` colors the series. Hovering turns areas black, and an interactive resize listener updates the chart’s dimensions.

CChristine Lanser
51% match
Loading thumbnail…

Gist 257543a98ae32a2d951e5f3cd5a06979

This interactive visualization simulates a dynamic network of nodes and edges, showing how force-directed layouts settle into a stable configuration. The scene renders a clustered graph where nodes repel and links constrain movement, with subtle visual feedback as positions update in real time. Built with D3.js, the example uses `d3.forceSimulation` and `d3.forceManyBody` to compute physics, while a canvas element draws the animated paths and circles. The code loads a Gist-sourced dataset via a JSON request, and the simulation updates each frame, demonstrating how forces like charge and link distance shape the final network structure.

MMbrownshoes
50% match
Loading thumbnail…

Turtle Survival

This streamgraph visualizes the mock mortality rates of three sea turtle species (Green, Loggerhead, Hawksbill) from 1901 to 2000, showing their combined decline over time. The stacked area chart uses d3.nest to group data by year and d3.stack to layer the species’ counts. Each species is distinguished by a color from a d3.scaleOrdinal palette, with the SVG paths generated using d3.area. Axes are scaled with d3.scaleLinear, and data is loaded from a CSV file via d3.csv.

CChristine Lanser
50% match
Loading thumbnail…

tstat2

This interactive D3.js visualization simulates the behavior of temperature-limited blocks over a 1,500-second run. It displays two sets of rectangular blocks, each with a color gradient based on temperature values, alongside axes for temperature and position. When the user clicks the "Run" button, the blocks transition from an initial dataset to a second dataset, smoothly animating their colors and positions over ten seconds. The visualization uses d3.scaleLinear for axes and color mapping, d3.interpolateWarm for the color palette, and d3.transition with an easeLinear timing function to animate changes. A timer text element simultaneously counts up from 1 to 1,500 using a tween.

SS-trunk
50% match
Loading thumbnail…

TPN

This example visualizes a Petri net parsed from a TPN specification, showing places as circles and transitions as rectangles. The code reads the TPN file, extracts nodes and links, and uses d3.forceSimulation with forceCenter, forceManyBody, forceCollide, and forceLink to layout the graph. Marked places are highlighted with a teal fill and display their token counts as text labels. The rendering uses SVG elements (circle, rect, line, text) and a marker for arrowheads, with labels positioned near each node during the simulation’s tick events. The data source is the provided TPN file, and the visualization updates positions dynamically as the simulation runs.

BBoltMaud
50% match
Loading thumbnail…

FFT-based transition on timelines

This example demonstrates a three-stage transition between two erratic timelines, using simplified path versions to make the morphing easier to follow. The initial path first simplifies, then morphs into the final path’s simplified form, and finally complexifies into the final shape. Two models compute these simplifications: a Fast Fourier Transform (FFT) and a Moving Average. The code uses D3.js v4 with SVG and animated transitions, applying `d3.line` and `d3.curveBasis` to render the paths, with data from a CSV file.

KKcnarf
50% match
Loading thumbnail…

Transition each

This visualization animates a scatterplot of a numeric sequence, transitioning each point from a centralized starting position to its final (n, a) coordinate, where the sequence is generated by a recursive GCD-based rule. The animation uses D3 v4’s `transition` with staggered delays, while also randomizing each circle’s radius, opacity, and fill color from a categorical palette. Points are rendered as SVG circles via `d3.selectAll('circle')`, with axes added using `d3.axisBottom` and `d3.axisLeft`. The data is computed in code, referencing the Numberphile and OEIS A133058 sources.

WWill Carter
50% match
Loading thumbnail…

Force Transition

A force-directed simulation arranges 100 circles into two distinct clusters, which switch positions when a button is clicked. The chart also includes a quantitative x-axis, making the clusters' locations measurable. Built with D3 v4, it uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` forces; clicking toggles the strength of the two horizontal forces, causing the groups to slide and swap sides. The simulation is rendered as SVG and animated on each tick, with the source code compiled from ES6 using the Babel browser library.

FFrissAnalytics
50% match