Skip to main content
SimilarExport ZIP
100%

Line Drawing

✓ Published0🌍 Public
Mmbostock
Last edited Jul 5, 2019
Created on May 19, 2015

This example demonstrates freehand line drawing through mouse drag interaction. A user presses and holds to create a smooth, flowing path rendered as an SVG stroke on a white canvas. The interaction is built using `d3.drag` to capture pointer events, while `d3.line` with the `d3.curveBasis` curve generates the smooth B-spline path through the collected points. The path elements are appended directly to the SVG container, and the code styles them with a black, three-pixel-wide stroke for a clear visual result.

AI-generated description

Drag to draw a line!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Free Hand Line D3 v4

This example demonstrates freehand line drawing in an SVG canvas. The visualization begins with a pre-generated curve and prompts the user to drag the mouse anywhere to create additional paths. It uses D3 v4's drag behavior and line generator with a basis curve to smoothly interpolate the points collected during the drag. The rendered path is styled as a tomato-colored dashed stroke, and the code creates the SVG container dynamically on the page.

CChandrakantThakkarDigiCorp
85% match
Loading thumbnail…

Freehand drawing

This freehand drawing application lets users sketch lines with a mouse, stylus, or finger on an SVG canvas, with a palette of ten colors from ColorBrewer’s Dark2 scheme and a trash icon to clear all strokes. It renders each stroke as a smooth, basis-interpolated path via `d3.svg.line`, while using `d3.behavior.drag` to capture pointer movement. Unlike a simpler variant, the app stores all drawing data in a DOM-independent object (logged to the console on stroke completion), and separates the UI and canvas into two stacked SVG elements to prevent accidental drawing when interacting with controls.

TThanaporn-sk
79% match
Loading thumbnail…

Freehand drawing

This freehand drawing application lets users create smooth, colored lines with a mouse, stylus, or finger, using a palette of Colorbrewer Dark2 colors and a trash button to clear the canvas. It maintains all drawing data in a DOM-independent JavaScript object, logging completed lines to the console. Built with D3 v3, it renders strokes as SVG paths via `d3.svg.line()` with basis interpolation, and uses `d3.behavior.drag` to capture pointer movement. Two stacked SVG layers separate the drawing surface from UI controls, preventing accidental marks when interacting with the interface.

TThanaporn-sk
79% match
Loading thumbnail…

normal-line

Two draggable points define a line segment, and the visualization highlights both its angle and its normal (perpendicular) line, which rotate and rescale as the points move. The code uses D3 v4.8.0 and a custom `drag` interaction to update an SVG. It draws the angle and normal as colored strokes, while a filled path forms a rectangle spanning the two points, with the distance computed via `Math.atan2` and `Math.sqrt`. The example demonstrates basic geometric calculations and interactive SVG rendering.

11wheel
77% 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
76% match
Loading thumbnail…

Quick, Draw! d3 & SVG demo

This example visualizes hand-drawn faces from the Quick, Draw! dataset, rendering multiple strokes as smooth, gooey lines on an SVG canvas. It maps the raw drawing coordinates into point objects and uses `d3.line` with `curveBasis` to create the paths. The strokes are grouped and laid out in a grid, with a blur and color matrix filter applied to the entire group. Pan and zoom are handled via the `d3.zoom` API, and the code styles the groups directly for performance.

TThanaporn-sk
75% match
Loading thumbnail…

HTML Starter

This example showcases a line drawing of an intricate shape that animates itself onto the screen using a stroke-dash technique. The path is drawn over three seconds with a linear ease. The code uses D3.js version 3.5.6 to select the body, append an SVG, and create the path. It then leverages `path.node().getTotalLength()` and transitions with `attrTween` to animate the `stroke-dasharray` and `stroke-dashoffset` attributes, creating the effect of the line being traced. The underlying data is a static, pre-defined SVG path.

AAndrew Yan
74% 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
74% match