Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

getting errors: "Cross-Origin Request Blocked"

MIT Licensed

Similar vizzes

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.
78% match
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.
77% 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.
74% 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.
67% 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
65% match
Loading thumbnail…

CSV

This example demonstrates a minimal D3 version 7 setup that fetches a CSV file of mammal data from a GitHub gist and displays the text “Hello D3 version 7” in the browser. Using the `select` API from D3, it targets the `body` element to render the message. The code loads D3 from a CDN, then asynchronously retrieves the CSV via `fetch`, though no additional processing or visualization of the dataset is shown. The page styling centers the text with a large font size.

AAlankruthSai
64% match
Loading thumbnail…

Fork of HTML Starter

This example loads a CSV file containing names and ranks, then logs the resulting array of objects to the browser console using `d3.csv`. The page structure is minimal, with a single `div` container and a module script that executes the data-loading logic. Styling is applied via a CSS class for large centered text, though no visual rendering occurs in the current code. The project demonstrates a basic integration of D3.js v7 for asynchronous data parsing within a simple HTML and JavaScript setup.

Aarkaim23
64% match
Loading thumbnail…

Loadind Data

This example demonstrates loading and parsing external data using the JavaScript Fetch API and D3's `csv` method. The page displays the static text "Hello HTML" in large type, while the console logs the raw contents of a CSV file containing CSS named colors fetched from a GitHub gist. A second script imports `select` and `csv` from D3, reads a local `data.csv` file, and logs the parsed data array to the console. The visualization focuses solely on data acquisition, with no visual output beyond the HTML text.

Sseanlucano
64% match