Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Jjamal.bacha@gmail.com
Last edited Jan 26, 2021
Created on Jan 26, 2021
Forked from HTML Starter

This example renders a 3 by 3 matrix of text labels using D3 v6 within an SVG container. The code defines a fixed width and height for the SVG and creates a group element for each row of the data array, translating each group vertically. Within each group, it appends text elements positioned horizontally, all displaying the string "toto". The visualization demonstrates how to bind nested data arrays to groups and use selection methods to generate repeated SVG elements based on that data structure.

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 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
83% 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
83% 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 HTML Starter

This example demonstrates a simple interactive webpage that uses D3.js to manipulate HTML elements and render an SVG graphic. It shows a static red circle with a blue fill and black stroke inside an SVG, alongside paragraphs that become blue after D3 selects them. The code uses `d3.selectAll` and `d3.select` to target elements, and the data-join pattern with `.data()` and `.enter().append()` to dynamically add new paragraphs listing numbers 4, 8, 15, 16, 23, and 42. The page relies on D3 v6 loaded via a CDN, with CSS controlling basic text alignment and font size.

Cclicketeer
82% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic D3.js chart construction, including SVG creation, linear and logarithmic scales, and band scales for categorical data. It renders rect elements as a bar chart with axis generation using `d3.axisLeft` and `d3.axisBottom`. The code also shows data binding with arrays and JSON objects, plus animated text transitions using `transition().duration()`. Styling includes CSS classes and inline SVG attributes with a yellow background.

KkazGuido
81% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes created with D3.js and vanilla JavaScript, rendering two circles and three rectangles of varying heights on a blank canvas. The code uses D3’s `select` to append the shapes to an SVG element, with an array `myData` supplying rectangle heights. It also queries all `rect` elements via `document.querySelectorAll` and attaches a click handler that logs a message to the console. The page is styled with CSS, including a large centered greeting and red circles.

HHOURPRIMERA@GMAIL.COM
81% 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
81% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple bar chart rendered as SVG rectangles, with bar widths and colors mapped linearly to the values in a three-element data array. It uses D3 v3’s selection and data binding to append the rectangles, then applies `d3.scale.linear` for both width and color scales (mapping 0–80 to pixel widths and red-to-blue fills). Animated via `transition()` on the width attribute. The rendering relies on D3’s SVG manipulation with no external data source beyond the hardcoded JavaScript array.

Bbrunotrindademachado
80% match