Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

basically this

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example displays a simple bulleted list of strings loaded from a JSON data file. It shows how D3 can fetch external data and use it to build DOM elements. The code uses the `d3.json` method to load `data.json` and then leverages D3's selection API to create `<li>` elements inside a `<ul>` via `selectAll`, `data`, and `enter`. Styling is minimal, with a body reset and a `.poop` class defined in CSS but not applied.

Rrobinjohn.inc@gmail.com
88% 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.
82% 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.
77% 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.
76% match
Loading thumbnail…

let's make a list!

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.

Zzach b.
76% 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
71% 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
68% match
Loading thumbnail…

D3-coding-challenge#1: Read and Display JSON Data

This example demonstrates how to read and display JSON data using D3.js v7. It loads an array of car objects containing year, make, model, and price fields, then renders two lists: one showing only the car make and another displaying full descriptive sentences for each car generated by the `print_info` helper function. The code imports the data from a separate JavaScript module, formats it using `JSON.stringify`, and binds it to DOM list items through D3’s `selectAll().data().enter().append()` pattern, with styles defined in an external CSS file.

MMartin MIAO
68% match