tux.harmon@gmail.com

@swtharmon·6 public vizzes

Horizonal Split View

This example demonstrates a reusable horizontal split view interface for organizing content into two resizable panels within a D3.js application. The view renders an upper and lower content area, separated by a draggable resizing marker that users can adjust to change each panel’s height. Built on D3 v7 and React, the code uses closures to manage layout state and render functions, with the tabbed view and blank layout modules providing additional structural context. The example highlights a modular approach to building flexible, nested UI components using D3’s DOM manipulation capabilities.

Feb 17, 2023

Loading thumbnail…

Vertical Split View

This example demonstrates a vertically split view that divides a container into two adjustable content areas separated by a draggable resizing marker. The layout is built using React with D3 v7, featuring a tabbed view nested within the split panes. The code constructs modular, reusable view components through closure-based factory functions, managing DOM elements via D3 selections and styling with inline CSS properties. Interactive resizing is driven by mouse event handling to reposition the marker and recalculate pane dimensions dynamically.

Jan 30, 2022

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates responsive resizing in a D3.js visualization. A steel-blue diamond, formed by four connected line segments, is drawn to fill the entire browser window. The visualization uses CSS to size a container div to the viewport, and a `redraw` function reads the container's `clientWidth` and `clientHeight` on every window resize event. It then updates the SVG element's dimensions and repositions the diamond's lines with margins, ensuring the shape never extends beyond the visible area.

Jan 29, 2022

Loading thumbnail…

Tabbed View

This example demonstrates a nested tabbed view interface where users can switch between multiple panels. The outer TabbedView creates three tabs (first, second, third), and within the second tab, an inner TabbedView contains three additional tabs (one, two, three). The implementation uses d3.v7 to dynamically construct the DOM hierarchy, with a BlankLayout managing the overall viewport size. The code defines reusable layout components with customizable header, footer, and tab positioning (Left, Inner, Right), demonstrating a modular approach to building complex, resizable data visualization interfaces.

Jan 29, 2022

Loading thumbnail…

Blank Layout

A blank, blue full-window layout demonstrates the BlankLayout pattern for building responsive D3 visualizations. Using the d3.v7 library, the page fills the entire browser viewport through an absolutely positioned div, with dimensions calculated from `window.innerHeight` and `window.innerWidth`. The layout exposes a render chain that child functions can join for coordinated updates, and it tracks content dimensions during resize events. This minimal example shows how to establish a structured, method-chaining foundation for subsequent chart rendering operations.

Jan 29, 2022

Loading thumbnail…

Layout

This example demonstrates a simple window layout with a fixed header and footer, leaving the middle area for content. The code builds the layout using `layout1`, which creates `div` elements for the header, content, and footer, and an SVG element for content rendering. A diamond is drawn with four `line` elements, and its position and size are recalculated on window resize via a `window.addEventListener('resize', ...)` handler. The example uses D3 v7 and SVG, with chaining methods like `addToRender` and `render` to manage the drawing updates.

Jan 29, 2022