blockmarket

@blockmarket·12 public vizzes

dDLB_sim

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.

Nov 9, 2023

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.

Oct 26, 2023

Loading thumbnail…

Mouse Interactions

A black canvas responds to mouse movement by tracking the cursor with a glowing radial-gradient circle and a white text label reading “3v@n.” Simultaneously, an animated white line chart grows from left to right, plotting a random walk that meanders vertically across the screen. The visualization uses D3 v7 to manage SVG elements, with event handlers on `mousemove` and `click` updating the cursor marker, while a `setInterval` drives the chart’s incremental path construction and opacity fade.

Oct 26, 2023

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.

Jun 30, 2023

Loading thumbnail…

MyStarter

This example shows a continuous, animated line chart that grows from left to right across a black SVG canvas. Each step appends a new random value to the path, creating a lightweight, real-time visualization of random data. The code uses d3.select, d3.range, and the join API to update a single path element, with setInterval controlling the animation loop. The rendering approach leverages D3 v7’s SVG path generation and direct manipulation of the `d` attribute.

Jun 17, 2023

Loading thumbnail…

aRandom_walk?...

A gray–blue random walk unfolds across a black workspace, building a path as a timer iterates through 256 steps. Each step’s radius and color are determined by a random threshold, with the dominant color tracked and displayed in a live tally. The animation uses d3.v7 with SVG rendering and a `setInterval` loop, updating a text node to show counts, percentage progress, and the current lead.

Jun 17, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML!” centered on the screen with a large, 13em font size. The page uses plain CSS for styling and JavaScript for interactivity, though no scripts are implemented in the provided code. It serves as a basic template for embedding JavaScript and CSS in an HTML document, demonstrating a simple rendering approach without external libraries. The code includes only standard HTML elements and inline CSS classes.

Jun 16, 2023

Loading thumbnail…

Hello world!

A working black-and-white canvas displays a row of five circles that repeatedly adjusts its scale via a D3 transition, while two HTML overlay labels read “Hello world” and “a random walk?...”. The circles’ radii and fill color update on a random interval, switching between blue and gray based on a random threshold. Built with D3 v7, the example demonstrates SVG rendering and animation through D3’s `join` method and `transition` style, with a simple `setInterval` driving the stochastic size and color changes.

Jun 10, 2023

Loading thumbnail…

Graylabel.art

A monochrome interface presents five labeled funds on the left, including Risk, Return, Exposure, and Relativity, which activate on mouse hover. The visualization uses D3 v7 to render SVG rectangles and text, relying on CSS transitions for smooth fill changes and dynamic font-size adjustments. A small text div displays the hovered fund's name. The interaction logic tracks the active fund and reverts previously highlighted elements to their default state.

Jun 8, 2023

Loading thumbnail…

ello world

Seven labeled fund boxes sit in a column on the left of an SVG canvas, drawn with D3 v7. Each box reacts to mouse hover by changing its fill and making a text element display the fund name in an overlaid HTML div. The example sets up SVG rectangles and text elements with D3 joins, using JavaScript event listeners for interaction. The animation is driven by CSS transitions on the fill property.

Jun 8, 2023

Loading thumbnail…

D3 Starter

A minimal D3 starter demonstrates the simplest possible D3 v7 setup: selecting a body element and setting its text to a greeting. The example uses the `d3.select` API from the imported `d3` module within an `index.js` file, while the HTML page loads the full library from a CDN and applies a large font size via CSS. The visible result is a single centered message, with the code revealing the core pattern of chaining a selection to a text assignment. No data source or complex rendering is involved, making it a clean baseline for learning D3's fundamental selection syntax.

Jun 7, 2023

Loading thumbnail…

base ut console

This visualization presents a console interface for selecting among seven investment funds, displayed as a vertical list of labeled boxes on the left side of an SVG canvas. Each fund box is rendered as a filled rectangle with stroke styling, accompanied by a text label, using D3 v7’s data joins to bind fund names and positions. The layout calculates workspace dimensions from the browser’s inner width and height, with a black background and white foreground color scheme. The code initializes an SVG container, appends background rectangles, and positions fund entries using fixed height and margin calculations, though no interactive behavior is explicitly implemented beyond the structure.

Jun 7, 2023