Theme Experiment

100%

Theme Experiment

✓ Published0🌍 Public

Last edited Aug 7, 2017

Created on Aug 4, 2017

This example displays a color palette and typography system as a static SVG composition, using a custom theme object to define blues, yellows, greens, and grays. It renders square swatches in two rows, separated by a line, followed by text samples for headline, subheadline, and body styles. The code uses d3.v4 selections and appends rectangles, lines, and text elements via methods like `attr` and `style`. The rendering approach is direct SVG manipulation with a Lato font from Google Fonts, and the layout is computed from explicit dimensions and spacing constants.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

SVG FUNDAMENTALS

This example demonstrates SVG fundamentals by manipulating paragraphs and page styling using D3.js v7. It shows how D3 selections can change text color dynamically, first setting all paragraphs to blue, then applying random HSL colors to each paragraph. The code also changes the body background to black and loads D3 from a CDN. The rendering approach uses direct DOM manipulation through d3.select and d3.selectAll, with no external data source or complex SVG shape generation visible.

AAamir Raza

73% match

Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe

72% match

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck

72% match

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036

72% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static, colorful composition. It shows a blank 960x500 SVG canvas with a pink background, rendered as a single empty graphic. The visualization uses d3.select to target the SVG element and applies a background color via the style method, while an external stylesheet sets the page margin and overflow. The code relies on D3 v5 and SVG, with a linked bundle.js file that contains the selection logic.

EElvira

72% match

Loading thumbnail…

SVG text experiment - Interactive tool

This interactive tool arranges text cards around a central, dynamically generated phrase, drawing words from a CSV taxonomy of themes like body, material, and action. Users can adjust settings such as card count, theme, and pattern to remix content in real time. The visualization uses D3.js to load data, render SVG, and transition text, while GSAP’s TimelineMax and TextPlugin handle card rotation and path-based text animation. Center text updates recursively via D3 transitions, creating a generative brainstorming interface.

LLaurens

71% match

Loading thumbnail…

Play with SVG and CSS

A static SVG composition demonstrates primitive shapes and CSS styling within a D3 version 6 setup. The example shows circles, rectangles, lines, and a path grouped and transformed via SVG attributes, including scaling and translation. CSS classes apply stroke properties to line elements and redefine the path’s stroke color. The page uses `d3.select` from the D3 library to replace the body text with “Hello D3 version 6,” while the HTML structure and stylesheet handle all visual rendering without interactive behavior.

GGordon Yang

71% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements, including rectangles, circles, lines, and paths, using static coordinates and styling attributes. It showcases basic D3 version 7 usage via `select` from the `d3` module to set the body text. The visualization is rendered directly in the browser through an inline SVG element with a width of 960 and height of 500, featuring shapes such as a blue outlined rectangle, red and default-colored circles, a yellow rectangle with a navy stroke, a diagonal line, and a black polyline path. The code also embeds an introductory video and README explaining D3 version 6.

MMatheesha Yapa

71% match