Order

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jan 29, 2012

This example demonstrates how a user can reorder a list of five items (A–E) through clicks. The initial list is rendered as an HTML `<ul>` using D3’s `d3.select` and `selectAll` chains, with each item bound to the first row of a hardcoded 5×5 string array. Clicking an item triggers the `reorder` function, which calls `.data()` on the existing `li` nodes with that click’s corresponding row, then applies D3’s `.order()` to smoothly animate the reordered elements.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

selection.order

This example demonstrates how `selection.order` reorders DOM elements to match the order of their bound data. Three initial divs are created from an array, then the selection is re-bound to a longer array with a key function. New divs are appended for entering elements, and `div.order()` repositions all divs so their document order matches the data order. The code uses d3.v3 with basic selections, data joins, and the `text` operator, showing a simple before-and-after ordering effect.

Mmbostock

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

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

66% match

Loading thumbnail…

Untitled

This example demonstrates D3.js data joins by rendering a list of five numeric values as `<li>` elements, with a button to remove the fourth item. The initial list combines pre-existing elements bound to data with dynamically appended entries using `d3.select().data().enter()`. Clicking the button triggers a function that resets the data array to four values and uses `exit().remove()` to remove the now-orphaned list item. The page uses D3 v4 with a minimal HTML structure and inline CSS for font styling.

DDebaliena

66% match

Loading thumbnail…

Untitled

This example demonstrates a dynamic HTML list that displays five numeric values, with a button that removes the fourth value from the list. The page uses D3.js v4 to select the list items and bind the data array to them, dynamically generating each list item with a text string that includes the corresponding data value. The `d3.select` and `selectAll` methods apply the data to the existing `<li>` elements, while a custom `remove()` JavaScript function is defined but not implemented in the visible code. The styling uses basic CSS with an Arial font, and the page is built as a standalone HTML file.

AAS251998

66% 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 and Custom Data Attributes

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.

Mmbostock

65% match

Loading thumbnail…

Objects ordering

Forty randomly placed circles of varying colors demonstrate z-order manipulation through mouse interactions. Hovering brings a circle to the front by appending it as the last SVG child, while clicking sends it to the background by inserting it as the first child. The code uses D3 v4 with SVG elements, d3.range for data generation, and d3.scaleOrdinal for color mapping, with mouseover and click events controlling element order via parentNode methods.

EEfratVil

63% match