Kids Shape and Color App

100%

Kids Shape and Color App

✓ Published0🌍 Public

Last edited Nov 8, 2019

Created on Nov 8, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Kids Shape and Color App

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.

CCurran Kelleher

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

93% 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

69% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example uses D3 v5 and SVG to create a simple interactive canvas with a red background, as defined by an inline SVG style attribute. The visualization demonstrates how D3 can select and manipulate SVG elements, specifically by setting the SVG's background color via `d3.select('svg').style('background', 'red')`. The page layout is controlled through CSS, which removes margins and hides overflow for a full-viewport display. The code is minimal, focusing on the integration of D3 with SVG and CSS styling without any data binding or complex charting.

GGray1011

68% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation using D3 version 6, showing circles, rectangles, lines, and paths rendered inside a 960×500 SVG canvas. The code uses the `select` function from the D3 library to display a text message, while shapes are styled through inline attributes and CSS classes. A group element with a transform translates and fills shapes with a light blue color and black stroke. The visualization highlights how SVG elements and D3’s selection API work together in a simple, static scene without data binding.

Jjakenachlas

68% 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

68% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling to create a simple interactive visualization. It shows a red-background SVG canvas with geometric elements styled through custom CSS classes, including highlighted shapes and line properties. The code uses D3 v7 for SVG selection and attribute manipulation, specifically the `d3.select` method to target the SVG element and apply the background color. The visualization includes CSS-defined classes for line styling, such as stroke color and width, and path-specific properties like stroke-linejoin. Built as a React application, the example renders through standard SVG markup within an HTML page.

KKelseyXu5

68% match