D3 Example 3

100%

✓ Published0🌍 Public

Last edited Aug 26, 2021

Created on Aug 26, 2021

Two interactive D3 examples demonstrate HTML list construction and selection. The first version displays the phrases “From East,” “to West,” “at Home,” and “is Best” as clickable list items; each click toggles the text color between red and blue using a 500-millisecond transition applied via D3’s `transition()` method. The second, simpler version uses `d3.select`, `append`, `selectAll`, and `data().enter()` to build the same static list without interactivity. Both rely on D3 v7, initiated through the `body` element’s onload event.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 tutorial

A tutorial demonstrates basic D3.js selection and DOM manipulation using a static HTML page with car listings and paragraphs. The code uses `d3.select` and `d3.selectAll` to change text colors—turning headings blue, list items magenta, and paragraphs green—and to style nested table cells with cyan backgrounds. Data binding via `.data()` maps an array of numbers to blank `h2` elements, while class-based selectors color warning and error messages. All styling is applied through D3's `.style()` and `.text()` methods on the live DOM.

Bbmurill2019

73% match

Loading thumbnail…

Manipulating DOM

This example demonstrates how D3.js can dynamically manipulate HTML elements in the DOM. Using d3.select, the code changes text colors, background colors, and list attributes when the "Change!" button is clicked, and resets them with the "Reset!" button. The page includes a heading, paragraphs, and ordered/unordered lists styled via CSS, showing D3's ability to modify existing web content beyond SVG visualization.

SSreenivasulu

73% match

Loading thumbnail…

D3 Starter

This example demonstrates the basic data-binding workflow in D3 by rendering a list of six sentences, each displaying a number from a hardcoded array. The code uses `d3.select` to target the body element and the `data().enter().append()` pattern to create paragraphs. Each paragraph’s text and color are set via callback functions passed to `.text()` and `.style()`, with numbers above 15 rendered in blue and others in green. The visualization relies on D3’s core selection and data-join APIs (specifically `enter` and `append`) without any external data source, using inline JavaScript with a global D3 v7 library.

KKrittaprot Tangkittikun

73% match

Loading thumbnail…

Untitled

This example demonstrates how D3 can bind data to pre-existing HTML list items and update them dynamically. The visualization shows five initial values displayed as text within `<li>` elements, with a button that triggers removal of the fourth data point. The code uses D3 v4’s selection API, including `.data()`, `.text()`, and `.exit().remove()`, all inside an HTML page with inline JavaScript. It relies on the `d3.select` and `d3.selectAll` methods to manipulate the DOM.

Ddeven1998

72% match

Loading thumbnail…

D3 animations

This example demonstrates a minimal D3 version 7 setup that renders the text "Hello D3 version 7" directly onto the page body. It loads the full D3 library from a CDN and uses the `select` API to target the body element. The example serves as a starting point for exploring D3’s animation capabilities, showing how to initialize the library and perform a basic DOM selection. The code does not include any animation logic beyond the static text insertion.

SSimone

72% match

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

71% match

Loading thumbnail…

Hello D3

This example shows a simple introductory D3 visualization that replaces the entire body content with the text “Hello d3 v6.” It demonstrates the most basic use of D3’s `select` method to target an element and set its text content. The HTML page loads D3 v6 from a CDN and uses a CSS class to style the message with a large, centered font. The rendering is purely text-based, with no data or graphical marks involved.

DDeceptionsInMind

71% match

Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates an interactive tutorial for learning basic D3.js data binding and DOM manipulation. It shows how a button click triggers a function that selects existing paragraphs, modifies their style and text, then binds an array of two strings to create new paragraph elements using `d3.selectAll`, `data`, and `enter`. The new paragraphs respond to click events, changing their color and text. The page also includes a checkbox list as an exercise guide, completed programmatically via d3’s `property` method. The code uses d3.v4 and relies on standard selection, data join, and event handling APIs.

MMara2020

71% match