Skip to main content
100%

Playing with D3

✓ Published0🌍 Public
Aarcox80
Last edited Sep 23, 2017
Created on Sep 23, 2017

This example demonstrates how D3 selections can be used to manipulate HTML elements, showing three divs labeled Box 1, Box 2, and Box 3. The code includes commented-out exercises that illustrate various D3 v4 APIs, such as selecting elements with `d3.select` and `d3.selectAll`, changing text with `.text()`, inserting HTML with `.html()`, and appending child elements with `.append()`. It also shows data binding with `.data()` and `.enter()` to create paragraph elements, though all commands remain inactive. The example serves as a tutorial reference for practicing D3’s DOM manipulation capabilities.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/jbelmont/'>jbelmont</a>'s block: <a href='http://bl.ocks.org/jbelmont/ccd655bb9c410190e305408bb93871b9'>Playing with D3</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding and selection techniques through commented code examples. It uses d3.selectAll and d3.select to target HTML div elements by element type, class, and id, showing how to update text content or append new elements. The visible page contains two static divs with distinct classes and ids, while the script section illustrates various selection patterns—including appending a new div to the body—though all interactive commands remain commented out. The code relies on D3 v3’s core selection API, with no external data sources or rendering beyond basic DOM manipulation.

Aaduo122
81% match
Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding by selecting and manipulating HTML elements. It shows how `d3.select` and `d3.selectAll` target elements by tag, class, or ID, and how chained methods like `.append` and `.text` modify the document. The active code selects the `body` element, appends a new `div`, and sets its text content to "I'm the new div added by d3! Yo!"—illustrating the resulting order of appended elements. Other selection strategies are commented out, revealing alternative approaches for updating existing text. The example uses D3 v3 from the d3js.org CDN.

VVyrwn
81% match
Loading thumbnail…

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

This example demonstrates the basics of using D3 v4 for HTML selection and data binding through an interactive tutorial. A button triggers D3 code that modifies existing paragraph elements by changing their font size and text content. The exercise then introduces joining an array of two data items to new paragraphs using `d3.selectAll` and `.data().enter().append()`, with instructions for adding click handlers. The page includes a checklist of tasks covering manual DOM manipulation, debugging, and progressively building up D3 data-binding skills.

ZZerkTheMighty
81% match
Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections can target specific elements in the DOM using element type, ID, and class selectors. The page contains two visible divs with different identifiers, and commented code shows updated text for various selection strategies, such as `d3.selectAll('div.selectMe')`. It also illustrates appending new elements, where `d3.select('body').append('div')` adds a child to the document body. Built with d3.v3, the example relies solely on D3’s core selection and manipulation APIs, with no external data or rendering pipeline.

LLelandCurtis
80% match
Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding through interactive selection and DOM manipulation. It shows how to target specific HTML elements using CSS-style selectors, with commented examples for selecting by element type, class, or ID, and updating their text content. The code also illustrates appending new elements to the DOM using `d3.select` and `.append()`. Using D3 v3, the visualization relies on core selection methods like `selectAll` and `text` to illustrate the framework’s binding capabilities, with the page containing two static divs and commented-out code that reveals potential interactions.

BBillyBHWong
79% match
Loading thumbnail…

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

This example demonstrates a step-by-step tutorial for learning D3 v4 data binding and DOM manipulation. It shows how a button click triggers D3 code that updates existing paragraph elements, changing their font size and text content, and also appends new paragraphs from a JavaScript array using the data join pattern. The code uses `d3.select`, `selectAll`, `data`, and `enter` to bind data, with event listeners that respond to paragraph clicks by altering styling and text. The page includes checkboxes for tracking exercise progress, which are styled using CSS selectors based on checked state.

Aammarasmro
79% match
Loading thumbnail…

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

This example demonstrates how to bind data to HTML elements using D3 v4. It features a sandbox with four paragraphs that, upon clicking a button, change their text and font size. The code then uses D3’s `selectAll`, `data`, and `enter` methods to append two new paragraphs from a simple array, with commented examples showing how to attach click handlers to modify text dynamically. The exercise section lists interactive checkboxes that can be toggled via D3’s property method.

CChrisChrisLoLo
79% match
Loading thumbnail…

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

This interactive exercise demonstrates basic D3.js data binding and manipulation on a webpage. The page displays a button that, when clicked, runs JavaScript using D3 to select all elements with the class "standard" and changes their font size and text. It also shows how to bind an array of two strings to new paragraph elements, appending them to the DOM, and attaching click handlers that log messages and alter text. The example uses the D3 version 4 API, including `d3.selectAll`, `.data()`, `.enter()`, `.append`, and `.classed`, to programmatically modify HTML content.

MMandyMeindersma
79% match