rounded-corner-curve

100%

rounded-corner-curve

✓ Published0🌍 Public

Last edited Mar 8, 2018

Created on Mar 8, 2018

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.

AI-generated description

Levin Dixon asked how to create a path with rounded corners. The provided curves in d3 adjust the entire path, not just area around the data points.

This might look a better with an A command instead of C, but circles are hard.

Similar vizzes

Loading thumbnail…

Path Transitions

A real-time scrolling line chart demonstrates a surprising visual artifact when animating the path. The chart displays a sliding window of 40 random data points, with new values entering from the right and old ones exiting left. The example uses D3's `transition` API and SVG path interpolation to animate the line. It reveals that default path interpolation parses the `d` attribute's numbers and pairs them in order, causing vertical "wiggling" as control points move in place. The solution involves interpolating the chart's transform instead of the path data.

GGerHobbelt

76% match

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

75% match

Loading thumbnail…

mouse-over event on line path

A step-before line chart plots randomized x/y data, and a semi-transparent circle tracks the mouse position along the path during hover, using D3’s SVG path `getPointAtLength` and `getTotalLength` to interpolate the nearest point. The chart includes randomized axes, draggable circles, and a click animation that spawns and removes expanding rings. Data is generated with `Math.random()` and rendered with D3 3.5.5, using SVG elements and CSS transitions for visual feedback.

LLuisSevillano

75% match

Loading thumbnail…

Pseudo Line Chart with HTML

This example shows a pseudo line chart built entirely without a charting library, using a single SVG `<path>` element to approximate a data series with thick, rounded strokes. The chart presents six connected points across a fixed 960 by 500 canvas, using a black line with `stroke-width="40"` and `stroke-linecap="round"` to create a bold, abstract visual. The path’s coordinates are hardcoded in the `d` attribute, and the rendering relies on SVG’s native `stroke-linejoin` for smooth corners. No data is loaded externally; the visualization is a static, hand-authored approximation of a line chart.

CCurran Kelleher

75% match

Loading thumbnail…

D3 Line - Curve

Two SVG panels compare a standard D3 line path with a curved variant using D3 version 7. The code draws a linear path through six explicit coordinate points (x, y), then applies `d3.curveCardinal` to the same data via `d3.line().curve()` to produce a smoother interpolation. Each panel renders the resulting path as an SVG `<path>` element using the `lineGenerator` and `curveGenerator` functions, overlaid with reference circles marking the original data points. The example demonstrates how the curve generator modifies the path data without changing the underlying dataset.

SSubhendu Karmakar

75% match

Loading thumbnail…

path with d3 - 1

A simple SVG line chart demonstrates D3's `d3.line()` path generator. Five coordinate pairs define a polyline rendered as a thick black path across a 960 by 500 canvas. A green circle with a CSS hover animation (class `pulseCircle`) sits at the first data point, scaling from zero to four times its size over two seconds using keyframes. The example shows D3 v7 appending SVG elements and generating path data from an array of points, with the circle's interactive pulse effect driven by vanilla CSS rather than D3 transitions.

NNita

75% match

Loading thumbnail…

html-line-chart

A single HTML page renders a magenta line and area chart from 20 random points, using two stacked `<div>` elements with CSS `clip-path: polygon()` to draw the shapes. The code, authored by 1wheel, generates the polygon path strings from the data via `d3.scaleLinear` and `d3.format`, offsetting points slightly to create the stroke effect. A simple static visualization, it highlights the use of pure CSS clipping for SVG-free line rendering, relying only on D3 scales and formatting utilities.

11wheel

75% match

Loading thumbnail…

Rounded Corner

This example demonstrates how to compute a rounded corner between a line and a circle, using geometric offsets and circle-line intersection formulas. The SVG rendering shows the original line, the outer circle, a dashed offset circle, and the resulting corner circle in red, along with its origin and tangency points. The code relies on D3.js v3 to append SVG elements and markers, while performing manual trigonometric calculations for the perpendicular and parallel offset lines, and solving the intersection to place the corner circle. The visualization clarifies the construction steps without any interaction or animation.

Mmbostock

75% match