Quick, Draw! d3 & SVG demo

100%

Quick, Draw! d3 & SVG demo

✓ Published0🌍 Public

Last edited May 20, 2017

Created on May 20, 2017

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.

AI-generated description

A simple example showing one way to render some Quick, Draw! data with d3.js & SVG.

The data was prepared using ndjson-cli as documented here.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/a2b28f0ed18b891f9fb70910f1b8886d'>Quick, Draw! d3 & SVG demo</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a stylized face composed of thick, round-ended lines, rendered as SVG paths. The face is constructed from simple geometric shapes, with the `stroke-linejoin` and `stroke-linecap` properties giving the lines their smooth, playful appearance. The code defines a static layout within an SVG canvas, using D3’s selection and attribute methods to set path data and styling. No data source is loaded; instead, the visualization is entirely hand-coded, focusing on the aesthetic potential of SVG stroke properties.

11995ana

77% match

Loading thumbnail…

Face with D3

This example uses D3 to render a face constructed from stylized line segments, with the entire drawing output as SVG. The visualization relies on D3’s force simulation to position the facial features dynamically, while the CSS defines thick, round-joined strokes with a purple color for the lines. The face emerges from the coordinated placement of paths within a fixed 960×500 SVG canvas, showing how D3 can drive both layout and rendering. The code uses `d3.forceSimulation` to compute the arrangement of elements, and the SVG paths are styled via the `.lines` class.

Aalexrigby

77% match

Loading thumbnail…

Lets make a face!

This example visualizes a simple line drawing of a human face using only two data points as input. The face is rendered as an SVG path, with its shape generated through a force-directed layout simulation using `d3.forceSimulation`. The code applies thick, rounded strokes via the `.lines` and `.lines path` CSS classes, giving the face a soft, cartoon-like appearance. All drawing happens directly in the browser with D3.js v5, and the visualization updates dynamically as the simulation runs.

LLonkiSolomki

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

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

75% match

Loading thumbnail…

Let's make a face with D3.js!

A face constructed from animated SVG line elements demonstrates how D3.js and raw SVG markup can build playful, expressive visual compositions. The example relies on D3.js v3 to generate and animate coordinated paths, with each line styled through CSS classes and applied stroke properties. The face emerges from a set of curves, using SVG’s `<path>` elements, coordinated via a force-directed simulation, while the overall canvas is set within an `index.html` file of 960x500 pixels. The rendering happens entirely in the browser as an SVG, with the `d3` script embedded directly on the page.

KKCharoenkwan

75% match

Loading thumbnail…

Make a Face With D3JS

This example shows how to construct a simple face using SVG shapes within a 960-by-500 pixel canvas. The illustration is built entirely through D3.js v5 selections, using the `select` method to target the SVG element and appending paths and lines with distinct stroke styling. The CSS defines a `.lines` class that applies thick, rounded strokes in a teal color, while the JavaScript file remains minimal, suggesting the face’s features are drawn via the stylesheet definitions. The code relies on basic D3 selection and SVG geometry rather than data-driven binding, demonstrating a lightweight approach to static vector art.

Aarg04

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

74% match