d3 Fishbone diagram

100%

d3 Fishbone diagram

✓ Published0🌍 Public

Last edited Oct 7, 2016

Created on Oct 7, 2016

A d3 Fishbone diagram visualizes hierarchical contributions to a central concept, using a force-directed layout with SVG nodes and links. The diagram is generated from Markdown via a CodeMirror editor, where list items become tree nodes that can be dragged. It uses d3.layout.force for positioning, d3.fishbone for the custom layout, and marked for parsing. The example includes animated transitions when editing and supports SVG export via SVG Crowbar.

AI-generated description

Make a bulleted Markdown list in the top left to update the list
Press edit to hide the editor
Press save to use SVG Crowbar to save a copy
Click to drag nodes

This is an integration of this implementation of a Fishbone or Ishikawa diagram, which shows contributions of different levels of a hierarchy to a main concept, with a Markdown editor for making quick diagrams.

The diagram is implemented in d3.js, while rich-text editing is provided by CodeMirror, and marked handles Markdown processing.

If you have insights, or make modifications, share them on the thread on the d3-js discussion group that spurred this work!

forked from <a href='http://bl.ocks.org/bollwyvl/'>bollwyvl</a>'s block: <a href='http://bl.ocks.org/bollwyvl/9265219'>A fishbone editor</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 - Nodelink - Force Directed Layout

This example shows a force-directed node-link diagram of dolphin social relationships, with each circle representing a dolphin and lines indicating connections. The visualization uses D3 v7 APIs including `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to compute the layout, while SVG circles and lines render the nodes and edges with animated positions on each tick. A hover tooltip, styled as a div element, displays the dolphin identifier. The data originates from a CSV file of dolphin interaction pairs loaded via `d3.csv`.

CChandana Srinivas

71% match

Loading thumbnail…

Fishbone Layout

This example demonstrates a fishbone (Ishikawa) cause-and-effect diagram, with the root cause "Incorrect Deliveries" branching into four major categories and their sub-causes. It uses the GoJS library with the `FishboneLayout` extension and custom `FishboneLink` templates to position nodes and draw angled connectors. The diagram is read-only, with node text and font styling bound directly to structured JSON data.

JJoker-tr

71% match

Loading thumbnail…

Organization Graph Diagram

This visualization shows a hierarchical organization graph with four main nodes connected to smaller child nodes and tiny leaf nodes, each colored by its parent group. The force-directed layout uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position the nodes, while SVG circles and lines render the structure. Drag interactions allow users to move nodes, with labels displayed as SVG text elements. The data comes from a JavaScript module defining nodes and links with size and color properties.

SShanmukh

70% match

Loading thumbnail…

Organization Graph Diagram

This example renders a small organizational hierarchy as a force-directed graph. Three nodes—Arts Web, Community Vision, and Silicon Valley Creates—are drawn as circles and connected by links, with node labels positioned directly on top of the circles. The layout is computed live using d3.forceSimulation with forceManyBody, forceLink, and forceCenter forces, updating SVG positions on each tick. The data comes from a static JavaScript module, and all rendering uses SVG elements.

Wwindwaver

69% match

Loading thumbnail…

Fruits

A hierarchical tree visualization displays fruit categories and their subtypes, with nodes colored by type and connected by labeled, directional links. The D3 v3 layout computes node positions, while SVG shapes and CSS styles render the interactive diagram. Users can click nodes and zoom or drag the view, with tooltips showing additional node information. The example also demonstrates loading D3 from a CDN and structuring data with external JSON files.

Aaniteshterala2000

69% match

Loading thumbnail…

Fork of Fish Family Species

This interactive tree diagram visualizes the hierarchical classification of fish species, from cartilaginous fish like sharks and rays to bony fish including ray-finned and lobe-finned varieties. Using D3 version 3.5’s `d3.layout.tree` and `d3.svg.diagonal`, the visualization renders an SVG with animated transitions. Clicking nodes collapses or expands subtrees, with circles changing color from teal to lightsteelblue to indicate collapsed states. The data is hardcoded as a JSON array in the script, with node positions calculated based on depth and screen margins.

Nnsatyaprakash22

69% match

Loading thumbnail…

3D Force-Directed Tree

This visualization renders the D3 v4 dependency tree as a 3D force-directed graph, where each hierarchical level is locked to its own horizontal plane to emphasize the tree’s structure. Nodes represent files and directories, sized by file size and colored by module, with the data loaded from a local CSV file. It uses the `3d-force-graph` library for Three.js/WebGL rendering, `d3-force-3d` for the force simulation, and `d3.forceCollide` for collision detection, with node labels displayed on hover.

TThanaporn-sk

69% match

Loading thumbnail…

Organization Graph Diagram

An interactive organization graph rendered in SVG with D3's force-directed layout. The visualization shows four main nodes connected by links, with child nodes and small leaf nodes branching from each main node, all colored using a palette from a generated colors module. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, with node sizes and link distances defined in the data. As the simulation ticks, circles, lines, and text labels update their positions dynamically.

CCurran Kelleher

69% match