Kids Shape and Color App

100%

Kids Shape and Color App

✓ Published2🌍 Public

Last edited Apr 28, 2025

Created on Nov 3, 2018

This interactive app lets children explore color, size, and shape by clicking through three control panels. The selected attributes combine into a single large symbol rendered in the center. Built with D3 v5, the code uses SVG `symbol()` generators for circles, squares, and triangles, with click handlers updating state via `onCircleClick` and `onClick` callbacks that re-render the mark.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Kids Shape and Color App

This interactive app lets a child choose a color, size, and shape from three side panels to customize a central display mark. Built with d3 v5, it uses an SVG canvas and event handlers (`onClick`) to update the state. The shape panel uses d3’s `symbol` factory to render circle, square, and triangle paths, while the color and size panels present clickable circles.

Ssleyus

95% match

Loading thumbnail…

Kids Shape and Color App

This interactive D3 v5 app lets a user mix and match colors, sizes, and shapes by clicking swatches in side panels, updating a central mark rendered as an SVG path. It uses `d3.symbol` with `symbolCircle`, `symbolSquare`, and `symbolTriangle` for the geometry, and `selection.merge` to handle dynamic re-renders of the panels and the mark on each state change. The interface is laid out with fixed SVG groups, and the mark’s fill and scale are driven by user selections from the color, size, and shape panels.

GGuillaume Calmettes

94% match

Loading thumbnail…

Kids Shape and Color App

Kids Shape and Color App lets a user pick a color, size, and shape from three separate panels to update a single central symbol. The color panel renders fixed circles, the size panel uses proportional circle radii, and the shape panel cycles through d3.symbolCircle, d3.symbolSquare, and d3.symbolTriangle. Clicking any option re-renders the main mark, whose path is generated with d3.symbol and sized by the selected value. The interface uses D3 v5 with SVG rendering and event-driven re-rendering.

NNita

92% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes and dynamic styling interactions. A light blue rectangle serves as a canvas containing a circle, ellipse, text label, and line. Using D3 v6 selection methods, hovering over the circle turns it yellow, clicking the circle turns it red, and clicking the line thickens it. Clicking anywhere on the SVG updates the text element to display the cursor’s coordinates via `d3.pointer`. The page also mixes plain HTML headings and paragraphs with CSS rules for color and font styling.

JJoyce Robbins

68% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

A dynamic fruit bowl visualization demonstrates SVG shape updates and color transitions using D3's data join pattern. Apples and lemons appear as circles with distinct fill colors and radius values, driven by ordinal scales for both color and size. The code uses `selection.enter`, `.merge`, and `.exit` methods with `transition().duration()` to animate circles entering, updating, and leaving as fruits are added, removed, or changed. JavaScript `setTimeout` calls trigger sequential data mutations, showing how D3 v5 handles animated updates to SVG elements.

OOsekovS

67% match

Loading thumbnail…

Make Shapes

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with varied colors, strokes, and transforms. It demonstrates fundamental SVG rendering in a static scene without interaction. The code loads D3 via UNPKG, but primarily uses native SVG elements and CSS styling. It also showcases local ES6 module imports through `myMessage.js` and applies group-level attributes like `fill` and `stroke` for visual organization.

Yyejichun@naver.com

67% match

Loading thumbnail…

Shapes Practice

Animated SVG composition of 300 rectangles and 300 circles, rendered with D3 v6 in a React framework. Rectangles initially draw as thin gray strokes, then transition to transparent fills with pink outlines before expanding to fill the entire canvas. Circles begin as large transparent rings with thin white strokes that thicken, then shrink to small points while drifting downward. Transitions sequence over 15-20 second durations, creating a slow rhythmic interplay of shape transformations across the 960x500 viewport.

MModalMBS

67% match

Loading thumbnail…

Color and Size Legends

Five apples are rendered as red circles, with a black outline indicating the currently selected fruit. Clicking a fruit updates the selection state. Built with React and D3 v5, the example uses `scaleOrdinal` to map fruit types to both fill colors and circle radii, creating a color and size legend. The visualization is rendered as SVG elements with React components.

Llrakla

66% match