Brownian Bridge

100%

Brownian Bridge

✓ Published0🌍 Public

Last edited Nov 6, 2014

Created on Mar 28, 2013

A brownian bridge visualization simulates geometric Brownian motion for Apple stock prices, with blue dots representing known monthly closing values and a gray line showing the simulated path between them. The chart supports pan and zoom via mousewheel, with active caching ensuring that random base values stay fixed as new data points are generated to fill in the domain. Sliders control volatility and drift, recalculating the path while preserving previously established Gaussian random outcomes, and a "randomize" button resets the entire world.

AI-generated description

Pan and Zoom (mousewheel) to explore the randomized data.

This experiment uses d3.js, dpl.js and pyfy.js to simulate geometric brownian motion with brownian bridge between any "known points" (either given values or already-randomized values). Active caching is utilized to ensure that any base random number stays in place until the world is re-randomized (i.e. I keep filling in missing information). This means that when volatility or drift is changed, the path is recalculated using the previously established Gaussian random outcomes.

The blue dots are known monthly closing values for APPL and the gray line is the simulated brownian motion Pan and zoom to look deeper and further. As you move around the cache will grow larger, but pressing "randomize" will reset the world to a new initial vector.

Similar vizzes

Loading thumbnail…

Brownian

This example uses D3 v7 to create an interactive SVG visualization that simulates Brownian motion and financial inflation/deflation dynamics. A large radial gradient circle follows the mouse cursor, while a separate process runs a Monte Carlo–style simulation using normally distributed random values to model changing notional values and reinvestment components. The visualization renders a dark backdrop with a white-bordered moving circle, updating in real time as the simulation runs. The code relies on D3's selection and join operations to manage dynamic SVG elements, with the simulation state logged to the console at each interval.

IItsTheSmallThings

79% match

Loading thumbnail…

Brownian Motion Urquhart

This example shows 200 points moving under the influence of three forces: Brownian motion, collision avoidance, and elastic bouncing off a circular container. The resulting point distribution is visualized through an Urquhart graph, a simplification of the Delaunay triangulation that removes the longest edge of each triangle. The simulation uses D3’s `forceSimulation` module with custom force functions for `brownian`, `collide`, and `bounce-on-container` interactions. Rendering is done on a Canvas element, where the graph’s edges are drawn with thick light-gray strokes beneath thin black lines, and each node is a small yellow-filled circle. The mouse can also drag the first node, injecting new force into the system.

PPhilippe Rivière

70% match

Loading thumbnail…

Capacity Constrained Point Distribution on Data (line chart)

A line chart of Apple stock prices (closing values from May 2012 to March 2011) is overlaid with colored circular sites that reposition via an iterative capacity-constrained point distribution algorithm. The algorithm, based on Michael Balzer’s work, swaps data points between site clusters to balance spatial occupancy. The visualization uses d3.v4 with d3.line, d3.axisBottom, d3.axisLeft, and d3.voronoi, rendering SVG circles and polygons with animated transitions via d3.interval.

PPhilippe Rivière

69% match

Loading thumbnail…

Brownian Motion Constrained in Rectangle

A canvas displays 200 particles performing Brownian motion inside a rectangle, bouncing elastically off its boundaries. The simulation uses d3.forceSimulation with custom forces for random motion and container collision, plus d3.forceCollide to prevent overlaps. A Voronoi diagram, computed with d3.voronoi, generates an Urquhart graph—its edges are drawn as thick gray lines beneath thin black ones, with white-stroked yellow dots marking each particle. Clicking drags the first node, restarting the simulation.

PPhilippe Rivière

69% match

Loading thumbnail…

D3.chart Boilerplate Example

A D3.chart boilerplate example displays Apple's stock price and 30-day average as two smooth lines over a time series, with a context area chart and a linked brush for zooming and panning the main chart. A bar chart of trading volume sits below, and the interface includes a legend with the date range. The code uses d3.scaleTime, d3.line with curveMonotoneX, d3.area, d3.brushX, and d3.axisBottom/axisLeft to render the SVG visualization, loading data from a local aapl.csv file.

深深度碎片

68% match

Loading thumbnail…

D3.chart Boilerplate Example

An interactive stock chart for Apple (AAPL) displays closing price and a moving average as two overlaid lines, with a smaller context area beneath for brushing and zooming. The chart includes volume bars and a tooltip that follows the mouse cursor. Built with D3 v3, the visualization loads time-series data from a CSV and uses d3.svg.axis, d3.time.scale, d3.svg.brush, and d3.bisector to manage axes, date parsing, range selection, and mouse interaction.

深深度碎片

68% match

Loading thumbnail…

Stock price display

This interactive line chart displays Apple stock prices over time, with a color gradient from red to green indicating value changes. Users hover over the chart to see a tooltip showing the exact price at any point. The visualization uses D3.js v4 within a React framework, reading CSV data and rendering with SVG. It employs `d3.scaleTime`, `d3.line`, and a bisector for mouse interaction, with a transparent overlay rect capturing hover events to control the focus circle and text label.

AAdvait Maduskar

67% match

Loading thumbnail…

D3.chart Boilerplate Example

A multi-panel financial chart displays Apple stock price trends from 2010, with closing prices, a moving average line, and trade volume bars in the main view. A separate brushable context area below enables zooming and panning across the full date range. Built with D3 v4, the visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.brushX` to render the SVG elements from the included aapl.csv dataset. Styling is defined in separate CSS and Stylus files.

深深度碎片

67% match