Skip to main content
SimilarExport ZIP
100%

Book LRND3 v4 Chapter3

✓ Published1🌍 Public
Ssakhabutdinov
Last edited Jan 3, 2020
Created on Dec 24, 2019

This example demonstrates shape generation and path interpolation in D3 v5, drawing a sine wave with multiple curve types including d3.curveStepBefore and d3.curveBasis, alongside an area chart and an arc. The visualization splits the SVG canvas into quadrants, each showing different geometric primitives: a line path, a filled area with symbols, and an arc created via d3.arc. The code uses d3.range, d3.scaleLinear, d3.line, d3.area, and d3.symbol to construct the visuals. The rendering approach uses SVG elements appended to the body via a chart factory function, with data generated programmatically from mathematical functions.

AI-generated description

Third Chapter in the book of Rinninsland and Teller

MIT Licensed

Similar vizzes

Loading thumbnail…

Book LRND3 v4 Chapter4

This example demonstrates a variety of D3.js scale types and SVG path generation techniques from a chapter on scales and shapes. It renders ordinal, point, and band scales with colored symbols and rectangles, then plots a Weierstrass function through linear, identity, power, log, quantize, and threshold scales. Additional sections display sine wave lines with step and basis curves, filled areas, arcs, and custom SVG symbols. The code uses d3.scaleOrdinal, d3.scaleLinear, d3.line, d3.area, d3.arc, and d3.symbol, all rendered as SVG elements.

Ssakhabutdinov
85% match
Loading thumbnail…

Book LRND3 v4 Chapter4

This example demonstrates various D3.js v5 scale and shape techniques using SVG rendering. It creates a chart with ordinal scales mapping 30 data points to point and band positions, displaying symbols and colored rectangles with d3.schemeCategory10 and schemeSet1-3. The visualization also plots the Weierstrass function using linear, identity, power, and log scales with d3.line paths. Additional elements include sine wave paths, areas with curve interpolation, arcs using d3.arc, and custom symbol shapes.

GGeolffrey S Mena
84% match
Loading thumbnail…

hello path

This example demonstrates two fundamental D3.js path generators: `d3.line` and `d3.arc`. A black polyline connects four data points, with commented-out curve options like `d3.curveCardinal` and `d3.curveBasis` showing alternative interpolation methods. Beside it, three arc segments rendered via `d3.arc` form a partial donut chart with varying inner radii, fill colors, and a pad angle, all drawn as SVG paths on a 1600x800 canvas.

Vvivianaaai@qq.com
77% match
Loading thumbnail…

shapes

This example demonstrates how to generate a smooth, curving line path in D3 version 7 using the `d3.line` generator with the `curveCardinal` interpolation. The code defines an array of six coordinate points and passes them to the generator, whose output is then assigned to an SVG `<path>` element via the `attr` method. The visualization runs entirely in an SVG renderer with a single path displaying the resulting curved shape on a 2000x2000 canvas. The example highlights a minimal, direct approach to converting raw coordinate data into a visual shape.

HHeet Bhatt
76% match
Loading thumbnail…

D3Path

D3Path demonstrates two fundamental D3.js geometry primitives rendered as SVG paths. The left side plots a polyline through four explicit data points using `d3.line()`, with commented-out curve options (`d3.curveCardinal`, `d3.curveBasis`, etc.) illustrating alternative interpolation strategies. The right side draws three concentric arc segments using `d3.arc()` with varying radii (`innerRadius`, `outerRadius`), angles, and padding (`padAngle`) to produce multi-colored pie-like wedges. The example uses hardcoded JavaScript arrays for data and D3 v6 directly from the unpkg CDN, with an SVG canvas sized 1600x800, showcasing basic path construction without external styling.

Vvivianaaai@qq.com
76% match
Loading thumbnail…

Book LRND3 v4 Chapter2 - Part2

This example displays a static SVG composition with a French text label, a green semi-transparent circle, two overlapping ellipses, a blue line, and a rounded rectangle. The shapes are drawn using D3 v5 selection methods like `append`, `insert`, and `selectAll`, with attributes set via `.attr`. A single transform chain applies translate, scale, rotate, and skewY operations to all ellipses and the circle. The code follows the chapter’s chart factory pattern, creating an SVG container sized to the window with margin offsets.

Ssakhabutdinov
76% match
Loading thumbnail…

D3.js| Path

The example displays a collection of primitive shapes and line types in an SVG canvas using D3.js v4. It shows circles, rectangles, and various path elements, including arcs drawn with the `arc()` function and lines generated by `d3.line()` and `d3.path()`. The visualization uses D3’s selection, data-binding with `.datum()`, and data-driven loops via `.data()` and `.enter()` to create elements from an array of values. The SVG background is green, with a GeeksforGeeks header, and all shapes are rendered statically without interaction.

Hhanulik.ondrej@gmail.com
76% 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