Skip to main content
SimilarExport ZIP
100%

holds simulation metrics data to speed up notebook computations

✓ Published0🌍 Public
BBBischof
Last edited Dec 1, 2018
Created on Dec 1, 2018

Streaming convergence metrics from a lightswitch simulation are plotted as progressively smoothed curves, with separate traces for mean, median, and mode across multiple simulation runs. The JSON file stores per-run arrays of values and their convergence steps, which are then rendered in a notebook using D3’s `d3.forceSimulation` layout to keep overlapping lines readable. Data comes from a gist by BBischof, and the chart highlights how quickly each statistic stabilizes toward 1.0 as iterations increase.

AI-generated description

Similar vizzes

Loading thumbnail…

convergence rates for the lightswitch simulations

The chart shows convergence rates for lightswitch simulations across different room sizes, plotting the number of steps required for the mean, median, and mode to converge to a stable value against the number of switches flipped. The visualization uses a multi-line chart, with each line representing a specific convergence metric. The data comes from a JSON file containing simulation results for room sizes from 4 to 11. The code employs D3.js to parse the data and render the chart, likely using `d3.json` for loading and `d3.line` or similar APIs for plotting the series.

BBBischof
75% match
Loading thumbnail…

Gist d1c4aa87fcfefde869f59c98b73ef3fb

This example uses a custom physics simulation to render a network of nodes and links, with each node’s position updated iteratively and drawn as a smooth curve. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute forces, while custom `requestAnimationFrame` loops and `canvas` paths render the animated edges. The data appears to be generated randomly, with no external dataset, and the visualization emphasizes the evolving structure of the simulated graph over time.

11wheel
62% match
Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Mmbostock
62% 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
61% match
Loading thumbnail…

Gist 24579e225fd76065b0ac0e72b36ea31b

This example demonstrates a performance profiling visualization for a force-directed graph simulation. It shows how long the `returnLast` function takes to execute on a dataset of star objects, displaying the elapsed time in milliseconds alongside console output. The visualization uses D3.js’s `d3.forceSimulation` to animate the graph, while custom timing logic captures start and end timestamps via `Date.now()` to measure iteration performance. The code logs the star count and elapsed time to the console, iterating through multiple frames to track timing variations. The rendering approach relies on D3’s simulation engine, with the data source being a static array of star objects defined in the script.

WWill Carter
61% match
Loading thumbnail…

Streamgraph

A streamgraph displays 20 layers of synthetic time-series data, each rendered as a filled area with a smooth, wiggle-based baseline. The visualization alternates between two precomputed datasets when the "Update" button is clicked, triggering a six-second animated transition. The code uses the D3 v3 stack layout with the "wiggle" offset, an area generator, and linear scales for x, y, and color. Layers are vertically offset with a translate transform for added padding.

CCurran Kelleher
60% match
Loading thumbnail…

Kernel Smoothing

This example visualizes kernel smoothing by plotting raw count data over time as small, semi-transparent steel-blue symbols, then overlaying a smooth black trend line that averages nearby values with an Epanechnikov kernel. The data, loaded from a CSV file, is parsed with `d3.utcParse` and drawn to a Canvas context. The custom smoothing curve is implemented via `d3.line` with a `kernelSmooth` curve factory, which computes weighted averages over a specified bandwidth. The visualization uses D3 v4 for scaling and plotting, and the result is a clear comparison between the noisy observations and the smoothed pattern.

Mmbostock
60% match
Loading thumbnail…

Box Plots

This example displays a series of box-and-whisker plots summarizing speed measurements from the Michelson–Morley experiment, with each plot representing one experimental run. The visualization periodically randomizes the underlying data values, animating the transitions using D3's `transition` API over 1000 milliseconds. The charts are rendered as SVG, with the `d3.box` custom layout implemented in the included `box.js` file. The code uses `d3.csv` to load the morley dataset and `d3.scale.linear` for positioning, while outliers, medians, and whiskers update smoothly between randomization cycles.

Mmbostock
60% match