selection.order

100%

selection.order

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 7, 2011

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Order

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.

Mmbostock

70% match

Loading thumbnail…

d3-selection

This example shows how d3-selection enables data-driven transformation of the DOM by setting attributes, styles, and properties on selected elements. The code demonstrates method chaining, where operations like `d3.selectAll("p").attr("class", "graf").style("color", "red")` apply multiple changes concisely. It also illustrates the distinction between methods that return the current selection versus new ones, using indentation conventions to reveal shifts in context. The document serves as a reference for the d3-selection module’s API, covering areas such as installing, data joins, and enter/exit selections.

深深度碎片

70% match

Loading thumbnail…

selection

This example demonstrates D3’s selection API for programmatically creating and managing DOM elements. It renders four paragraphs, each displaying a number from 1 to 4, by selecting the body element and then using `selectAll('p')` with data binding and the `.enter()` method to append new elements. The visualization relies on D3 v7’s `select` and `selectAll` functions, and the code logs both the parent and child selections to the console. The HTML page is styled with large font sizes but contains no graphical chart or data-driven graphics beyond the text output.

SSihua Lee

68% match

Loading thumbnail…

d3-selection

This example presents the official documentation for the d3-selection module, rendered as a static HTML page with a table of contents and code snippets. It demonstrates how selections enable data-driven manipulation of the DOM through methods like `selection.attr` and `selection.style`, supporting method chaining for concise operation sequences. The page explains the data join concept with `selection.enter` and `selection.exit` for adding or removing elements. The code highlights core APIs such as `d3.selectAll`, `d3.select`, and `selection.append`, and is styled using the StackEdit CSS framework.

深深度碎片

67% match

Loading thumbnail…

SelectionTinker

Two HTML paragraphs initially render in black, then d3.selectAll changes every paragraph’s text color to blue, and finally d3.select overrides the first paragraph to red, demonstrating selection and chained styling. Using D3 v4, the example shows how a broad selection affects all matched elements while a narrower select targets only the first, with no data binding or interaction. The code relies solely on d3.select, d3.selectAll, and .style for DOM manipulation.

JJoelGallagher

67% match

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections can target specific elements in the DOM using element type, ID, and class selectors. The page contains two visible divs with different identifiers, and commented code shows updated text for various selection strategies, such as `d3.selectAll('div.selectMe')`. It also illustrates appending new elements, where `d3.select('body').append('div')` adds a child to the document body. Built with d3.v3, the example relies solely on D3’s core selection and manipulation APIs, with no external data or rendering pipeline.

LLelandCurtis

66% match

Loading thumbnail…

d3.create + selection.adopt

This example demonstrates two new D3 API methods, `d3.create` and `selection.adopt`, through their source code diffs. `d3.create` constructs a new element (namespaced or not) and wraps it in a selection, while `selection.adopt` moves existing nodes from another selection into the current context by appending them as children. The diff also shows changes to `selection.select` and `selection.selectAll` to pass the group index as a third argument to the selector callback, enabling hierarchical context for these operations. The code is written against the core `d3.selection` prototype and uses standard DOM methods like `document.createElementNS` and `appendChild`.

Mmbostock

65% match

Loading thumbnail…

Selection.join example

This example demonstrates the D3 `selection.join` API by animating a continuously updating set of random letters on an SVG canvas. The code creates an SVG element sized to the full browser window and runs an infinite loop. Each iteration, the loop selects all existing “text” elements, binds them to a new array of randomly generated, sorted letters produced by the `randomLetters` helper (which uses `d3.shuffle`), and calls `.join("text")` to efficiently synchronize the DOM with the new data—updating the `x` position and text content of existing elements while creating or removing nodes as needed.

AAdan Rodriguez

64% match