Area (2D) Size example with tilt

100%

Area (2D) Size example with tilt

✓ Published0🌍 Public

Last edited Sep 29, 2017

Created on Sep 23, 2017

This example compares two types of 2D area markers—rotated squares and circles—to show how area encodes ordered attributes. The squares increase their side lengths linearly, while the circles use progressively larger radii with varying opacity to represent data. The visualization is built with D3 v4 and rendered as SVG, using `d3.scaleLinear` for both x and y positioning, with the data defined as an array of shape-specific objects. The code filters this data by shape to create separate groups of rectangles and circles, applying distinct transformations and fill colors.

AI-generated description

Built with blockbuilder.org

This example examines the 2D size channel for ordered attributes (page 102 Munzner). For the most part, this example was built from scratch.

forked from <a href='http://bl.ocks.org/RobertDelgado/'>RobertDelgado</a>'s block: <a href='http://bl.ocks.org/RobertDelgado/872c67cd84af7cd54a7275b486f4e184'>Area (2D) Size example</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Area (2D) Size example

This example demonstrates the 2D area size channel for ordered attributes by comparing square and circular markers scaled proportionally to their data values. A row of green rectangles increases in side length linearly, while a row of blue circles increases in radius using a square-root transformation, showing how area perception differs between shapes. The visualization uses D3 v4 with SVG rendering, employing d3.scaleLinear for x and y positions, and data binding via selectAll().data().enter().append() to generate the geometric primitives. Marker arrays are hardcoded in the script, with rectangles and circles positioned at fixed intervals for direct size comparison.

RRobertDelgado

91% match

Loading thumbnail…

Area Chart

This example demonstrates an interactive area chart built with D3.js (v4) that presents two overlaid series with gradient fills, rendered as SVG. The visualization initially displays one dataset, and a button click transitions the chart to a second, extended dataset. The chart's axes and area paths smoothly animate their transitions over two seconds using D3's `.transition()` method. The code defines linear gradients with specified opacity stops for series styling, and uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisRight` for scaling and axes, respectively.

Ssunole896@yahoo.com

75% match

Loading thumbnail…

Area Label Test

This example tests automatic label placement for stacked area charts. Four colored streams animate every two seconds, with white labels positioned inside each area. The code uses d3.stack with wiggle offset and d3.area to render paths, while the d3-area-label library computes label transformations during a transition. Data is procedurally generated random walk series, rendered as SVG with an ordinal color scale and curveBasis interpolation.

CCurran Kelleher

75% match

Loading thumbnail…

Area chart

Three layered area bands show how a value range evolves across an x-axis from 0 to 70, with each band representing a distinct series (e.g., area1, area2, area3) defined by low and high y-values. The chart uses stacked-like transparency via SVG paths filled with teal shades, computed with D3 v4’s `d3.area()` generator and linear scales for x and y. Rendering is done through SVG path elements appended to a 700×400 viewport, with data hardcoded as JavaScript arrays in the gist source.

EEfratVil

74% match

Loading thumbnail…

D3 Area Genrators

This example demonstrates two area charts generated from the same set of six data points. The D3 `d3.area()` generator creates a path with a closed shape; the first is drawn with a red fill and a default baseline of zero, while the second uses a `y0(150)` offset to position its blue shape higher on the SVG canvas. The paths are rendered as SVG elements using the `d` attribute set directly from the generator’s output, with data provided as an array of `[x, y]` coordinates.

SSubhendu Karmakar

73% match

Loading thumbnail…

Untitled

The chart demonstrates why mapping values linearly to circle radii distorts data, using four strategies in a horizontal dot plot. Groups with 10, 30, 50, and 100 show that linear radius scaling makes larger values appear disproportionately small, while a square-root-adjusted radius or linear area scaling preserves proportional perception. The visualization uses D3 v5 with `d3.scaleLinear`, `d3.scalePoint`, and `d3.axisTop` to compare encodings, highlighting area as the correct perceptual channel for bubbles.

YYuichi Yazaki

73% match

Loading thumbnail…

D3: Scaled scatterplot, using a square root scale for circle areas

This example shows a random dataset of 50 points rendered as circles in a scatterplot, with circle area scaled by the y-value using `d3.scaleSqrt`. The SVG chart includes linear x- and y-axes styled with teal strokes and bold labels. The code loads D3 v5 and uses `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for ticks, and randomly generated numbers for the data. The `aScale` maps the y-domain to a radius range of 0 to 10, while padding keeps the axes visible. No labels are drawn, as the text elements are commented out.

Nnikomc

73% match

Loading thumbnail…

area chart

This example shows an area chart of visual acuity data, with a gradient fill transitioning from green through yellow to red based on y-values. The chart encodes data points as white circles positioned along the area’s upper boundary, each with a title tooltip displaying its value. Built with D3 v5, the visualization uses `d3.scaleLinear` for both x/y positioning and color mapping, an `area()` generator with `curveMonotoneX` for the shape, and SVG `linearGradient` definitions to color the fill. A simple SVG rect outlines the plot area.

Nnorangai

73% match