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

100%

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

✓ Published0🌍 Public

Last edited Mar 24, 2018

Created on Mar 24, 2018

This interactive D3 workshop demonstrates the basics of data binding and DOM manipulation in a live sandbox. It shows how a button click triggers JavaScript to modify existing paragraph elements—changing their text and font size—while also appending new paragraphs from a hardcoded array. The code uses D3 v4’s `selectAll`, `data`, and `enter` methods to bind the array `myData` to new `<p>` elements, then adds click interactivity via `on`, which changes the clicked paragraph’s text and color. The example also includes an HTML checkbox exercise list, though only the button-driven D3 logic is functional.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/ideaOwl/'>ideaOwl</a>'s block: <a href='http://bl.ocks.org/ideaOwl/c9cfb578976a88a140fadd030e4f486e'>D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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

This example demonstrates an interactive D3 v4 workshop that teaches basic HTML, d3, and data binding through a hands-on exercise. It shows a button that, when clicked, runs a d3 code snippet targeting paragraphs inside a sandboxed div, while a checklist outlines tasks like adding paragraphs, manipulating text, and binding arrays. The code uses d3.js v4, with d3.select and d3.selectAll to handle DOM selection and manipulation, plus event handling for button clicks. The visualization renders static HTML paragraphs as the primary data display, with the exercise structure guiding users through progressive coding challenges.

IIgathi

93% match

Loading thumbnail…

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

This example demonstrates a hands-on D3 workshop exercise that introduces basic HTML structure, the D3.js v4 library, and fundamental data-binding concepts. It shows a sandboxed webpage with a button that, when clicked, triggers a JavaScript function to manipulate existing paragraph elements and append new ones based on an array of data. The code uses `d3.select` and `d3.selectAll` to target DOM elements, applies styles and text changes, and employs the data join pattern with `.data()`, `.enter()`, and `.append()` to create new paragraphs. It also attaches click event handlers to dynamically added elements, logging a message and altering their appearance, while the accompanying exercise checklist guides users through modifying the code to reinforce learning.

AAndrewMcKernan

93% 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

93% match

Loading thumbnail…

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

This example demonstrates interactive data binding in D3.js v4, showing how to manipulate existing paragraphs and append new ones from an array. It uses D3's selection and data-join methods (`d3.select`, `selectAll`, `data`, `enter`, `append`) to update text and styles, plus click handlers to change content dynamically. The visualization includes a button that triggers the code and a checklist of exercises, all built with basic HTML and the D3 library loaded via CDN. The data source is a simple two-item array, `myData`, rendered as new paragraphs with class `newPara`.

CCirieneve

90% 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

81% match

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections target and manipulate specific DOM elements, showing the difference between selecting all matching elements versus a filtered subset. It highlights how chained selection methods like `selectAll` and `select` work, along with class and ID selectors, to update text content or append new nodes. The code uses the D3 v3 library, loading it from a CDN, and applies methods such as `select`, `selectAll`, `text`, and `append` to bind data-driven changes to a simple HTML structure containing two divs. No external data source is used; the example relies on static HTML content within the page.

AAlbertFranco

78% match

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding by mapping an array of five names to dynamically created `div` elements. It shows how the `enter()` selection creates one element per data item, then uses a text function to display each name with its corresponding index. The visualization uses D3 v3’s `d3.selectAll`, `.data()`, `.enter()`, and `.append()` to bind and render the data, highlighting the core concept of joining data to DOM nodes. The rendered output is a simple list of numbered greetings, illustrating the fundamental data-join pattern.

BBillyBHWong

78% match

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding by mapping an array of five names to newly created `<div>` elements. It shows how data can drive the DOM, with each element displaying its corresponding value and a sequential number. The code uses `d3.selectAll('div')` to create an empty selection, `.data([...])` to bind the array, and `.enter().append('div')` to generate elements for each data point. Finally, `.text(function(d, i))` populates each div with the index and name, illustrating D3’s enter selection and data-driven updates.

AAlbertFranco

77% match