Gradient Bump

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 23, 2013

Each row of the tab-separated data becomes a bump chart path connecting three categorical ordinal positions, a, b, and c, across the horizontal axis. The vertical position encodes each row's weight value, and the stroke width is proportional to that same weight. For each segment between positions, the stroke uses a linearGradient with userSpaceOnUse coordinates, interpolating between two HCL color scales per column using d3.interpolateHcl. A white halo path is drawn beneath to provide contrast. The visualization uses d3.svg and d3.scale.ordinal to arrange the staggered curves, demonstrating a gradient-based bump chart prototype.

AI-generated description

A work-in-progress prototype of a bump chart using stroke gradients.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Barchart

This example demonstrates an animated stacked bar chart that transitions between stacked and grouped layouts. The chart displays five series of pseudorandom, smoothly varying data generated by the `bumps` function, with tooltips revealing precise values for each segment. Users can toggle the layout via radio buttons or an automatic timer that switches every two seconds. Built with D3 v6, the visualization uses `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `transition` with staggered delays to animate the SVG rectangles.

NNita

69% match

Loading thumbnail…

Stacked-to-Grouped Bars

This example demonstrates an animated transition between stacked and grouped bar charts, with synchronized changes in position and size that preserve the identity of each bar segment. The visualization uses four series of fifty-eight pseudo-random values generated by a custom `bumps` function. The stacked layout defaults to view, and a radio button or an automatic timer switches to the grouped layout. The code leverages D3 v4 APIs including `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and sequenced transitions via `transition()` calls, rendering as SVG.

Mmbostock

69% match

Loading thumbnail…

Linear Gradient Along Line Path

A line chart maps ten points with a smooth cardinal curve, and a vertical linear gradient colors the stroke from red through yellow to green. The gradient is defined as an SVG `linearGradient` with five stops, rotated 90 degrees, and applied to the path’s `stroke` attribute. The color scale uses `d3.scaleLinear` with a five-color range, while `d3.line` and `d3.curveCardinal` generate the path geometry. The example demonstrates how to apply a multi-stop gradient along a line path using D3 v4 and SVG.

EEfratVil

68% match

Loading thumbnail…

Barchart

This bar chart displays multiple series of smooth, generated data using stacked and grouped layouts. Users toggle between layouts and toggle individual series on and off via custom radio buttons. The visualization uses D3 v6 with SVG rendering and transitions to animate bar positions and heights. Data comes from a custom `bumps` function, and the chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` for layout and scaling.

Nngahhoang

68% match

Loading thumbnail…

gradient path

A circular path is drawn as a gradient stroke that smoothly transitions through pink, purple, and back to pink, with a partially hidden segment indicated by a transparent gap. The example samples the SVG path uniformly using `getTotalLength` and `getPointAtLength`, then generates a series of quads and computes stroke outlines with custom line-join logic. Each quad is rendered as a separate filled SVG path, and its color is interpolated via `d3.interpolateRgbBasis`, with opacity controlled by the path position relative to the `complete` fraction. This technique produces a smooth, colorful gradient along the stroke without relying on SVG linear or radial gradients.

FFrissAnalytics

68% match

Loading thumbnail…

hbc + codegap + heading

This example displays a horizontal bar chart of letters from 'a' to 'm' against their corresponding numeric values, using a green fill for each bar with an overall title. The visualization loads data from a CSV file and renders with D3 v5, using `d3.csv`, `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to draw the axes. Bars are generated through a data join, with height determined by the band scale's bandwidth and width scaled to each value.

VVvgupta

68% match

Loading thumbnail…

Tributary inlet

A grid of thin vertical bars forms a smooth color gradient, with each rectangle’s fill transitioning from blue through purple to yellow. The visualization maps a sequence of numeric values to both horizontal position and color using a linear scale. The code relies on D3.js to bind data from a CSV file, though the actual data array is loaded asynchronously. The SVG rendering uses `d3.scale.linear()` with an HCL interpolator, while each bar’s dimensions and coordinates are set via attribute callbacks, creating a static, evenly spaced strip.

CCBasis

67% match

Loading thumbnail…

Tributary inlet

Ten vertical bars are arranged in a row, forming a stepped diagonal pattern that shifts from red at the top to green at the bottom. The visualization highlights a simple ordinal-to-linear color mapping, where the tallest bar corresponds to the deepest green and the shortest to bright red. Using D3’s selection and data binding, the code appends `rect` elements to an SVG canvas, computing each bar’s height, vertical position, and horizontal spacing from its index. A linear color scale with HSL interpolation drives the gradient, while the data consists of a static array of ten integers.

CCBasis

67% match