Skip to main content
SimilarExport ZIP
100%

D3 and Custom Data Attributes

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Oct 28, 2011

This example shows how D3’s `datum` operator can read HTML5 custom data attributes from DOM elements and use that data for sorting. The code selects all list items, binds each element’s `dataset` object—containing the `username` attribute—via `.datum()`, then reorders the list with `.sort()` based on `d3.ascending` on the username values. It uses D3 v3 directly on a static, two-item unordered list, making no external data requests or canvas rendering.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3 datum()

This example demonstrates how the `datum()` method binds a single piece of data to multiple DOM selections at once. The page contains four empty `<h3>` elements, and the script selects them all with `d3.selectAll('h3')`, then calls `datum('i am a little bird')` to attach the string to each element. Using the `.text()` method with an accessor function, it renders both the bound value and the element’s index, showing that the same data is shared across all selected nodes. The code uses D3 v5 and plain JavaScript in a simple HTML file.

Ssgzzhinde
68% match
Loading thumbnail…

D3 Selection Exploration

This example demonstrates how D3’s `ascending` comparator can be used to sort an array of key-value pairs by their keys. The code defines a static dataset of three entries with keys A, C, and B, logs the original array, then logs the sorted result after applying `entries.sort((a, b) => ascending(a.key, b.key))`. The visualization is minimal, relying only on an HTML page with a large centered text message and no graphical rendering. It uses D3 version 7.8.5 within a React project, but the focus is purely on console-based data manipulation rather than visual output.

Nnreinig3@gatech.edu
68% match
Loading thumbnail…

D3 Selection Exploration

This example demonstrates how D3’s `ascending` comparator can be used to sort an array of key-value pairs by their keys. The code defines a static dataset of three entries with keys A, C, and B, logs the original array, then logs the sorted result after applying `entries.sort((a, b) => ascending(a.key, b.key))`. The visualization is minimal, relying only on an HTML page with a large centered text message and no graphical rendering. It uses D3 version 7.8.5 within a React project, but the focus is purely on console-based data manipulation rather than visual output.

Nnreinig3@gatech.edu
68% match
Loading thumbnail…

D3 vanila

This example demonstrates sorting an array of objects by their `key` property using plain JavaScript within an HTML page styled with CSS. The code defines three entries with keys A, C, and B, then applies the `Array.sort()` method with a comparison function that returns -1 or 1 based on ascending order. It relies on the `d3` library, specifically importing the `ascending` function from version 6.6.1, though the visible sort logic implements the comparison manually. The result is logged to the browser console, showing the reordered entries B, C, A.

Xxani
67% match
Loading thumbnail…

Fork of Hour 5

This example demonstrates client-side data processing with D3.js, displaying a hardcoded array of key-value pairs in the browser console. It shows how D3’s `ascending()` comparator is used within the `sort()` method to order entries alphabetically by their `key` field, producing a reordered sequence (A, B, C) from the initial unsorted list. The visualization itself is minimal, consisting of a large “Hello HTML!” message styled via CSS, while the actual algorithmic behavior is observable only through the console output. The code relies on the D3 library (v7.8.5) and standard JavaScript array methods, with no rendering to the canvas or SVG.

Nnreinig3@gatech.edu
66% match
Loading thumbnail…

d3 tutorial

A tutorial demonstrates basic D3.js selection and DOM manipulation using a static HTML page with car listings and paragraphs. The code uses `d3.select` and `d3.selectAll` to change text colors—turning headings blue, list items magenta, and paragraphs green—and to style nested table cells with cyan backgrounds. Data binding via `.data()` maps an array of numbers to blank `h2` elements, while class-based selectors color warning and error messages. All styling is applied through D3's `.style()` and `.text()` methods on the live DOM.

Bbmurill2019
66% match
Loading thumbnail…

JavaScript Arrays - Vanilla HTML

This example demonstrates how to sort an array of objects in JavaScript using the D3 ascending comparison function. The code defines a custom range generator function, creates an array of ten numeric values, and builds an array of key-value entries. It logs the entries sorted alphabetically by key through the Array.sort method, with D3 6.6.2 imported as a dependency. The visualization is plain vanilla HTML with no visual output, focusing purely on algorithmic array manipulation.

TTheo-0201
66% match
Loading thumbnail…

D3 DataBinding

This example demonstrates a simple bar chart that visualizes municipal census data from a JSON file, showing municipality names alongside their census values. The visualization uses D3 v5’s data join pattern to bind dataset elements to SVG rectangles and text labels, sorting bars in descending order and scaling bar widths with `d3.scaleLinear`. The code loads data asynchronously via `d3.json` and renders two separate SVG containers, though only the first is populated. Text labels are positioned manually without an x-coordinate, leaving them at the SVG’s default origin.

663anp3ca
66% match