Skip to main content
100%

Pencil Sketch d3 v4

✓ Published0🌍 Public
Aandrew-reid
Last edited Jul 15, 2017
Created on Jul 14, 2017

The visualization shows a United States map rendered in a rough, pencil-sketch style using SVG. The map is composed of hand-drawn-like, wobbly lines that outline the country's coastline and state boundaries, created from the `coast.json` TopoJSON data. Andrew Reid's D3 v4 implementation applies a sketch effect by perturbing the paths with jitter and varying stroke widths, giving the static geographic shapes a lively, hand-drawn appearance. The example demonstrates how D3's SVG path rendering can be combined with custom geometry processing to achieve a stylized aesthetic.

AI-generated description

An attempt to re-create some of the effect of the d3v3 pencil sketch by Mike Bostok : Pencil Sketch.

The block uses d3v4, takes a line feature, converts the geographic coordinates to svg coordinates and then, when drawing the line, jitters the points and spines between them. Not quite appropriate for a spinning globe, but fine for still maps.

Similar vizzes

Loading thumbnail…

Pencil Sketch

A rotating globe appears hand-drawn, with landmasses rendered as multiple overlapping, jittered outlines in a sketchy style. The visualization uses D3’s geometry pipeline to resample, jitter, and smooth points along great arcs for a hand-drawn effect. It renders to a canvas element, animating the globe’s rotation over time. The code loads world map data from a JSON file and draws it using an orthographic projection.

Mmbostock
79% match
Loading thumbnail…

Country Map

This example visualizes a map of the United States, rendering individual state boundaries as green paths with dark strokes on a light blue SVG canvas. It uses the D3 v4 library with `d3.geoPath` and the `d3.geoAlbersUsa` projection to draw the map, while `topojson-client` converts TopoJSON data from the us-atlas dataset into GeoJSON features. The SVG is styled with a custom background color and positioned within a React-free HTML page, with margins and transform attributes controlling the layout.

Ssudeepmamidi
78% match
Loading thumbnail…

Untitled

This example displays a map of the United States with individual state boundaries rendered as SVG paths. The visualization uses TopoJSON data from the us-10m dataset, with states drawn via d3.geoPath and state borders emphasized with a white stroke. The code employs the D3 v4 library and topojson.feature to extract state geometries, while a CSS hover effect turns states red for interactive feedback. The rendering is purely SVG-based within a React framework.

MManh Pham
77% match
Loading thumbnail…

us test

This example displays a map of the United States with its states rendered as blue, interactive SVG paths that turn darker on hover. A graticule grid and a gray sphere outline provide geographic context, and the map supports pan and zoom via d3.zoom. The visualization uses d3.geoPath with a null projection to draw raw coordinates from TopoJSON data loaded from the us-atlas package, processed through topojson.feature. Styles are defined in CSS, and the code imports the d3 and topojson libraries.

GGlebenator
77% match
Loading thumbnail…

D3 map

This visualization presents a map of the United States, with each state’s geographic boundary drawn as a vector path. The code defines state outlines using SVG path data within a JavaScript object, where each state’s shape is specified as a series of coordinates. Built with React, the visualization leverages D3.js to render the map, using the path data to generate the geographic shapes through the `d3.geoPath` API. The animation-driven rendering brings the map to life, dynamically displaying the state boundaries on the canvas.

00506Zhengyi
77% match
Loading thumbnail…

Let's make a US map with D3.js!

This example renders a map of the United States using state boundaries. The map is drawn as black paths with white strokes on an SVG canvas. The code loads GeoJSON state outlines from the `us-atlas` package, converts them into topological features with the `topojson` library, and projects them using `d3.geoAlbers` with `d3.geoPath` for rendering. The visualization demonstrates a basic choropleth-ready framework without additional data encoding.

Ddaigokawabe
76% match
Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari
76% match
Loading thumbnail…

Let's make a US map with D3.js!

This example demonstrates how to create a map of the United States using D3.js, rendering each state as a green SVG path with black strokes. The code loads county-level TopoJSON data from the us-atlas package, extracts state boundaries with topojson.feature, and projects them using the d3.geoAlbersUsa() projection. State paths are generated with d3.geoPath and appended to an SVG element, with styles defined in an accompanying CSS file. The example uses D3 v5 and relies on the geo-albers-usa-territories plugin for the projection.

NNita
76% match