d3 class practice

100%

d3 class practice

✓ Published0🌍 Public

Last edited Nov 16, 2021

Created on Nov 8, 2021

This example demonstrates a before-and-after image comparison slider with a draggable white divider. The interface lets users interactively reveal one of two photographs by dragging the resizer horizontally across the container. The implementation relies on plain JavaScript event listeners for mouse and touch interactions, manipulating DOM element widths and positions directly. It uses CSS gradients and flexbox for styling, with images sourced from Pexels, and does not utilize any D3 or React APIs despite the title.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

72% match

Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

KKaustav Sen

71% 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

71% 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

71% match

Loading thumbnail…

Importing

This example presents an image slider interface for a data import feature. A full-screen banner cycles through four background images with corresponding text panels, navigated by arrow controls. The slider logic uses plain JavaScript DOM manipulation, tracking image and text indices via `getElementsByTagName` and `classList`. The page also includes the D3 v5 library and the SheetJS (xlsx) library, loading them via external script tags, suggesting integration for data file handling within the static HTML structure styled by CSS.

Ddanish-nix

70% match

Loading thumbnail…

D3 Slider

A D3 slider demonstrates a draggable handle on a horizontal track, showing how a single numeric value can be changed through direct manipulation. The code uses an SVG line for the track and a circle for the handle, with the drag behavior updating the circle’s `cx` attribute based on the pointer’s x-coordinate. The handle’s position is clamped between the track’s endpoints using a ternary expression, and the `d3.behavior.drag` API handles the drag events. The example renders entirely with SVG, and the interaction logic is implemented in plain D3 without additional libraries.

CCurran Kelleher

70% match

Loading thumbnail…

MasteringD3js_Ch4.1

This example demonstrates three stages of building an interactive slider control using D3.js v5. It first shows a draggable circle using the `d3.drag` behavior, then constructs a reusable slider component with a linear scale and drag handler, and finally binds the slider to update data. The SVG rendering approach uses `d3.select` and `d3.scaleLinear` to map domain values to pixel positions, with circles and lines as visual elements. The code reflects a migration from v3 to v5, adapting drag event handling from the older API.

JJimMaltby

70% match

Loading thumbnail…

d3-simple-slider

This example demonstrates a variety of interactive slider configurations using the d3-simple-slider library, built on D3 v5. It showcases simple, stepped, time-based, filled, ranged, and vertical sliders, along with alternative handles and transitions, with each slider updating a displayed value. The page includes extended examples inspired by a New York Times article and a color picker, all rendered as SVG elements within a Bootstrap layout. The sliders are created using `d3.sliderBottom` and `d3.sliderTop` APIs, with options for tick formatting, step values, and fill colors, and respond to user input via the `onchange` event.

Ggotyou007

70% match