Book LRND3 v4 Chapter4

100%

Book LRND3 v4 Chapter4

✓ Published0🌍 Public

Last edited Dec 27, 2019

Created on Dec 27, 2019

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.

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

94% match

Loading thumbnail…

Book LRND3 v4 Chapter3

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.

Ssakhabutdinov

84% match

Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar

78% match

Loading thumbnail…

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

SSubhendu Karmakar

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

78% match

Loading thumbnail…

D3: Drawing Scale

This example demonstrates how D3’s linear and square-root scales translate raw data coordinates into pixel positions and circle radii. It plots an array of 11 `[x, y]` pairs as circles and red text labels on an SVG canvas. The code uses `d3.scaleLinear()` for both the x and y axes, and `d3.scaleSqrt()` for sizing the circles proportionally. The scales are configured with custom domains and output ranges, with padding applied to keep marks inside the 500×300 viewport. Data is rendered statically, with labels showing the original coordinate values.

MMarisa Tania

77% match

Loading thumbnail…

D3 Scale Function PRactice

This example demonstrates D3 scale functions by mapping a small array of numeric values to positions along an SVG axis. It renders circles and labels on a horizontal line using a linear scale, then displays the corresponding axis with `d3.axisBottom`. The code imports a custom `getScale` utility from `utils.js` that switches between D3’s scale types—including `scaleLinear`, `scaleSqrt`, `scaleLog`, and others—although only the linear scale is actively applied. The visualization uses SVG rendering with a fixed 960×500 canvas and D3 v7 via `bundle.js`.

SSubhendu Karmakar

77% match

Loading thumbnail…

scale

This example demonstrates the foundational concept of D3 scales by computing and logging values from linear, square root, and time scales, then calculating the extent of a small dataset and applying a linear scale with a nice domain. It uses the d3 v7 library, importing scaleLinear, scaleSqrt, and scaleTime from d3, and renders to a blank SVG canvas. The code defines explicit domains and ranges to show how input values map to output pixel positions, with a dataset of five numeric values and an extent-based domain.

HHeet Bhatt

76% match