Gist e70cf8fad92bf018d15d5d20ed8db761

100%

Gist e70cf8fad92bf018d15d5d20ed8db761

✓ Published0🌍 Public

Last edited Mar 15, 2018

Created on Mar 15, 2018

This example shows a single grey circle centered at coordinates (50, 50) with a radius of 5 pixels, rendered on an HTML canvas. The visualization uses the D3.js selection API, specifically `d3.select("#canvas")`, to target the canvas element and append a circle shape to it. The circle’s position and size are set explicitly via the `cx`, `cy`, and `r` attributes, while its fill color is defined as grey. The code demonstrates a minimal, static SVG-like circle drawing within a canvas context, with no interactivity or data binding.

AI-generated description

Similar vizzes

Loading thumbnail…

test

This example shows a single gray circle rendered in the center of an SVG canvas. The visualization is minimal, displaying only the circle with a radius of 100 units and no additional data or interactivity. The code uses plain HTML and inline SVG elements, with the circle defined directly in the markup. No JavaScript, CSS styling, or external libraries are involved, making it a bare-bones demonstration of SVG's basic shape rendering within a web page.

KKaalveniiz

82% match

Loading thumbnail…

Gist bd22f3b52b22c16912001e3e858739bb

This example demonstrates a basic data join with D3.js, showing how circles are appended to an SVG canvas based on an array of data. The visualization displays five grey circles positioned diagonally, with each circle’s x and y coordinates calculated from its index in the data array. The code uses D3’s `selectAll` and `data` methods to bind data to circle elements, followed by `enter().append()` to create new circles with fixed radius and fill color. The rendering approach is declarative, relying on D3’s data-join pattern rather than explicit loops.

Aadamjanes

81% match

Loading thumbnail…

Data Visualization and Infographics with D3, Module 2, Exercise 1

This example displays a single static blue circle centered within a small 50 by 50 SVG canvas, using a gray outline and a two-pixel stroke. It serves as a minimal demonstration of primitive SVG shape construction, where the circle is positioned via explicit `cx` and `cy` attributes and sized with an `r` radius. The visualization uses the standard D3.js library, though the code relies directly on raw SVG elements rather than D3-specific data joins or scales. The rendering approach is entirely declarative, showing how a basic geometric mark can be encoded directly in an HTML file without external data sources or interactive behavior.

SSassOnTheRoad

79% match

Loading thumbnail…

circle

This example shows a single green circle with a blue stroke rendered on a blank SVG canvas. The visualization demonstrates basic D3 version 7 usage by importing the `select` function from the `d3` module and updating the page text. The circle is defined directly in the HTML markup with fixed `cx`, `cy`, `r`, and fill attributes, while SVG provides the rendering surface. The code illustrates how to begin a D3 project, though it does not yet bind any external data.

Cclass-sikh

79% match

Loading thumbnail…

Circles with Canvas

A set of circles in various colors and sizes appears on a pale green background, demonstrating how D3 can work with the Canvas API for high-resolution rendering. The visualization uses hardcoded data points for circle positions, radii, and fills. The code imports `select` from D3 and manually draws each circle using the Canvas `beginPath`, `arc`, and `fill` methods. It also scales the canvas context by the device pixel ratio to ensure crisp shapes on hi-dpi displays.

CCurran Kelleher

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

79% match

Loading thumbnail…

first

This example shows a single gray circle centered on an SVG canvas, demonstrating the simplest possible static data visualization with no data or interaction. The circle is rendered using an SVG `circle` element with a fixed radius of 100 pixels, positioned by default at the top-left corner of the viewport. The code uses inline HTML and CSS within an `index.html` file, with no external JavaScript libraries or frameworks. The React starter template is referenced in the README but is not implemented in the visible source.

RRKenny23

78% match

Loading thumbnail…

Hello VizHub

This example shows a minimal SVG canvas with a single gray circle positioned at coordinates (100, 100) and a radius of 100, alongside a text string exported from a separate ES6 module. The visualization uses the D3.js v5 library’s `select` and `append` methods to create the circle, while the message variable is defined but never rendered. The HTML page loads D3 from a CDN, applies a global Ubuntu font via CSS, and runs the bundled JavaScript.

Ttshrsrvstv

78% match