Parent Data

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 21, 2015

A test of hierarchical selections and parent data in D3 4.0, this example builds a 3×3 HTML table by chaining `selectAll` and `data` calls. The inner cells display their x- and y-coordinate labels, with the parent row data passed through the selection’s parent context. Rendered as SVG-independent DOM elements, it uses the d3-selection module’s `enter().append()` pattern, demonstrating how child selections inherit and access parent datum during data joins.

AI-generated description

A test of hierarchical selections and parent data, features in development for D3 4.0.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

nested test

This example shows a small table and an SVG text hierarchy built from a CSV file. The table renders a 4x4 matrix, transforming each cell value by adding its row index multiplied by two. The SVG displays nested text elements, first grouping months by the `cat` column using `d3.nest`, then attempting to append a second level of text based on the group index. The code uses `d3.select`, `d3.csv`, `d3.nest`, and SVG `text` elements, with data loaded from `data.csv`.

Kkon

73% match

Loading thumbnail…

How selectAll Works

This animation demonstrates how `selection.selectAll` works in D3: every element in the old selection becomes a group in the new selection. Using an initial selection of table rows to create a selection of table cells, it visualizes the hierarchical grouping of `td` elements by their parent `tr`. The example builds side-by-side tree diagrams with `d3.layout.tree`, rendering SVG nodes and links, and animates transitions between states to show how the nested selection is constructed and mapped.

Mmbostock

73% match

Loading thumbnail…

Nested Data Join for Each Parent Element but with Different Data

This example demonstrates a nested data join where each parent table header element binds to a sub-array of data, creating child elements with different values. Using D3 v6’s `selectAll().data()` pattern, the code first joins `topData` to header cells, then re-joins each header’s `div.th-inner` with entries from `newData`. Child `div.th-but` elements are appended with checkboxes and spans, each bound to individual sub-data items, illustrating how to manage varying child data per parent.

MMinwoo Pak

71% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays a hierarchical dataset with a single root node and two levels of children. Clicking any parent node collapses its subtree, and clicking again expands it. The visualization is built with D3.js version 3.5.17, using `d3.layout.tree` and `d3.svg.diagonal` to compute and draw the layout as SVG elements. Animated transitions, controlled by `node.transition` and a 750-millisecond duration, smoothly move nodes and links between states. The example is adapted from Mike Bostock’s collapsible tree and uses hardcoded JavaScript data.

Dd3noob

71% match

Loading thumbnail…

table

This example demonstrates how to populate an HTML table by binding sample data objects to table rows and cells using D3 version 7. The code selects the table body and iterates through an array of data objects, appending a row for each entry and filling six columns with values from the object’s properties. It relies on D3’s selection and data-binding methods (`d3.select`, `selectAll`, `.data`, `.enter`, `.append`, and `.text`) to dynamically generate the table structure. The page also uses a simple CSS style to center the content with a large font size.

Fferneyhoughedward@gmail.com

71% 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

70% match

Loading thumbnail…

D3 Tree with Multiple Parents Example

This example visualizes a hierarchical tree with multiple parents, where nodes like “Developer” and “Laborer” appear under several root categories such as “Stock market” and “Grape-market.” The data comes from a local JSON file, and the layout uses d3.tree combined with Underscore.js utilities to deduplicate nodes and reassign links by ID. SVG rendering includes horizontal links via d3.linkHorizontal, with zoom interaction and animated transitions for node positioning. A selected root category highlights its children with steelblue strokes and full opacity.

MMilan Košir

70% match

Loading thumbnail…

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Rrca0214

70% match