Skip to main content
SimilarExport ZIP
100%

Fork of only for testing

✓ Published0🌍 Public
Pparag776
Last edited Feb 4, 2023
Created on Feb 4, 2023
Forked from HTML Starter

This example demonstrates a minimal SVG rectangle rendered inside a div container using D3.js version 7.8.2. The code selects a div with class "svg", appends an SVG element, then appends a group and a rectangle with specified x, y, width, and height attributes. A dummy div above creates vertical spacing on the page. The example uses plain CSS for layout and D3's selection and append methods to construct the visualization.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG scene created with D3, displaying an empty canvas with fixed dimensions of 123 by 345 pixels. The code uses `d3.select` to append an SVG element to the body and sets its width and height attributes via `svg.attr`. It demonstrates a basic setup for a React-based visualization, though the actual rendering is purely procedural with no data binding or visual marks. The example relies on D3 version 6.6.1 and serves as a starting point for more complex SVG visualizations.

AAadharsh Aadhithya
83% match
Loading thumbnail…

Fork of d3

This example shows a bold, minimal visualization: a 500-pixel SVG square with a solid red background, rendered inside an HTML page. The page loads the D3.js v6 library from a CDN and uses a simple script to select the SVG element and apply the background color via the `style` method. The code relies on D3’s selection API to target the SVG and set its CSS property, resulting in a static, full-color graphic with no data or interaction. It demonstrates basic D3 usage with an SVG canvas and a plain JavaScript script.

Ggyanendra verma
83% match
Loading thumbnail…

Fork of D3 Fork

This example demonstrates a minimal SVG visualization where fifteen circles with a radius of 100 pixels are drawn across the full browser viewport. The code uses D3 version 7.4.4's `select`, `range`, and `selectall` APIs to append circles to the SVG container, with dimensions taken directly from `window.innerWidth` and `window.innerheight`. The visualization is embedded within a React 18.1.0 project, though the rendering itself relies solely on D3's selection and data-binding methods rather than React components.

IisZachariah
82% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG graphics drawn with D3.js, including two circles and three rectangles whose heights correspond to data values from a JavaScript array. The code uses D3's `select` API to target the SVG element and append shapes, while also utilizing vanilla JavaScript `querySelectorAll` to add click handlers. The visualization serves as a minimal starter template, combining static data-driven bar-like shapes with interactive alert functionality.

LLouisa Penrice
82% match
Loading thumbnail…

Fork of HTML Starter

This example presents a minimal, blank SVG canvas rendered within a React application, demonstrating the foundational setup for a D3.js visualization. The code imports the `select` function from D3 and uses it to target the existing `<svg>` element, preparing it for future data binding and drawing operations. The visualization shows no data or shapes, serving purely as a starter template. It relies on D3 v7, loaded via a CDN, with the rendering approach being SVG-based within the React framework.

NnitishGangadhari
82% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a basic SVG visualization using D3.js, drawing two circles and two rectangles on a canvas. The circles are positioned at different coordinates with a fixed radius, while the rectangles are placed at the same x and y positions but vary in height, with one using a value from the `myData` array. The code imports `select` from D3 to append elements, and additionally uses native `querySelectorAll` to log the rectangle elements to the console. Styling is applied via CSS, with red circles and minimal body margins.

Kkaijavanzante@gmail.com
82% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes and data binding using D3.js. It appends two circles and three rectangles to an SVG container, with the rectangle heights determined by values from a hardcoded array. The code uses `d3.select` to access the SVG element and `append` functions to create visual elements. Interactive behavior is added by attaching `onclick` handlers to the rectangles via the browser's `querySelectorAll` and `setAttribute` methods.

Cchris.shimotake@gmail.com
82% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a basic HTML page that uses D3.js to draw three circles and three rectangles in an SVG container. The rectangles are positioned using hardcoded data from a small array, while the circles have fixed coordinates. The code demonstrates direct SVG manipulation through both D3 selections and native DOM methods, logging elements to the console and adding onclick handlers to each rectangle. The page includes simple CSS styling for the message text and circle appearance.

Gg_ivaska@coloradocollege.edu
81% match