LandoLabrum

@LandoLabrum·6 public vizzes

Gist 2f0e90e85ddfe277e2f664f644de42a6

This visualization displays the terms of a Master Services Agreement between Deepturn and Ready Set Book App, rendering contractual clauses as an interactive network diagram. It uses d3.forceSimulation to position nodes representing sections and provisions, with links showing references between clauses. The layout employs d3.hierarchy and d3.tree to organize the document structure hierarchically, while text labels and color-coded nodes indicate service categories like software development, billing, and payment terms. Data is parsed directly from the Markdown source file.

Sep 14, 2026

Loading thumbnail…

DEEPTURN SRT CAMERA SETUP

DEEPTURN SRT CAMERA SETUP visualizes geographic camera positions using a force-directed graph overlaid on a world map. It loads GeoJSON land boundaries and plots nodes via `d3.forceSimulation`, while projecting coordinates with `d3.geoPath` in a Canvas context. The code imports latitude/longitude data from a gistfile1.txt snippet, rendering each camera location as a circle with labels and altitude values. Hovering reveals tooltips, and the simulation animates node placement before settling into a static layout.

Jan 31, 2026

Loading thumbnail…

React + styled-components starter template

This example is a React starter template using styled-components for UI styling. It demonstrates a basic interactive keyboard component with five keys (A, S, D, F, G) that trigger sine-wave tones via the Web Audio API. A slider and number input control a pitch value, which is passed to the oscillator’s frequency when a key is pressed or released. The code uses React hooks like `useState` and `useEffect` to manage audio context, oscillator state, and pitch updates, with styled-components’ `createGlobalStyle` and template literals for global and component-level styling.

Aug 5, 2023

Loading thumbnail…

Gist 8d15c489a802400667a9e57997b4135d

This example visualizes the structure of a JavaScript object containing icon path data from Font Awesome and other sources. The code defines an object with icon names as keys and stores their SVG path strings, widths, and heights. It uses D3.js to build an interactive force-directed graph, rendering nodes and links with SVG elements. The visualization displays how these icon definitions are connected, with the data derived directly from the gist's file content.

May 30, 2023

Loading thumbnail…

useResponsive

This example demonstrates a React hook that tracks the browser viewport width in real time. It shows how components can adapt their layout based on the current window size, updating whenever the user resizes the browser. The code uses the `useState` and `useEffect` hooks from React, along with a `resize` event listener on the `window` object. The hook returns an object containing the current `width` value, which is initially undefined and then populated with `window.innerWidth` on mount and subsequent resize events. The implementation closely mirrors a `useWindowSize` hook, but only tracks width rather than both dimensions.

Jul 19, 2022

Loading thumbnail…

Dealer Monetization

This interactive visualization presents a dealer monetization hierarchy, organizing revenue streams into categories such as Sales, Service, Parts, and Rhino Linings. Clicking any node expands or collapses its child branches, using smooth animated transitions to reposition the tree. The implementation builds on D3 v3’s `d3.layout.tree` and `d3.svg.diagonal` to render nodes and curved links as SVG, with the dataset loaded from an external JSON file. Node fills change to indicate whether a branch is currently expanded or collapsed.

Dec 11, 2017