Composable Visualization Test

100%

Composable Visualization Test

✓ Published0🌍 Public

Last edited Apr 28, 2016

Created on Apr 27, 2016

This example demonstrates the concept of composable visualization components using D3.js, where a `Rect` component is nested within a `FacetVertical` component to create vertically stacked small multiples. The code defines each component as a function with configurable properties such as `width`, `height`, `color`, and `nestBy`, then composes them via a `compose` method. Rendering to an SVG canvas, the `FacetVertical` component partitions the data by name into separate groups, and the `Rect` component draws colored rectangles using a category10 color scale. The data consists of a simple array of three objects with a `name` attribute.

AI-generated description

This is an experiment with the notion of composable visualization components that follow the Towards Reusable Charts pattern (which I think I'm finally grokking after all these years).

The idea is that visualization components can be composed in kind of a recursive way. This would make it straightforward to create, say, stacked bar charts by simply composing components in an almost algebraic expression like barChart * verticalStack * rect. Making that into small multiples would simply require the addition of a facet component to the expression: facetVertical * barChart * verticalStack * rect.

concept

This kind of thing is present in the Grammar of Graphics, the ggplot2 paper, and Vega. It would be amazing to discover straightforward JavaScript/D3 patterns that enable this kind of thing.

Built with blockbuilder.org

<div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2095999&f=16777215&b=0" border="0" height="18" width="83" alt="diaper cake"></div>

Similar vizzes

Loading thumbnail…

Untitled

This example displays 100 horizontal SVG rectangles stacked vertically, each rendered with varying heights and widths across the viewport. The code uses D3’s `select` method to append an SVG element to the body and sets its dimensions from `window.innerWidth` and `window.innerHeight`. Inside a loop, it creates each rectangle via `document.createElementNS`, setting attributes for positioning and size, and appends them directly to the SVG using `appendChild`. The visualization shows a striped pattern of bars without any interactivity or data binding.

Nnreinig3@gatech.edu

71% match

Loading thumbnail…

SVG Example

Five static SVG rectangles form a simple bar chart, descending diagonally from the top-left to the bottom-right. The bars have equal widths and varying heights and y-positions, creating a staircase-like visual from a hardcoded JavaScript array of objects. The example uses D3 v4’s selection API to append rectangles to an SVG canvas, setting x, y, width, and height attributes from the data. The code demonstrates basic declarative binding of data to SVG shapes without animation or axes.

CCurran Kelleher

70% match

Loading thumbnail…

Data Visualization

This example generates a grid of identical cartoon faces using React and D3 v7, rendered as SVG. Each face combines a yellow circle, two eyes, and an arch-shaped mouth built with D3’s `arc` generator. The `FaceContainer` wraps the SVG and applies a translation to center the components. The code uses React’s `createElement` pattern via JSX, with all faces produced by mapping over a `range(6*3)` array from D3 to create 18 repeated copies.

Belay Birhanu Gibina

69% match

Loading thumbnail…

D3 Starter-episode 04

This example demonstrates a basic D3.js bar-like visualization of 100 horizontal rectangles stacked vertically, each with a height of 10 pixels and width matching the viewport. The code uses `d3.select`, `d3.range`, and the `join` pattern to bind data to SVG `rect` elements, spacing them at 20-pixel intervals. It renders quickly to show the minimal setup for D3 version 6, with styling from a large body font size. The visualization is purely layout-driven, using no external data source or interaction.

Mmaxthamt

69% match

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

69% match

Loading thumbnail…

d3 intro

This example renders a full-screen SVG filled with 100 horizontal rectangles, each stacked vertically with a fixed height of 10 pixels and a small gap between them. The visualization uses d3.select and d3.range to generate the data, then binds it to rect elements via a data join. The rectangles span the entire window width, creating a simple striped pattern that highlights D3’s declarative approach to binding data to SVG shapes using the .attr and .join methods.

Ssukumardunn

69% match

Loading thumbnail…

Example D3

This example creates an abstract visual composition by rendering two perpendicular sets of thin rectangular strips. One hundred horizontal bars span the full canvas width, while one hundred vertical bars traverse its height, with the two sets overlapping. Both layers are masked by circular regions that intersect at the center, using the `mask` element to reveal or hide portions of the strips. The code relies on the D3 library’s `select`, `range`, and `join` methods to generate and attach the SVG rectangles, producing a grid-like pattern with a circular cutout effect.

Ttelsmahk@gmail.com

69% match

Loading thumbnail…

fresh block

This example shows a simple geometric composition of three stacked rectangles in alternating blue and yellow, paired with a black diagonal line that cuts across them. The visualization is created using the D3.js library, version 3.5.5, to append SVG elements to the page. Specifically, the code uses `d3.select` to add `rect` shapes with explicit pixel coordinates and fills, and `d3.svg.line()` to generate a path from three data points. The line is drawn with zero stroke width and a black fill, making it a solid triangle-like shape. The rendering relies entirely on static SVG attributes, with no data loading or interaction.

BBrandonStroud

69% match