Skip to main content
SimilarExport ZIP
100%

Learning d3 curse

✓ Published0🌍 Public
550f1AG
Last edited Apr 23, 2021
Created on Apr 23, 2021
Forked from HTML Starter

A yellow circle with a black outline is drawn at the center of an SVG canvas, using fixed pixel coordinates. The example demonstrates a minimal setup for D3-like SVG rendering without JavaScript logic, relying solely on inline attributes for the circle’s position, size, fill, and stroke. The SVG element is 960 by 500 pixels, with the circle centered at (480, 250) and a radius of 245. A second smaller circle is present but lacks coordinates, leaving it unrendered. The code uses basic SVG markup within an HTML page, with no explicit data binding or interactivity.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Learning D3

A bright yellow circle fills the SVG canvas, serving as the face of a simple character with two black eyes positioned symmetrically around its center. The example demonstrates fundamental D3.js v5 syntax for selecting and manipulating SVG elements, using chained attribute methods to set the circle’s radius, coordinates, fill, and stroke, while also extracting the canvas dimensions directly from the SVG element’s attributes.

SSoti Coker
85% match
Loading thumbnail…

Learning SVG

This example demonstrates a simple SVG graphic: a single yellow circle centered within an 800×800 SVG canvas. The visualization is minimal, focusing on fundamental SVG shape creation rather than data representation. The code uses the D3.js v5 library's selection and manipulation API (`d3.select`, `svg.append`) to programmatically construct the circle. It dynamically reads the SVG element's `height` and `width` attributes to position the circle at the exact center, assigning `cx` and `cy` values based on those dimensions. The circle’s radius is set to 200 pixels, and its fill color is set to "yellow" via D3’s attribute methods. Styling is handled through an external CSS file, and the SVG is rendered directly in the browser with no additional data source.

KKantapat chankasem
85% match
Loading thumbnail…

learn D3 and React

This example demonstrates a single yellow circle with a thick black stroke, centered within an SVG canvas. It shows how to create a basic React application that renders SVG graphics. The code uses React and ReactDOM to mount the component into the DOM, and defines the circle using standard SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. It is a minimal template for integrating D3-style visualization concepts with React's declarative component model, though it does not use any D3 libraries directly.

CCFautt
83% match
Loading thumbnail…

D3 Tutorial

This example shows a simple yellow circle with a black outline rendered in an SVG canvas. It is a basic D3.js and React tutorial demonstrating how to define and display SVG shapes. The code uses React to create an `<svg>` element with a `<circle>` component, setting its position, radius, fill color, and stroke properties directly within the JSX. The rendering is handled entirely through SVG, with no external data sources or complex interactions.

KKakeyaK
83% match
Loading thumbnail…

D3 JS tutorial

This example shows a single yellow circle rendered inside an SVG element with a black outline, serving as a basic D3.js tutorial demonstration. The visualization uses React and is embedded in a minimal HTML page, with the circle positioned at the center of a 960x500 pixel canvas. The code relies on the React library for component structure and manually creates the SVG circle, specifying its center coordinates, radius, stroke color, stroke width, and fill color directly in the markup. The page includes a stylesheet that sets the SVG dimensions and hides overflow, while the React bundle is loaded from a script tag.

AAmnaRizvi-S
83% match
Loading thumbnail…

d3

This example demonstrates a single red circle with a green stroke, centered inside a 500-by-500 SVG canvas. The code uses D3 v6 to select the SVG element, append a circle, and set its radius, position, and fill and stroke colors via attribute methods. The visualization anchors the circle using fixed pixel coordinates, while the body text is styled with a 13-em font size for a bold, minimal layout.

Ggyanendra verma
83% match
Loading thumbnail…

HTML LEARNING

A single yellow circle, centered within an SVG canvas, serves as a minimalist demonstration of basic D3.js shape creation. The example uses d3.select to target the svg element, then appends a circle with a radius of 200 pixels, positioned at the center of the 960 by 600 viewport. The circle is filled with yellow via the fill attribute. The code establishes a clear, uncomplicated foundation for learning how to bind and manipulate SVG elements with D3.

Kkadirkhan-bit
83% match
Loading thumbnail…

beginning of D3

A simple SVG canvas displays a single large yellow circle with a black outline, centered on a 900-by-900 viewport. The example demonstrates the most basic use of the Scalable Vector Graphics (SVG) API, with geometric attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` set directly in the markup. The accompanying HTML page contains no JavaScript or D3 library references, relying entirely on static SVG syntax. This minimal composition serves as a starting point for learning graphical primitives before introducing dynamic data visualizations.

MMaharshi
82% match