drag 'n drop test

100%

drag 'n drop test

✓ Published0🌍 Public

Last edited Dec 5, 2017

Created on Dec 5, 2017

This example shows a weekly course schedule where each class is represented as a draggable horizontal bar on a grid of days and time slots. Users can move courses vertically to new time slots, and the bar turns red if it would collide with another course on the same day. Built with D3 v3’s `d3.behavior.drag`, the visualization uses `d3.time.format` for time parsing, `d3.transform` for reading translations, and Underscore.js for collision detection via intersection and containment checks. The SVG rendering includes axes, grid lines, and color-coded course categories, with data defined inline as a sample array.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

drag 'n drop test

This example presents a weekly timetable where a single course block labeled "Theo" can be dragged across a grid of five days (lundi through vendredi) and half-hour time slots. The visualization uses D3.js version 3 and underscore.js to render an SVG chart with separate axes for days and hours, along with a tooltip that appears on mouse movement. The code sets up drag behavior via `d3.behavior.drag` and scales time values using `d3.time.scale`, while the course data is stored as a simple JavaScript array with start and end times per day.

MMilowB

91% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

73% match

Loading thumbnail…

D3 Test

This example shows a directed graph of university courses, with nodes representing courses and links indicating prerequisites. Users can drag nodes to reposition them; double-clicking a node releases it from its fixed position, while dragging fixes it in place. The visualization uses D3 v3’s `d3.layout.force` for physics-based layout, with `d3.json` loading the course data from `graph.json`. Node and link positions are updated during the force simulation’s `tick` event, although the tick handler itself is left unimplemented, so nodes remain static initially. Rendering is done via SVG elements styled with CSS.

NNguyễn Nhật Minh Khôi

70% match

Loading thumbnail…

D3 Course 1: Bar Chart

This example uses D3 v5 to visualize insertions and samples over time as a bar chart, a cursor ticker, and a blocking count curve. The main bar chart displays red and steel-blue rectangles representing sample and insert events, with linear scales mapping event start times and durations to x-positions and widths, while a band scale positions rows by assigned slot. Below, a stepped line generated with `d3.line` and `curveStep` shows cursor movement, and another line tracks blocking counts, both using `scaleLinear` and `axisLeft` with grid lines. Random data is generated programmatically in `data.js` and rendered to SVG.

Ssquidan

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

69% match

Loading thumbnail…

Circle Dragging II

This example shows a canvas-based visualization where users can drag any of twenty randomly positioned circles. It uses the d3.drag module with a custom subject function for hit-testing, checking if the pointer falls within a circle’s radius. During a drag, the circle is reordered to the foreground, marked with a temporary stroke, and its position updates, triggering a redraw via render listeners. The implementation relies on D3 v4’s event handling, Canvas’s 2D context, and d3.scaleOrdinal with the schemeCategory20 palette for circle fill colors, producing smooth, interactive feedback.

Mmbostock

69% match

Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Mmbostock

69% match

Loading thumbnail…

Drag + Zoom

In this example, dots loaded from a TSV file are positioned in an SVG scatterplot with a light grid. Users can drag individual circles to move them, while clicking and dragging on the background pans the view, and the mousewheel zooms the entire scene. The code combines `d3.behavior.drag` and `d3.behavior.zoom`, using `stopPropagation` in the dragstarted handler to give dragging precedence over panning. Both behaviors update the container's transform attribute via the zoom event's translate and scale values, with dragged circles updating their cx and cy attributes.

Mmbostock

68% match