Vertical Split View

100%

Vertical Split View

✓ Published1🌍 Public

Last edited Jan 30, 2022

Created on Jan 30, 2022

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.

AI-generated description

Vertical split view creates a vertically split (multi-content) view inside the specified container (layout or view). The purpose of this is to create two reusable content view items.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Ttux.harmon@gmail.com

90% match

Loading thumbnail…

D3 drag test

This example demonstrates a draggable splitter that resizes two adjacent panes in a web layout. Using D3 v5’s `drag` behavior, dragging the central divider horizontally triggers `event.x` to update each pane’s inline width and reposition the splitter via `setOffset`. The panes hold static text, with dimensions computed from the container’s current pixel width. The implementation uses `select`, `selectAll`, and `style` from D3, plus React for overall structure, and plain CSS for layout and hover cursor styling.

Ggjonor

76% match

Loading thumbnail…

Fork of D3 drag test

Two draggable panes demonstrate interactive split-pane resizing using D3 v5 and React. The `d3.drag` API handles pointer events on a central divider, updating pane widths via the `setOffset` function, which recalculates each pane’s style width in pixels. Starting with the left pane at one-third of the viewport width, the layout responds live to dragging, with the container’s width read from its computed style. The example employs HTML/CSS for structure and styling, with D3’s `select`, `selectAll`, and `event` utilities coordinating the interaction.

Ffilipwydra

76% match

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.

Ttux.harmon@gmail.com

72% match

Loading thumbnail…

SVGs inside DIVs

This example demonstrates a split-pane layout with two resizable regions, one styled with a red background and the other green, created using a flexbox container and the `body` element fixed to the viewport. The left pane contains an SVG element, which uses a `<rect>` with a gray fill and dimensions of 500 by 900 pixels, and is scrollable via `overflow: auto`. The right pane is initially empty, and D3 v5 is loaded but not yet used for any drawing. The page structure is defined by `index.html` with `styles.css` providing the layout, while no JavaScript beyond the included script tags is visible.

CCurran Kelleher

71% match

Loading thumbnail…

react-d3

This React and D3 example demonstrates a reusable SVG container component that establishes a standard margin convention for data visualizations. The `VizContainer` component abstracts the SVG and group elements, rendering a gray background rect and an inner plotting area with a transform translation. Using React and ReactDOM for the component structure, it accepts width, height, margin, and inner dimensions as props, with an optional `showMargins` flag to display the boundary rectangles. The code sets up a 960x500 canvas with 30-pixel margins, providing boilerplate for future chart development within the translated coordinate system.

Hhemantsharma64

70% match

Loading thumbnail…

React Starter

This example demonstrates how to integrate React with D3 by building a resizable SVG container. A draggable div wrapper, observed via ResizeObserver, updates the SVG’s width and height state through a custom React hook (useState, useEffect) and D3’s drag behavior. The visualization shows the interplay between React’s declarative rendering and D3’s imperative event handling. It uses React 16, ReactDOM, d3.select, d3.drag, and d3.event to log and apply dynamic size changes.

Ggjonor

70% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This visualization gallery example presents a blank React and D3 starter template. It demonstrates a reusable `VizContainer` component that abstracts SVG and group elements, following the standard margin convention. The component accepts width, height, and margin properties, and can optionally display margin rectangles for debugging. The code uses `ReactDOM.render` to mount the app and defines a 960x500 SVG canvas with 30-pixel margins, rendering the container with a gray outer rectangle and lighter inner plotting area.

BBen Luginbuhl

69% match