MasteringD3js_Ch4.1

100%

MasteringD3js_Ch4.1

✓ Published1🌍 Public

Last edited Sep 10, 2021

Created on Sep 5, 2021

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.

AI-generated description

D3 Cook Book getting used to JS in d3 CH2 Problem in converting from v3 to v5 and looks like book has practice of d3.js (https://stackoverflow.com/questions/45181773/d3-js-raw-selection-get-error-uncaught-typeerror-cannot-read-property-0-of-u) that needs to be ironed out.

MIT Licensed

Similar vizzes

Loading thumbnail…

MasteringD3js_Ch4.1_1

This example demonstrates a draggable circle implemented with D3.js v5’s drag behavior. The circle, rendered as an SVG element, moves in response to pointer events, and its new coordinates are logged to the console. The code defines a reusable chart module that builds an SVG container, appends a circle, and attaches a drag handler via `d3.drag()`. A custom event dispatcher (`d3.dispatch`) broadcasts the drag action, and the circle’s position updates using the event’s x and y properties. The example reflects an adaptation from D3 v3 to v5.

JJimMaltby

87% match

Loading thumbnail…

D3.js Round Slider

This example shows a round slider built with D3.js, where a draggable handle moves along a circular track to represent a value. The visualization renders an SVG circle as the slider’s circumference and a small draggable dot that users can click and pull around the ring. The code uses D3’s `d3.drag` and `d3.event` to handle pointer interactions, calculating the handle’s position via trigonometric functions (`Math.acos`, `Math.sin`, `Math.cos`) based on its distance from the center. The slider’s state is stored in a simple data array, and the handle’s color changes from steelblue to red while dragging, as defined in the accompanying CSS.

PPhilippe Rivière

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

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

78% match

Loading thumbnail…

MasteringD3js_Ch2 pt1

This example demonstrates four fundamental techniques for creating DOM elements with D3.js v5, adapted from a v3-era cookbook. It shows method chaining to append divs and paragraphs, the `selection.call` function to encapsulate creation logic, a custom initializer function passed to `.call()`, and finally, dynamic SVG element creation with bound data. The code uses `d3.select` (a corrected form of `d3.select`) and the enter/append pattern to build a simple bar-like structure of labeled boxes.

JJimMaltby

78% match

Loading thumbnail…

MasteringD3js_ReuseProD3_Ch2 pt1

This example demonstrates how to build reusable chart components in D3.js v5 by wrapping SVG creation logic in a function that can be called on a selection, following the pattern from Pro D3.js. The page shows two containers where an array of three string values is bound to div elements, then each div uses `selection.call()` with a custom `chart2` function to append an SVG element with a white background rectangle. The code highlights the transition from earlier D3 versions, using `data()`, `enter()`, and `append()` to manage the enter selection, with the second example adding nested divs and SVG elements.

JJimMaltby

77% match

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock

77% match

Loading thumbnail…

MyDragSlider

The graphic displays a draggable slider that controls the background color of the SVG canvas, with a shaded track, tick marks, and a circular handle. Dragging the handle changes its horizontal position along a linear scale from 1990 to 2014, and the background hue updates to a corresponding HSL color. This example uses d3.v4, SVG elements, and the `d3.drag()` API to handle pointer interactions, while the slider’s track and ticks are built with standard D3 selection and scale methods.

QQ-Zhao

77% match