Freehand drawing

100%

Freehand drawing

✓ Published0🌍 Public

Last edited Jul 12, 2015

Created on Nov 15, 2016

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.

AI-generated description

A simple freehand drawing application, based on Bostock's Line Drawing gist.

Use your stylus, fingers or mouse to draw. The color of the line can be changed by interacting with the color palette, and the canvas can be cleared by clicking the trash in the upper-right corner of the UI.

The application uses two stacked SVG elements, one for the UI and one for the canvas. This is used to disable drawing when interacting with UI elements.

Unlike Bostock's example, this application maintains a DOM-independent object to store all the drawing's data (just look at the JavaScript console each time you complete a line).

Colors are from Colorbrewer's Dark2 palette.

Similar vizzes

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

97% match

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

80% match

Loading thumbnail…

Line Drawing

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.

Mmbostock

79% match

Loading thumbnail…

Javascript

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

SShane Carey

74% match

Loading thumbnail…

Drawing pad

This interactive drawing application allows users to paint freeform strokes on a Canvas element. It uses a toolbar to select stroke color and line width, and includes a clear button to reset the drawing surface. The code uses the Canvas `getContext`, `lineTo`, and `stroke` methods to render paths as the user drags the mouse, with the canvas resizing to fit the window. The interface is styled with CSS flexbox and a gradient title.

CCora

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

72% match

Loading thumbnail…

Make Something: Fork of Mouse Follower

This example demonstrates a paint tool where a circle follows the mouse and leaves a trail of colored dots. Users draw by moving the pointer, cycle through nine colors by clicking, and adjust brush size from five preset values by right-clicking. The visualization uses a unidirectional data flow with a custom `viz` function and a `setState` callback. D3 selections handle mouse events and append SVG circles dynamically, while a text label shows the "Paint!" instruction in the center-top of the viewport.

Fflanagancarlie@gmail.com

67% match

Loading thumbnail…

Fork of Fork of Cool Art : generated line data with d3 line generator api : circle on path-1

This example displays a black canvas filled with a single smooth, multi-colored curved line and a scatter of small, similarly colorful outlined circles. The path is generated from an array of 999 random coordinate pairs using the d3.line generator with a basis curve, while the circles are drawn at the same data points. Both elements use random RGB values for their strokes. The visualization demonstrates D3 v7’s line and shape-rendering APIs to create an abstract, generative art piece entirely from synthetic data.

NNita

67% match