sloped-stroke-width

100%

sloped-stroke-width

✓ Published0🌍 Public

Last edited Oct 2, 2017

Created on Sep 29, 2017

This example demonstrates why using a filled area to encode stroke width can mislead viewers when lines are sloped. Draggable circles let users adjust the data points, revealing that perceived line thickness changes with slope, while the actual distance between the top and bottom of the shape remains constant. The visualization contrasts this with a standard `stroke-width` line, which handles slope correctly. The code uses `d3.area`, `d3.line`, and `d3.drag` to build the interactive SVG chart, and a custom trigonometric function to calculate the perceived width.

AI-generated description

don't use d3.area to encode stroke-width for non stacked charts

we don't perceive the distance from the top of the line to the bottom of the line
st
strokes will do this automatically
can't do variable stroke-width though, have to write a custom area function with trig
doesn't work for stacked area charts, everything is a lie

todo

make repo
scrolly post
not sure how to compare

Similar vizzes

Loading thumbnail…

circle-stroke

A small cluster of circles illustrates an inverse relationship between stroke width and radius. Each circle’s red outline is drawn with a stroke width proportional to 1/r, so smaller circles have thicker strokes and larger circles thinner ones, while all strokes contain roughly the same number of red pixels. The composition is generated with D3.js, using SVG `circle` elements and inline `strokeWidth` bindings, with positions placed on a central layout. The code also uses lodash (via `d3_.js`) to handle array transformations, and the visualization is rendered as an animated SVG scene.

11wheel

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

71% match

Loading thumbnail…

stroke-width

This example demonstrates the visual impact of varying stroke widths on a simple pattern. It presents five white squares, each filled with vertical line textures of increasing thickness, from one to nine pixels, while the squares’ own black outlines also grow in width. The visualization is built using D3.js (v5) and the `textures` library, specifically calling `textures.lines().orientation().strokeWidth()` to generate each pattern within an SVG canvas. The code directly manipulates SVG `rect` and texture attributes to create a clear comparative scale.

Zzoniyac

70% match

Loading thumbnail…

stroke dash gap

Five circles of decreasing radius demonstrate how the stroke dash gap scales with size, using line textures as fill patterns. The example uses the textures library’s `textures.lines()` method with varying `size` parameters (from default to 10, 5, 3, and 2) to create vertical line patterns. Each circle is rendered as an SVG element with D3 v5, applying the texture URL via `.style("fill", t.url())` while maintaining a black stroke outline. The visualization highlights how pattern density changes relative to circle dimensions.

Zzoniyac

70% match

Loading thumbnail…

rounded-corner-curve

An interactive line chart demonstrates a technique for drawing smooth paths with rounded corners through data points, contrasting it with a standard linear interpolation. The example generates random data and displays two paths: a default black line and a magenta path with rounded corners. Moving the mouse horizontally adjusts the rounding intensity in real time, revealing how the SVG path `C` (cubic Bézier) commands create the effect. The code uses d3.js for data generation and SVG path construction, with custom logic for path string manipulation.

11wheel

70% match

Loading thumbnail…

Svelte + D3: Reveal area chart

A responsive area chart reveals a pink-filled curve and its stroke line from behind a sliding rectangular mask. Built with Svelte and D3, the visualization maps a fixed dataset of x and y values using `scaleLinear` and renders smooth paths via `line` and `area` generators with a Catmull-Rom curve. A CSS animation slides the overlay rect across the SVG, progressively unveiling the chart. The visualization demonstrates reactive sizing through Svelte's `bind:clientWidth` and `bind:clientHeight`.

MMatthias Stahl

69% match

Loading thumbnail…

Animated area chart with linear gradients

Three synthetic datasets are drawn as smooth, gradient-filled area charts, with each series represented by a different color from the D3 `schemeDark2` palette. The visualization shows how three numeric trends evolve over 30 evenly spaced points, using `d3.area` with `curveMonotoneX` and linear gradients defined in SVG `defs` to fade each fill to white. A legend with interactive mouseover, mouseout, and click handlers toggles series emphasis, while custom axes with dashed gridlines and bold labels are rendered via `d3.axisBottom` and `d3.axisLeft`. The animation is implied by the static SVG, though no transition is present in the code.

AAlexDaGr8

69% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes as rendered directly in a web browser. It shows two overlapping circles with contrasting fill and stroke colors, a blue diagonal line, and a black polyline path composed of two line segments. The visualization uses the SVG API within an inline `<svg>` element, specifying geometric attributes such as `cx`, `cy`, `r`, `x1`, `y1`, and path data. The code defines a 960 by 500 pixel canvas, with shapes positioned absolutely and styled through stroke-width and fill properties, requiring no external libraries.

MMarko Sanković

68% match