ColorScale and building a module

100%

ColorScale and building a module

✓ Published0🌍 Public

Last edited Dec 7, 2018

Created on Dec 5, 2018

This example demonstrates a modular approach to building animated data visualizations with D3 v5. It constructs a grid of 16 tiles, each containing a layered composition of circles with varying radii and colors, creating a bubble-like pattern. The visualization uses ES6 modules, with a custom `BuildTiles` function handling tile creation through SVG rectangles and text elements. Circle elements are animated using D3's `.transition().duration()` method to move from the center to their grid positions. The composition also includes a zoom interaction via D3's `zoom` event handler.

AI-generated description

For the fun of embedding a ve first timeideo for th Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

Buble game

Eight colored bubbles animate from a central point onto a grid of four by two light grey tiles, with each tile labeled by its card ID. Nested circles in shades of blue, white, yellow, and green reveal a concentric layered design, and a zoom interaction is attached to the root group. The example uses D3 v5 selections, `transition` for the entrance animations, and the `zoom` API to enable pan and zoom on the entire SVG scene.

LLudovicGouverneur

71% match

Loading thumbnail…

refactorBubble

A bubble game renders concentric, ray-defined circles within a grid of animated tiles. The D3 v5 code uses `select`, `range`, and `transition` to grow rectangles and multiple colored circles with differing radii, creating a layered effect. The SVG background is dark, and circles change fill color on hover via CSS. The visualization is driven by specified data arrays for levels, columns, and ball counts, with zoom support via `d3.zoom`.

LLudovicGouverneur

70% match

Loading thumbnail…

d3 and canvas - the bind, the draw and the pick

This example demonstrates how d3 and Canvas can work together for interactive visualization, showing 5,000 colored grid cells arranged in a 10x10 group layout. The code uses d3.v4 to bind data to custom DOM elements, applying sequential color scales with d3.interpolateSpectral. Rendering happens through a main canvas while a hidden canvas uses unique generated RGB colors and a color-to-node map for picking interactions. A tooltip appears on hover, and d3.timer animates cell widths during transitions, with optional React integration via VizHub.

Llars verspohl

70% match

Loading thumbnail…

181202_05_Nested circles

A grid of nested circles and rectangles animates into place on an SVG canvas. The visualization builds a parametric layout of 91 cells, each containing concentric circles with decreasing radii and a grey rectangle that expands during the transition. The code uses D3 v5 selection and range modules to generate and position elements, with the `transition().duration()` API animating the circles from the center outward and rectangles from zero size. Hover effects change fill colors to black.

LLudovicGouverneur

70% match

Loading thumbnail…

d3 and canvas

D3 version 4 and the HTML5 Canvas API draw animated, colored grids of cells whose count is set by user input between 1 and 10,000. The code binds data to custom DOM elements, using transitions to animate cell size and fillStyle, then a d3.timer repeatedly invokes a draw function that clears and repaints the canvas. A d3.scaleSequential with d3.interpolateSpectral maps data values to colors.

Llars verspohl

70% match

Loading thumbnail…

Circles and rectangles grid

A grid of green rectangles is punctuated by circles that animate on top of them. Each circle transitions its position, moving from its initial coordinate to the center of its corresponding rectangle, then changes fill color to yellow with partial opacity. Built with D3 v5, the example uses SVG elements and chained `transition().duration()` calls to sequence the movement and color changes across the entire grid simultaneously.

NNita

69% match

Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar

69% match

Loading thumbnail…

Modules in JS of D3 Starter

This example demonstrates a simple animated visualization of circles connected by a line path, with positions and radii oscillating over time. Built as a modular JavaScript application using ES6 imports, it initializes an SVG canvas with D3 v7 and uses `setInterval` to update the scene at roughly 60 frames per second. The animation relies on custom functions `makeData` and `vizData` to generate data points and render circles and a line using D3’s `line` generator, with `selectAll`, `data`, and `join` for smooth updates.

CCameron Wehr

69% match