Skip to main content
SimilarExport ZIP
100%

let's make a list!

✓ Published1🌍 Public
Zzach b.
Last edited Nov 16, 2021
Created on Nov 14, 2021

This example demonstrates how to render a simple HTML list using D3.js. The code utilizes `d3.select` to target the `ul` element and `d3.selectAll` to create list items from a hardcoded array of strings, with the final element being a playful "banana" pun. Each generated `<li>` element receives the CSS class "poop" and displays its text content through the `.html()` method, resulting in a brown-colored list. The visualization relies on D3’s data-binding API and CSS styling to produce the output.

AI-generated description

basically this

MIT Licensed

Similar vizzes

Loading thumbnail…

let's make a list from a data file! (json)

This example renders a simple bulleted list from a JSON data file using D3.js. It demonstrates loading external data with `d3.json` and binding an array of strings to list items via `selectAll('li').data()` and the `.enter().append('li')` pattern. The data file contains repeated "one" strings and a final phrase, which are displayed as text inside each `<li>` element. The page consists of a bare `<ul>` element, with all list creation handled programmatically in JavaScript.

Zzach b.
76% match
Loading thumbnail…

let's make a list from a data file! (xml)

This example uses a small XML file to generate an HTML list. It reads the data from `data.xml` using D3's `xml()` function, then maps the parsed XML elements to list items. The code selects the `<ul>` element, applies D3's selection and data-binding API, and appends an `<li>` for each `<memo>` node, displaying its text content. The visualization highlights how server-side XML data can be directly transformed into client-side DOM elements within a D3.js workflow.

Zzach b.
72% match
Loading thumbnail…

let's make a list from a data file! (csv)

This example displays a simple bulleted list generated from a CSV file, rendering each row’s "memo" field as a list item. It uses D3 v7’s `csv` method to asynchronously load the data, then binds it to `li` elements via `selectAll`, `data`, and `enter`. The page also applies basic styling from an external stylesheet, though the visible aesthetic remains minimal.

Zzach b.
70% match
Loading thumbnail…

Untitled

This example uses D3 v4 to bind an array of data values to list items in an HTML page. It selects all existing `<li>` elements within an unordered list with the ID `list`, assigns the data array `[10, ...]` to them, and provides a button that triggers a `remove()` function via inline JavaScript. The page demonstrates fundamental data joining and simple DOM manipulation with D3, rendering the bound values into the list items while the button interacts with the dataset. The approach relies on D3’s `selection.data()` method and native browser event handling.

Nnore2310
70% 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
69% match
Loading thumbnail…

D3 Example 3

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.

OOleJRask
68% match
Loading thumbnail…

let's make a list from a data file! (rss)

This example demonstrates loading an external RSS feed and rendering its entries as a list. It uses D3 v7’s `xml` method to fetch a YouTube channel feed, then selects all `name` nodes from the parsed XML document and appends them as list items via `selectAll` and `data`. The page also calls `json` on a placeholder API, logging the response to the console. The code illustrates basic data fetching and DOM binding with D3’s selection utilities.

Zzach b.
67% match
Loading thumbnail…

Let's make a face with D3

A small web page demonstrates D3.js data binding by attaching an array of five numbers to a collection of empty paragraph elements. The code uses `d3.selectAll('p')` to select all paragraphs, chains the `.data()` method with the array, and applies `.text()` to output each value into its corresponding paragraph. The example also logs both the data and its index to the browser console, showing the iterative binding process. The HTML structure includes a series of empty `<p>` tags and loads D3 version 6 from a CDN.

Mmgl12432
66% match