Skip to main content
SimilarExport ZIP
100%

Kids Shape and Color App

✓ Published0🌍 Public
NNita
Last edited Nov 12, 2018
Created on Nov 9, 2018

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
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
92% match
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
92% match
Loading thumbnail…

D3 Shapes

This example displays the seven built-in D3 symbol types (circle, cross, diamond, square, star, triangle, and wye) rendered as stroked SVG paths along a horizontal scale. It uses `d3.symbol()` with a `d3.scaleLinear()` to position each shape, and applies each symbol generator via `d3[d]` lookups. Labels below each path show the corresponding API name. The data is a static array of symbol type strings, with the visualization rendered entirely in SVG.

SSubhendu Karmakar
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…

Fork of Fork of Random square shapes with react July 4,2022 - 2

A collection of 190 nested square outlines and small circles rendered in SVG, colored with random RGB values and positioned along a logarithmic curve derived from the input number. The React app maps an array of calculated values to custom `My_circle` components, each drawing a square with a dynamic stroke width and a static drop-shadow filter. Using React 16 and D3 v7 solely for SVG selection and attribute setup, the visualization applies `Math.random()` for stroke thickness and color channel values, with the viewport set to 960×500 pixels.

NNita
68% match
Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania
68% match
Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com
68% match