Skip to main content
SimilarExport ZIP
100%

My first D3

✓ Published0🌍 Public
Aalikanet
Last edited Aug 5, 2023
Created on Aug 4, 2023
Forked from HTML Starter

This example demonstrates a basic introduction to D3.js by creating a simple SVG scene with a red circle and a blue rectangle on a green canvas. The code uses D3 v7’s selection and append methods to build the SVG elements, setting their positions and fill attributes directly. It relies on the `d3.select` and `d3.attr` APIs to structure the visualization, serving as a minimal starting point for learning D3’s declarative syntax within an HTML page.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

First D3 try

A single red circle is drawn at the center of a 960 by 500 pixel SVG canvas, with its radius set to half the canvas height. The example demonstrates a minimal first use of D3 v5 within a React framework, where the `d3.select` function targets the SVG element and `.attr` sets the circle’s radius, x-coordinate, and y-coordinate. The code uses the D3 `append` method to create the SVG circle, rendering directly to the SVG output.

RRambo-chan
86% match
Loading thumbnail…

D3 js

This example demonstrates a minimal SVG canvas that is styled with a red background using D3.js. The code selects an SVG element via `d3.select('svg')` and applies the background color through the `style()` method. It relies on the D3 v7 library loaded from a CDN, with rendering performed entirely through SVG elements. The visualization serves as a bare-bones starting point, showcasing how D3 can interact with and manipulate existing HTML/SVG structures. The data source is not applicable, as the example focuses solely on basic styling operations without any data-driven graphics.

田田伟业
84% match
Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2
83% match
Loading thumbnail…

Hello D3

This example demonstrates the simplest possible D3.js visualization: a single SVG circle centered on a blank canvas. The code imports the `select` function from D3 v6 via an ES module, selects the `<svg id="viz">` element, and appends a circle element with a radius of 200 pixels, rendered as SVG. It showcases the fundamental pattern of selecting, appending, and styling elements using D3’s declarative API. The accompanying README links to a video for beginners, emphasizing the learning-focused intent of the minimal code.

JJacopo Poletto
83% match
Loading thumbnail…

My first D3.js vizualization

A simple circle centered in an SVG canvas demonstrates the basic structure of a D3.js visualization. The code uses `d3.select` to access the SVG element, calculates its center from the `width` and `height` attributes, and appends a group (`g`) translated to that point. A circle with a radius of 100 pixels and an orange fill is then added to the group, showing how to position and style SVG shapes. The example is built with D3 v5 within a React framework, rendering entirely through SVG without any data binding or external datasets.

Mmazacm01
83% match
Loading thumbnail…

d3 Starter

This visualization demonstrates a minimal starting point for building with D3, displaying a single large circle centered near the left side of an SVG canvas. The code uses D3 v7's `select` function to target the existing SVG element, then appends a circle with `append`, setting its radius to 300 and horizontal position to 300 via the `attr` method. While minimal, it establishes the core pattern of selecting, appending, and styling SVG elements.

JJason
82% match
Loading thumbnail…

My first test

This example demonstrates a minimal SVG circle rendered with D3.js, showing how to append and style a single shape. The page loads d3.v4 and d3-dsv.v1, logging the D3 object to the console. A circle with radius 280 is added to an empty SVG element, while hidden CSS classes for line styling exist but are not used. The visualization emphasizes basic SVG manipulation rather than data binding or interaction, serving as a foundational test of D3’s selection and attribute methods.

Mmattaouad
82% match
Loading thumbnail…

welcome to D3Js

This example demonstrates a minimal D3.js setup within a React framework, rendering a single red SVG rectangle as the main visual output. The code uses D3’s `select` function to grab the SVG element and apply a red background style, while also appending a paragraph with the text “hey” to the page body. The SVG is 400 by 200 pixels, generated via HTML, and all D3 operations are executed through the `bundle.js` script. The visualization serves as a basic introduction to integrating D3 with React and SVG rendering.

MManikyapavan
82% match