Skip to main content
SimilarExport ZIP
100%

Canvas Playground

✓ Published0🌍 Public
VVictor Mouries
Last edited Jun 15, 2020
Created on Jun 15, 2020
Forked from HTML Starter

This example displays a simple analog clock rendered as a static SVG circle, with a steelblue fill and partial opacity. The visualization uses D3.js v3 to select a `<div>` element and append an SVG container sized to the clock’s radius. The code defines a fixed radius of 50 pixels and sets the SVG dimensions accordingly, but does not include any dynamic time-ticking or hand animations. The styling comes from an external CSS file that sets the font family and size, while the circle’s appearance is controlled via the `fill` and `fill-opacity` properties.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Clock

This example shows a static clock face rendered with SVG. The clock includes a circular face, hour, minute, and second hands, numeric labels, and tick marks at the 12, 3, 6, and 9 positions. Built with React and JSX, the code uses CSS for page margins and the `circle`, `line`, and `text` SVG elements to construct the layout. It positions elements using a centered `<g>` transform and rotates ticks with the SVG `transform="rotate(...)"` attribute. The D3 `arc` function is imported but not used in the final output.

Jjjacobatandover
74% 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
73% 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
73% 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
73% match
Loading thumbnail…

Clock

A real-time analog clock displays hour, minute, second, and millisecond hands against an outer ring and central hub. The visualization uses d3.v4 and d3-component to structure the SVG as reusable nested components, with each hand rendered as a rotated line element. A d3.timer callback updates the rotation transforms based on time elapsed since midnight, while the component lifecycle manages the timer’s creation and cleanup on destroy. The example demonstrates optimized component-based animation without external data sources.

CCurran Kelleher
73% match
Loading thumbnail…

D3 Playground

This example presents a minimal D3 playground that sets up an SVG canvas and initializes the D3 library. The main JavaScript file logs a message and the d3 object to the console, while the accompanying CSS defines a basic font size and styling for a line class. The HTML structure loads D3 v6 from a CDN and links to external styles and scripts, demonstrating a simple template for building SVG visualizations with D3 and CSS. The current code does not render any data or visual elements beyond the empty SVG container.

Ddabrze3@gmail.com
72% match
Loading thumbnail…

Circle and Ellipse

This example showcases a set of geometric shapes—circles and ellipses—arranged in a framed SVG canvas. The visualization presents various configurations, including a large circle, a small circle, and horizontally and vertically oriented ellipses, all filled with a steelblue color. The code uses D3.js v5 to select the SVG element and append each shape, setting attributes like center coordinates (`cx`, `cy`), radii (`r`, `rx`, `ry`), and a styled border. A black rectangular frame is drawn using a path, and the rendering is done entirely through SVG. The data source is not specified, as the shapes are manually defined in the script.

CChooo4u
72% match
Loading thumbnail…

Canvas

This example displays a visually rounded rectangular frame rendered across the full browser window, created with an SVG element that fills the viewport and a `rect` with corner radius set to 40 pixels. The visualization uses D3 v5 within a React framework, employing `d3.select` to append the shape directly to the SVG. The `styles.css` fixes the body dimensions to prevent overflow. The underlying data structure, a hierarchical representation of world countries by region from `countryHeirarchy.json`, is available in the project files but not actively visualized in this minimal layout.

Ddacoylo
72% match