Skip to main content
SimilarExport ZIP
100%

Expandable Menu

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Dec 30, 2011

The expandable menu displays a two-level, nested list using HTML elements. Clicking a top-level item reveals its associated sub-items. The visualization uses a static dataset defined in code, containing two parent objects with name and links properties. The implementation utilizes the D3.js v3 library to bind the data to list items and manages the expand interaction via the `d3.select` API and the `on("click", expand)` event handler, appending a new nested `<ul>` on demand.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Collapsible List 2

This example demonstrates a collapsible list that expands and collapses nested tree data on click. It uses d3’s `select`, `selectAll`, `data`, `enter`, and `append` methods to bind an array of objects (with “Letter” and “Number” parent nodes) to HTML `li` elements inside a `ul`. Clicking a parent toggles its child items by adding or removing a nested `ul` via event handlers `expand` and `collapse`. The visualization relies on D3’s data join to manage the dynamic list structure.

BBenjamin Ogorek
74% match
Loading thumbnail…

Tree Example

This tree diagram shows a hierarchical dataset with collapsible nodes, where clicking a parent node hides or reveals its children with animated transitions. The visualization uses D3.js v3’s `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for curved links, rendered as SVG elements. Node and link styling are defined via CSS classes, and the `update` function handles enter, update, and exit transitions with a 750ms duration. The static sample data includes a top-level node with two second-level branches, demonstrating the interactive expand/collapse behavior.

663anp3ca
70% match
Loading thumbnail…

Menu with D3

This example demonstrates how to add an interactive dropdown menu to a D3 visualization, showing the selected car brand as a text message. It uses D3’s data-join pattern to bind menu options to a `select` element, updating the displayed text when the selection changes. Bootstrap’s `form-select` class styles the dropdown, while D3’s `on('change')` listener updates the application state via the `setState` function. The code highlights a clean separation between UI rendering and state management, making it a practical template for incorporating menus into larger D3 projects.

CCurran Kelleher
69% match
Loading thumbnail…

expandable-rectanges

This example shows a set of rectangles that expand and contract when clicked, revealing hidden nested content. Built with D3 v3 and rendered as animated SVG, the visualization uses custom helper functions from d3-jetpack to simplify attribute handling and transitions. Rectangles are likely bound to hierarchical data, with expansion triggered by mouse events to reveal child nodes or additional details. The animation is driven by D3's transition system, and the layout adapts to the data's depth. The code relies on a lightweight d3 starter kit for scales and axes, while the jetpack library provides syntactic sugar for concise, readable D3 code.

11wheel
69% 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
69% match
Loading thumbnail…

Menu Example

A dropdown menu offers six color choices, while a scatter-like column of circles encodes two fixed numeric datasets. The circle positions and colors update only when the menu selection changes. Built with D3 v7, the example uses a `select` join to bind options, `interpolateRdYlGn` for the circle fill gradient, and custom `menu` and `treeCoder` modules to render the SVG elements.

LLauren
68% match
Loading thumbnail…

Simple Collapsible Tree

This interactive visualization displays a hierarchical tree that expands and collapses when nodes are clicked. The tree uses a horizontal layout with circular nodes and text labels, and collapsible branches animate smoothly via transitions. The code employs D3 v3’s `d3.layout.tree` for positioning and `d3.svg.diagonal` for link paths, with sample data from a manual tree structure containing "Top Level" and dummy child nodes. SVG elements provide the rendering, and animations use `transition().duration()` to update node positions on interaction.

Rrainyrainyguo
68% match
Loading thumbnail…

Collapsible Tree Example

A collapsible tree diagram displays hierarchical data as a set of linked nodes, where each node’s children can be expanded or hidden by clicking, though the example code does not yet implement click interactions. The flat CSV data, containing parent-child relationships, is converted into a tree structure using a name-to-node map. The visualization is rendered as an SVG using D3.js version 3.5, with `d3.layout.tree` computing the layout, `d3.svg.diagonal` drawing curved links, and nodes represented by circles and text labels.

Dd3noob
67% match