Skip to main content
SimilarExport ZIP
100%

d3 art

✓ Published0🌍 Public
Aaissatheprogrammer
Last edited Nov 25, 2022
Created on Nov 24, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
84% 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
84% match
Loading thumbnail…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994
83% match
Loading thumbnail…

Welcome to D3JS

Three separate headings frame a red SVG square. Built with the D3.js v5 library, the visualization uses `d3.select` to target the SVG element and applies a red background via `svg.style`. The page combines vanilla HTML, an external stylesheet that resets margins, and JavaScript that also logs the D3 object to the console. This React-hosted example demonstrates D3’s DOM selection and styling methods within a minimal document structure.

DDextor
82% match
Loading thumbnail…

D3

This example demonstrates a minimal D3.js setup within a React environment, rendering an SVG element that is styled with a red background. The page includes a simple text placeholder and an empty SVG canvas of 960 by 500 pixels. The code uses d3.select to target the SVG and applies the background color via the style method. Although no data is loaded, the visualization serves as a basic template for integrating D3 with React, relying on the d3.v5 library and direct DOM manipulation.

HHeikeCardoso
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
Loading thumbnail…

first D3

This example shows a fullscreen grid of 200 vertical rectangles, each a random color, animating upward indefinitely. The rendering approach uses raw SVG elements created via the `document.createElementNS` API, with styles set directly on each rectangle. The animation relies on the Web Animations API (`element.animate`) to translate each rectangle along the Y-axis with randomized durations and infinite iterations. No external JavaScript libraries are used; the page is a minimal HTML document with inline CSS and JavaScript, demonstrating basic D3-free DOM manipulation for a generative visual effect.

GGusnaRWX
81% match
Loading thumbnail…

Document

This example displays a single red SVG rectangle that fills the entire 960 by 500 pixel viewport. Using D3 v6, the code selects the SVG element and applies the background color directly through its style property. The visualization demonstrates the simplest possible rendering approach, where a static shape is styled without any data binding or interactive behavior. The HTML page loads the D3 library from a CDN and runs the JavaScript which modifies the SVG element.

GGal Thelander
81% match