Skip to main content
SimilarExport ZIP
100%

dDLB_sim

✓ Published0🌍 Public
Bblockmarket
Last edited Nov 9, 2023
Created on Nov 9, 2023

A physics-inspired financial simulation visualizes a dual-directional leveraged bond (dDLB) as an animated line chart tracking notional value and reinvestment coupon components over time. The black background features a white radial gradient circle that follows the mouse cursor, displaying "Hello World!" text. Using D3.js v7 with SVG rendering, the simulation runs a 10-millisecond interval, applying inflation and deflation volatility models with normally distributed random values to update the chart paths dynamically.

AI-generated description
MIT Licensed

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
74% match
Loading thumbnail…

Delayed Deflation Linked Bond

This example visualizes a stochastic simulation of an inflation-linked bond under periods of deflation. It shows the bond’s notional principal and reinvested coupon value evolving over time as separate lines on a dark chart. The process uses a random-walk model for inflation and deflation, updated on an interval, with the notional adjusting monthly and coupon payments added semiannually. The visualization is rendered as an SVG using D3 v7, with mouse tracking displaying a radial gradient circle and a “Hello World!” label, while the simulation runs via a `setInterval` loop and a Box-Muller transform for random normal deviates.

Bblockmarket
74% match
Loading thumbnail…

d3 selection exploration

This example demonstrates a generative, interactive line chart within a black canvas. As a timer progresses, the visualization automatically appends points to a path, creating a random walk from the bottom of the screen upward. A semi-transparent radial gradient follows the user's mouse cursor, acting as a spotlight that reveals the chart's details. The implementation relies on D3 v7's selection and `.join()` operations to efficiently manage SVG elements, with mouse events updating a circle and text label in real time.

Bblockmarket
65% match
Loading thumbnail…

Streaming Financial Chart

This example streams live financial data by updating a candlestick chart every 200 milliseconds using d3fc’s random financial data generator. It renders Bollinger Bands as shaded areas and lines over the candlesticks, with the chart’s x- and y-domains recomputed each frame from the sliding window of 110 data points. The visualization uses d3fc’s `chartSvgCartesian`, `seriesSvgCandlestick`, `seriesSvgMulti`, and the `indicatorBollingerBands` algorithm, while d3 scales and extents handle the dynamic ranges.

CColinEberhardt
65% match
Loading thumbnail…

Dsnap - Charts

This example presents a horizontal bar chart comparing 12 financial metrics, including total deposits, equity, and various credit categories, with values expressed in millions of euros. The visualization renders as an SVG with animated bars that grow in width over one second, using a quantized color scale to differentiate each category. The grid and axes are built with d3.svg.axis and linear scales, while the bar animation leverages D3’s transition API to smoothly update rectangle widths. Data is hardcoded in the script, and the chart is generated entirely with D3 v3.

MMohamedZaki
64% match
Loading thumbnail…

Yahoo Finance Chart

This example shows an interactive financial chart rendered with D3 and the d3fc library, displaying a line series that reflects external data. The visualization uses SVG for graphical output, incorporating a gradient fill beneath the chart area for visual emphasis. Its interactive features are built directly into the code, which leverages D3’s v5 API alongside d3fc’s components for charting functionality. The page also relies on babel-standalone to enable modern JavaScript syntax within the script tags, ensuring the custom chart elements and event handling execute properly in the browser.

CColinEberhardt
63% match
Loading thumbnail…

Bollinger Bands

This example uses d3fc to render a financial time series with Bollinger Bands. The chart combines a candlestick series with a line and an area series, showing the 20-day moving average and the upper/lower volatility bands. The d3 time scale is made discontinuous to skip weekends, and the x/y domains are padded to give the data breathing room. Data is loaded from a CSV, and the Bollinger indicator is computed on the open price.

CColinEberhardt
63% match
Loading thumbnail…

D3 Show Reel

The D3 Show Reel is a self-running visualization that cycles through ten chart types—lines, horizons, areas, stacked areas, streamgraph, overlapping areas, grouped bars, stacked bars, bars, and donut—using seamless animated transitions. Built with D3 v3 and rendered as SVG, it visualizes ten years of monthly stock closing prices for AAPL, AMZN, IBM, and MSFT, though axes are omitted to emphasize form over function. The piece demonstrates D3’s capacity for dynamic transitions and custom interpolation, moving from multi-line charts to horizons, stacked areas, and finally bars and a donut. Each transition is choreographed with a 2.5-second duration and 1-second delay, and the visualization is animated using a timer. Data is loaded from a CSV and nested by symbol. The author notes that while the data is real, the purpose is to showcase D3’s flexibility rather than meaningful analysis. The code is licensed under GPL-3.0.

EEssohanamKouyou
63% match