Overlapping Dimensions

100%

Overlapping Dimensions

✓ Published0🌍 Public

Last edited Mar 24, 2017

Created on Mar 24, 2017

Overlapping Dimensions visualizes a dataset of farmers' markets, encoding three categorical attributes—juices, cheese, and baked goods—as cyan, yellow, and magenta ellipses arranged on a grid. Animated via `requestAnimationFrame`, the ellipses shift along horizontal and vertical axes, creating moiré-like overlaps that reveal combinations of product offerings. Rendered on a 2D Canvas using `context.ellipse` and `globalCompositeOperation = "multiply"`, the animation blends colors for intersections, while grey outlines mark markets with none of these categories. The data is fetched asynchronously via `d3.json` from a gist.

AI-generated description

forked from <a href='http://bl.ocks.org/susielu/'>susielu</a>'s block: <a href='http://bl.ocks.org/susielu/26af5aa1cc9bfaba0f1bb4098b66deb6'>Overlapping Dimensions</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Overlapping Bump Chart

This visualization compares the availability of maple and seafood goods at U.S. farmers' markets using a map of the contiguous states and two bump charts showing latitudinal and longitudinal distributions. Each market appears as a colored dot, while the overlapping area charts use a "bump" logic to display where one good outnumbers the other. Built with D3 v4, it uses `d3.nest()` and `rollup` to aggregate data, `d3.area()` with cardinal curve interpolation, and animated transitions via `d3.transition()`. Data comes from the Farmers Markets Geographic Data on data.gov.

TThanaporn-sk

73% match

Loading thumbnail…

Decision Tree III

This visualization displays a decision tree of farmers market data, branching through product categories like baked goods, cheese, and vegetables to reveal patterns in market offerings. The tree uses an organic, gooey aesthetic with SVG filters for blur and color matrix effects, while animated nodes and edges grow outward using d3’s tree layout and the `.ancestors()` function to position descendants at ancestor depths. Built with d3.v4 and Vue, it renders in SVG with smooth transitions, sourcing real market attributes from a JSON dataset.

FFrissAnalytics

69% match

Loading thumbnail…

practice 1 - Circle overlap cool graphics

This data visualization demonstrates a concentric circle overlap effect, where ten circles of increasing radii and alternating colors are layered to create a "cool graphics" pattern. It shows how varying circle sizes and positions produce an optical illusion of depth and motion. The code uses D3 v5 with an SVG rendering, appending circle elements to a group via \`select\` and \`append\`, setting attributes like \`r\`, \`cx\`, and \`cy\`, and applying a stroke for definition. The circles are drawn in reverse data order to control stacking.

NNita

66% match

Loading thumbnail…

Hot Circles

Twelve colorful circles pulse outward from their stored coordinates, each expanding to a uniform radius against a black background. Using D3's data join with enter, update, and exit selections, the visualization animates circle growth with slow transitions while rapid updates reposition elements. The circles use `mix-blend-mode: screen` in CSS to blend overlapping colors, rendering CSV-derived data through D3's `select` and `transition` APIs.

CCurran Kelleher

66% match

Loading thumbnail…

data-space-transition

Four animated transitions show how the same dataset—eight demographic groups with percentages—can be represented as rectangles and lines along a shared axis. A sliding vertical midpoint shifts between two values, with each transition morphing the visual encoding between bar lengths, path strokes, and interpolated rect tweens using d3 transitions. The SVG and canvas renderings cycle through these states on click, preserving color coding and axis labels. The code relies on d3 selections, transitions, and interpolators to animate the geometric transformations.

11wheel

66% match

Loading thumbnail…

Multidimensional Filtering with Overlaps

This example demonstrates multidimensional filtering (crossfiltering) on the Iris dataset using four histograms, one per measurement column. Brushing a histogram highlights data points matching the filter in that dimension, with color intensity indicating how many active brushes a data point satisfies—lightest for none, darkest for all. Overlapping brush combinations produce intermediate shades via a cubehelix color interpolator. The visualization uses D3’s `brushX`, `bin`, and `scaleLinear` APIs, plus the d3-rosetta `StateField` and `one` helpers for reactive state and DOM management. Histogram bars animate smoothly via transitions with staggered delays during layer updates.

CCurran Kelleher

66% match

Loading thumbnail…

overlapping circles

Four orange circles and one steel-blue circle overlap at the center of an SVG canvas. The visualization demonstrates grouping and repositioning: the four identical orange circles are detected as an overlapping cluster and spread horizontally above the original join point, connected by black lines. The lone steel-blue circle remains in place. Built with D3 v4, the code uses SVG circle elements and manual selection via `d3.selectAll`, with grouping logic based on matching `cx` and `cy` attributes.

PPatrick Wojda

65% match

Loading thumbnail…

Scatter Plot

This scatter plot demonstrates animated transitions of fruit-shaped circles, updating as fruits are added, removed, or change type. The visualization uses D3 v5’s data join pattern with key functions, merging enter and update selections, while applying ordinal color and radius scales. A 1000-millisecond transition animates circle positions and radii when the dataset changes. The code imports `scaleOrdinal`, `select`, and `range` from D3, rendering SVG circles inside a 960×500 viewport, with transitions triggered by timed `setTimeout` modifications to the fruit array.

SSadafNaseem

65% match