Skip to main content
SimilarExport ZIP
100%

Fork of Clickable Circles

✓ Published0🌍 Public
Ddr_nareshvet@yahoo.in
Last edited May 10, 2025
Created on May 10, 2025
Forked from Clickable Circles

This fork displays a smiley face constructed from seven interactive circles, with a yellow face, blue eyes, a red nose, and a smile created by clipping a larger circle. Clicking any circle highlights it with a black stroke and raises it to the front, while clicking the background clears the selection. The visualization uses D3’s `select` and data join API to bind CSV data to SVG circles, managing state through `setState` and handling clicks with event listeners.

AI-generated description

Smiley Face Circle Art

This visualization creates a smiley face using circles. The circles are positioned to form a face with:

  • A large yellow circle for the face
  • Two blue circles for the eyes
  • A small red circle for the nose
  • A semi-circular mouth created with a clipped circle

The circles are interactive - you can click on individual parts of the face to highlight them.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Clickable Circles

This interactive visualization replaces typical scatterplot circles with smiley faces rendered using the D3.js v7 library. Each face is an SVG group containing a colored circle, two eyes, and a smiling arc, positioned according to x and y coordinates from a static dataset. Clicking any face applies a black outline and raises it to the front, with selection state managed through a unidirectional data flow pattern. The code relies on D3’s `selectAll` with `.join`, `.attr`, and event listeners to construct and update the elements.

Ggedamrajani336@gmail.com
92% match
Loading thumbnail…

Fork of Clickable Circles

Seven semi-transparent circles, each with a distinct neon color, are arranged across a fixed, full-screen light-green background. Clicking a circle selects it, permanently highlighting the chosen circle with a thick black stroke and bringing it to the front. The visualization uses a unidirectional data flow via `setState`, with `setupSVG` and `renderCircles` managing D3 v7 join operations and click event handlers.

BBHUMIKA CHUNDU
85% match
Loading thumbnail…

Fork of Clickable Circles

Seven semitransparent circles sit at fixed positions on a light-green SVG canvas. Clicking any circle selects it, giving it a thick black stroke and bringing it to the front. The visualization is built with D3 v7 using a unidirectional data flow pattern where the viz function re-renders on each state change. The code uses d3.select and join to manage circle elements, while event listeners call a setter to update the selected datum.

Jjedrt.samo@gmail.com
84% match
Loading thumbnail…

Fork of Clickable Circles

This example displays seven translucent circles with distinct colors and radii, positioned across a fixed full-screen SVG. Clicking a circle highlights it with a black stroke and brings it to the foreground. The visualization uses D3 v7’s `selectAll` and `join` for rendering, with a unidirectional data flow pattern managing the selected state. Coordinates, sizes, and colors come from a static data array.

RRashad Tyler
82% match
Loading thumbnail…

Fork of Clickable Circles

Seven colored circles sit on a pale green background. Clicking a circle highlights it with a thick black outline and brings it to the front. The example uses d3 v7 for selection and event handling, with a custom unidirectional data-flow pattern managing the selected state. Circle positions and sizes come from static data in a JavaScript module.

Ggedamrajani336@gmail.com
82% match
Loading thumbnail…

Fork of Clickable Circles

This interactive example displays a collection of clickable circles, known as "bubbles," arranged across a light-green canvas. A click on any bubble triggers a popup overlay revealing its position, radius, and color values. The visualization implements a unidirectional data flow pattern using a custom state management function, while D3 v7's `select` and data join methods handle the SVG rendering and click events. The red-toned palette creates a cohesive, simple interface for exploring the static dataset.

Wwqp782@haw-hamburg.de
80% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates basic SVG circle rendering with D3, showing a static smile face composed of three circles: a large yellow head with black outline and two smaller black eyes. The visualization uses d3.select to bind data arrays to SVG elements, with the join method creating and updating circle nodes based on the incoming data. The code also showcases React integration and the D3 General Update Pattern for managing DOM elements dynamically within a container.

Mminmgmg98@gmail.com
80% match
Loading thumbnail…

Fork of 04 - let's make a face - dataviz 2018

A yellow smiley face with black eyes and eyebrows is drawn centered in an SVG canvas using D3 v7. The face consists of a filled circle for the head, two circles for eyes, and an arc path for a smile. The eyebrows are rectangular shapes that continuously animate up and down using chained `transition` calls with `duration` values. The code builds the visualization with D3 selections, the `arc` generator for the mouth, and explicit SVG attribute assignments for positions and dimensions.

KKiran3295
79% match