My first D3.js vizualization

100%

My first D3.js vizualization

✓ Published0🌍 Public

Last edited Jul 2, 2020

Created on Jul 2, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

84% match

Loading thumbnail…

My first D3

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.

Aalikanet

83% match

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

82% 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…

Hello, D3!

This example demonstrates a simple D3.js visualization: a single large yellow circle centered within an SVG canvas. It introduces fundamental SVG and D3 selection patterns by creating, styling, and positioning a circle element using `d3.select`, `svg.append`, and `.attr` methods. The code sets the circle’s radius to 200 pixels, fills it with yellow, and centers it horizontally and vertically based on the SVG’s width and height attributes. The visualization serves as a minimal, hands-on introduction to rendering SVG shapes with D3 v5.

MMarmiya

81% match

Loading thumbnail…

Hello VizHub!

This example displays a single blue circle centered on an SVG canvas, demonstrating the basic workflow of creating and positioning shapes with D3. The code imports the `select` function from D3 v5, appends a `circle` element to the SVG, and sets its radius and center coordinates using the `attr` method. The SVG is sized at 960 by 500, matching the viewport dimensions used for the circle's position. The visualization serves as a minimal, foundational template for D3-based projects, with styling defined in a separate CSS file that imports the Ubuntu font.

Aabreudude

81% match

Loading thumbnail…

Hello VizHub

A single yellow circle with a black outline fills the center of an SVG canvas, demonstrating the basic setup of a D3.js visualization. The example uses the `d3.select` API to target the SVG element, then appends a circle element with radius and center coordinates derived from the SVG's width and height attributes. The visualization renders through SVG, with the circle's fill and stroke set via `.attr()`. It serves as a minimal template for creating interactive web graphics with D3 version 5.

Hhtt102

80% match

Loading thumbnail…

Circles with D3 Cleaned Up

Fourteen colored circles, each with a unique position, radius, and color, are rendered on a 960×500 SVG canvas. The visualization demonstrates a clean, data-driven approach to drawing circles using D3 v7. The code binds an array of circle data to SVG circle elements using `selectAll`, `data`, and `join`, setting the `cx`, `cy`, `r`, and `fill` attributes directly from each data object. The data is defined in a separate module and the visualization logic is contained in a reusable `viz` function, making the example modular and easy to extend.

CCurran Kelleher

80% match