Skip to main content
SimilarExport ZIP
100%

Samuel Karkache - Creative Coding with Circles

✓ Published0🌍 Public
SSamuel Karkache
Last edited Aug 29, 2024
Created on Aug 29, 2024
Forked from Circles with D3

This example displays a generative composition of 50 semi-transparent circles and rectangles arranged in sinusoidal patterns on a light green background. The circles follow a wider elliptical path while the rectangles trace a tighter curve, with both shapes cycling through a palette of five colors. Built using the D3.js library (version 7.8.5) and its `select`, `selectAll`, `data`, and `join` APIs, the code procedurally generates each shape’s coordinates and attributes within a loop, then renders them as SVG elements. The visualization demonstrates creative coding by combining mathematical functions with basic geometric primitives.

AI-generated description

CS 573 Data Visualization: Creative Coding With Circles

This is my assignment for CS 573

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example shows a collection of seven colorful circles with varying radii and opacity, arranged on a light green background. The visualization is built using D3.js, where the code creates an SVG element and binds an array of circle objects using the data join pattern with `selectAll`, `data`, and `join`. Each circle’s `cx`, `cy`, `r`, `fill`, and `opacity` attributes are set via D3’s chained `.attr` methods, deriving values directly from the data array. The circles overlap to create a playful, abstract composition.

Ssamyuktha0750@gmail.com
81% match
Loading thumbnail…

CS573 - Week 1 - Creative Circles with D3

This example shows a generative composition of randomly placed circles with semi-transparent matching squares inscribed inside them. The sketch uses D3’s data join pattern with `selectAll`, `data`, and `join` to create SVG `circle` and `rect` elements, dynamically sizing them based on random x/y coordinates, radii, and hex colors. A helper function calculates the inscribed square’s dimensions from each circle’s radius, while opacity attributes layer the shapes over a light green background. The rendering is entirely client-side using plain JavaScript and D3 v7.

Mmilepore@gmail.com
79% match
Loading thumbnail…

Creative Coding — Circles Abhyudai Thakur

Four hundred twenty semi-transparent circles animate between grid, Phyllotaxis spiral, and parametric heart layouts, with color themes cycling through Turbo, Sinebow, Cool, and Warm interpolators. The D3 v7 SVG visualization responds to keyboard shortcuts for layout and theme changes, while hover and click interactions trigger radius transitions and elastic pulse effects via `transition.attr` and `easeElastic`. Circle radii incorporate deterministic jitter, and the responsive design recalculates positions on window resize.

Aabhyudaithakur7@gmail.com
79% match
Loading thumbnail…

Creative Circles by Charan

Four hundred twenty rainbow-colored circles spiral outward from the center of an SVG canvas, positioned using the golden angle and square-root scaling to form a galaxy-like pattern. Each circle expands from a radius of zero in a staggered transition, then gently pulses in size through a recursive `pulse()` function using `d3.easeSinInOut`. The visualization uses D3 v7’s selection, data join, and transition APIs, with colors generated via `d3.interpolateRainbow` on a light green background.

Ccsabavath@wpi.edu
79% match
Loading thumbnail…

Creative Circles by Charan

Four hundred twenty rainbow-colored circles spiral outward from the center of an SVG canvas, positioned using the golden angle and square-root scaling to form a galaxy-like pattern. Each circle expands from a radius of zero in a staggered transition, then gently pulses in size through a recursive `pulse()` function using `d3.easeSinInOut`. The visualization uses D3 v7’s selection, data join, and transition APIs, with colors generated via `d3.interpolateRainbow` on a light green background.

Ccsabavath@wpi.edu
79% match
Loading thumbnail…

Fork of Circles with D3

This example shows a collection of colored circles arranged on a mint-green background, each with a specified position, radius, and fill color. The visualization uses the D3.js library’s data join pattern to map an array of circle attributes to SVG `<circle>` elements. The code employs `select`, `selectAll`, and `attr` methods to set the SVG canvas size, circle coordinates (`cx`, `cy`), radius (`r`), and fill, with a fixed opacity value. The data is hard-coded in an array, demonstrating a data-driven approach to rendering shapes.

Ssamyuktha0750@gmail.com
79% match
Loading thumbnail…

Fork of Circles with D3 Sprice

This example demonstrates a dynamic SVG visualization that randomly generates colorful circles, rectangles, and ellipses on a light green background. The code uses D3.js v7 with the `select`, `join`, and `append` APIs to create and style SVG elements based on randomly generated data arrays. Each shape receives random positions, sizes, and colors from a palette of six vibrant hues, with opacity set to 70%. The visualization regenerates its layout each time the `main` function is called, showcasing D3's data-binding and method chaining patterns for creating basic geometric compositions.

SStephen Price
78% match
Loading thumbnail…

Creative Cricles by Charan

This example shows a static composition of seven semi-transparent circles scattered across a light green background, each with a distinct neon color and varying radius. The visualization uses D3 v7 to bind an array of circle data to SVG elements, setting their position, size, and fill via the `attr` method. The code leverages the `selectAll` and `join` pattern to create the circles within the SVG container, which is sized to the full viewport. A fixed opacity of 0.7 gives the circles a subtle layered appearance.

Ccsabavath@wpi.edu
78% match