EVENT

100%

✓ Published0🌍 Public

Last edited May 28, 2020

Created on May 28, 2020

Forked from Shapes and Colors with SVG and CSS

The example demonstrates three paragraph elements labeled "one," "two," and "three," each assigned unique IDs through D3.js selection and appending. It shows how D3’s `select` and `append` methods create and style basic DOM nodes with a minimal, static layout. The page applies global CSS that sets the body margin to zero and hides overflow, while the provided styles for `.lines` and `.lines path` suggest unused stroke and color properties. No interaction or data binding occurs; the visualization relies solely on D3’s core DOM manipulation API.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates a simple SVG-based visualization using D3.js, displaying three text elements labeled "one," "two," and "three" as paragraphs appended to the body. The visualization uses D3's selection and append methods to create the elements, with minimal styling applied via a stylesheet that sets the page margin and defines a black stroke for line elements. The rendering approach is straightforward, relying on basic SVG features without additional libraries or data sources.

Jjesramyep1263

79% match

Loading thumbnail…

HTML Starter

This example demonstrates the fundamental pattern of D3.js selection and data binding by rendering three paragraph elements inside a single div. The code uses `d3.select`, `selectAll`, and `data` to apply an array of numbers `[1, 2, 3]` to the page, then calls `enter` and `append` to create the paragraphs, with `text` formatting each element’s numeric value. It relies on the D3 v5 library loaded from a CDN, paired with a minimal `index.html` structure and a CSS file that resets margins for a clean, full-bleed display.

JJustinCavanas

76% match

Loading thumbnail…

D3 Selectors

This example demonstrates D3’s DOM selection and manipulation methods by directly targeting elements. It uses `d3.select` to modify the `h1` heading’s color, class, and text, then `d3.selectAll` to style all paragraphs blue. The code appends three new paragraphs to the body using chained `append` calls. It relies on D3 v7 and plain CSS/JavaScript, showing how selectors apply cascading changes to existing and newly created nodes.

Aacervantesc

74% match

Loading thumbnail…

D3.js!

This example demonstrates the fundamental data-join pattern in D3.js, where an array of numbers [1, 2, 3] is bound to a selection of paragraph elements. Using `d3.select`, `selectAll`, `data`, `enter`, and `append`, it creates three `<p>` elements inside a `<div>`, with each paragraph’s text set to the corresponding data value via `.text(dta => dta)`. The code runs in a React environment while loading the D3 v7 library from a CDN, highlighting how to mix D3’s imperative DOM manipulation with a minimal HTML page structure.

RRyanLaFleur

74% match

Loading thumbnail…

d3 select this

This example demonstrates basic D3.js selection and DOM manipulation using the v5 API. It shows how to bind an array of numeric data to paragraphs, conditionally style elements with `d3.select(this)`, and explore methods like `append()`, `insert()`, and `remove()`. The code uses D3's data join pattern with `.enter()` and `.append()`, and directly modifies inline styles for each paragraph based on index. It also illustrates the difference between appending and inserting nodes relative to existing elements, with explicit selector targeting in the insertion operation.

Ssgzzhinde

74% match

Loading thumbnail…

D3 selections

This example demonstrates D3’s selection and data-join mechanism. It maps an array of five numbers to paragraph elements, appending each value as text. Paragraphs whose data values exceed 15 are then filtered and styled with red, bold text using D3's `.filter()` method. The code uses `d3.select`, `.selectAll`, `.data`, `.enter()`, and `.append()` to bind the array and create the DOM nodes, with styling applied via `.style()`.

KKaustav Sen

73% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates basic DOM manipulation and styling with D3.js. It appends three separate paragraph elements to the body, each containing distinct text such as "1st para" and "2nt para," using chained d3.select and d3.append calls. After creating the paragraphs, d3.selectAll("p") selects all of them and applies a red color via the style method. The page loads D3 version 7.8.5 from unpkg, with the body styled at a large 13em font size. The visualization focuses purely on D3's core selection and insertion APIs without any data binding or scales.

AAkshay U

73% match

Loading thumbnail…

Learn d3.js

This example demonstrates the fundamental data-join pattern in D3.js v4, binding an array of five numbers to paragraph elements. It displays the numbers 1 through 5 as text content in separate paragraphs on an HTML page. The code uses `d3.select`, `selectAll`, `data`, `enter`, and `append` to create the elements, with a callback function in `.text()` to set each paragraph’s content from the dataset. The visualization relies on the D3.js v4 library, loaded from a CDN, and runs within a minimal HTML structure.

Ttayyabanisar

73% match