panmenghan

@panmenghan·4 public vizzes

Color and Size Legends

This example demonstrates two distinct types of chart legends created with D3.js v5: a color legend using an ordinal scale mapping fruit names to specific colors, and a size legend using a square-root scale to map numeric tick values to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned programmatically via `attr('transform')` calls. The color legend uses `scaleOrdinal` for categorical colors, while the size legend uses `scaleSqrt` and `ticks()` to generate evenly spaced, non-zero values, with circles filled using a semi-transparent black.

Mar 5, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for handling special cases in data changes. It shows a bowl of fruit where five apples are initially displayed, with each fruit represented by a circle and a text label. The code uses d3’s `scaleOrdinal` for color and radius mappings, and the `selectAll`/`merge`/`exit` pattern to manage SVG elements. The rendering uses d3.v5 with SVG output, and the data source is hardcoded as a series of apple objects.

Feb 26, 2020

Loading thumbnail…

Axis (with nice)

This example displays a horizontal axis with five numerical tick marks, positioned below a short line of data points. The axis is generated using D3.js version 4.2.2, specifically the `d3.axisBottom` function, which is applied to a linear scale created with `d3.scaleLinear`. The scale’s domain is derived from the minimum and maximum of the sample data array using `d3.extent`, and its range is set to 600 pixels. The axis is rendered as an SVG group element, transformed to sit at a specified vertical position within the 700×100 pixel canvas. The page itself is a minimal HTML document with embedded JavaScript and uses the D3 library loaded from a CDN.

Feb 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js to build its geometry, including a yellow circle, two eyes, a mouth via `d3.arc`, and rectangular eyebrows. A `transition` on the eyebrow group animates their vertical position over two seconds, moving them up and down repeatedly. The code employs `d3.select`, `d3.scaleLinear`, and attribute setters to construct the scene, with a fixed SVG canvas sized 960 by 500 pixels.

Feb 10, 2020