d3.js journey

100%

✓ Published0🌍 Public

Last edited Aug 7, 2024

Created on Aug 7, 2024

Six horizontal black rectangles of varying widths sit on a white canvas, demonstrating basic SVG shape construction. Each rectangle is positioned by explicit x and y coordinates and fixed height values, creating a simple bar-like composition. The visualization uses raw SVG elements—specifically `<rect>` tags—within an HTML document, with no JavaScript or D3.js library present. The example highlights how static shapes can be defined directly in markup with precise sizing and placement attributes.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Learning D3

This example demonstrates a minimal SVG visualization composed of three horizontal lines, each drawn as a black path across a 960-by-500 viewport. The code uses static path elements with explicit coordinates, showing how basic shapes can be rendered without additional data or interaction. It incorporates an inline SVG in HTML with CSS and JavaScript, serving as a starting point for learning D3. The visualization relies solely on predefined path data, not on D3’s data-binding or scale APIs.

Bbetemaujkardi

81% match

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

81% match

Loading thumbnail…

HTML D3

This example shows a static set of basic geometric shapes rendered in an SVG canvas, using HTML, CSS, and JavaScript without any external libraries. It displays two circles, one pink and one black, alongside a black rectangle with a pink stroke, all positioned manually via SVG coordinates. The styling is applied through a CSS class for typography and inline presentation attributes for the shapes. The code demonstrates the foundational structure of an HTML page with embedded SVG, which serves as a minimal starting point for building more complex D3.js visualizations in a React environment.

SSurabhi Verma

81% match

Loading thumbnail…

d3 intro

This example renders a full-screen SVG filled with 100 horizontal rectangles, each stacked vertically with a fixed height of 10 pixels and a small gap between them. The visualization uses d3.select and d3.range to generate the data, then binds it to rect elements via a data join. The rectangles span the entire window width, creating a simple striped pattern that highlights D3’s declarative approach to binding data to SVG shapes using the .attr and .join methods.

Ssukumardunn

81% match

Loading thumbnail…

D3 SVG

This example demonstrates basic SVG shapes rendered with D3.js, showing how static geometric elements can be drawn directly in a web page. It displays a blue circle and a rectangular outline with a stroke, positioned at fixed coordinates within an SVG canvas of 500 by 960 pixels. The code uses the D3.js library to construct the SVG container and its child elements, with circle and rect tags defining the visual properties. The rendering approach relies on D3’s SVG manipulation capabilities, though no data binding or dynamic updates occur, as the shapes are hardcoded in the HTML structure.

MMohd Sameer

81% match

Loading thumbnail…

SVG Example

Five static SVG rectangles form a simple bar chart, descending diagonally from the top-left to the bottom-right. The bars have equal widths and varying heights and y-positions, creating a staircase-like visual from a hardcoded JavaScript array of objects. The example uses D3 v4’s selection API to append rectangles to an SVG canvas, setting x, y, width, and height attributes from the data. The code demonstrates basic declarative binding of data to SVG shapes without animation or axes.

CCurran Kelleher

81% match

Loading thumbnail…

D3.js in action!

This example shows a red square with a thick black border rendered inside an SVG canvas, demonstrating basic D3.js DOM manipulation. The code uses `d3.selectAll('svg')` to target the SVG element and appends a `rect` with attributes for position, size, stroke, and fill. It relies on the D3 v5 library loaded from a CDN, and renders the shape as pure SVG geometry without any data binding or interaction. The result is a static visual, illustrating how D3 can directly create and style SVG elements.

SSagar Malviya

81% match

Loading thumbnail…

d3 art

This example renders a series of red horizontal rectangles across the full screen using SVG, with each rectangle positioned at a fixed y-coordinate. The code builds an array of mark objects and uses D3 v5's `select`, `range`, and `append` methods to create the shapes, while the HTML page loads D3 from a CDN. The visualization is minimal, showing only stacked red bands without interaction or animation.

Aaissatheprogrammer

80% match