Skip to main content
100%

Gist 5102490

✓ Published0🌍 Public
Aalper
Last edited Mar 6, 2013
Created on Mar 6, 2013

A collection of 20 colored circles is arranged diagonally across an 800x500 SVG canvas, each with an increasing radius and positioned along a line from the top-left toward the bottom-right. The circles use D3's category20 color scale to assign each one a distinct color, with black stroke outlines. Hovering over any circle triggers a Tipsy tooltip (Facebook-style) that displays the circle’s index and its color value in matching colored text, demonstrating how to combine D3 data binding with jQuery-based tooltips for interactive SVG elements.

AI-generated description

Similar vizzes

Loading thumbnail…

MouseOverMyColorIS

Twenty semi-transparent circles scatter randomly across an SVG canvas, each filled with a distinct color from D3’s `d3.scale.category20` palette. Hovering over any circle triggers a native browser tooltip via an appended SVG `<title>` element, displaying that circle’s specific color name. The example uses D3’s data join to bind randomly generated coordinates and radii, then appends circles and their tooltips. It demonstrates adding interactive title elements directly within D3 selections, with no additional libraries beyond the core `d3.js` script.

BBAvlino
80% match
Loading thumbnail…

20. D3 Drawing SVGs Colors

Five circles of varying radii render in a horizontal row on an SVG canvas. D3’s data join binds an array of five numbers to circle elements, mapping each value to the circle’s radius and stroke width. The example demonstrates basic SVG color styling by setting all fills to yellow with orange outlines through the `attr` method, producing a static visualization.

Aamakanju@nyit.edu
78% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
78% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
78% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
78% match
Loading thumbnail…

Gist 81595fa81399c6d2b793ca541a71e4ad

Five blue circles with black outlines are placed at fixed coordinates on a 960-by-500 SVG canvas. Each circle can be dragged interactively using the d3.drag behavior, which updates the circle’s cx and cy attributes in response to pointer movement. The example demonstrates basic SVG circle rendering with D3 v4’s data join and drag event handling, using hardcoded coordinate data.

SSeralto
78% match
Loading thumbnail…

Fork of Circles with D3

Seven colored circles, each 15 pixels in radius, rest in a horizontal line at the bottom left of a mint-green canvas. Hovering over any circle smoothly animates it into an evenly spaced orbit around the screen’s center, using an ease transition over one second; hovering again returns it to its original spot. The example demonstrates D3 v7’s `select().join()` for SVG element creation and stable keyed data binding, alongside `on('mouseenter')` event handling and the `transition().attr()` API for position tweening. All seven circles—red through violet—exist in a fixed dataset.

BBen Trantanella
77% 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
77% match