A Warnier-Orr diagram in d3.js

A Warnier/Orr diagram (also known as a logical construction of a program/system) is a kind of hierarchical flowchart that allows the description of the organization of data and procedures. They were initially developed in France by Jean-Dominique Warnier and in the United States by Kenneth Orr.

This method aids the design of program structures by identifying the output and processing results and then working backwards to determine the steps and combinations of input needed to produce them. The simple graphic method used in Warnier/Orr diagrams makes the levels in the system evident and the movement of the data between them vivid.

Usage

d3_warnier_orr({container: '#container', width: 900, height: 1000, json: 'wo-example.json', data: null});

Options

{
  • required settings [object]: the configuration object {
    • optional json [string]: a json file to load tree data from.
        (Required if `data` is not specified).
    • optional data [object]: an in-memory object representing the tree data
        (Required if `json` is not specified)
    • optional container [string]: the html element to contain the svg element - default is body.
    • optional width [integer]: the width of the svg document - default is 1/2 screen width.
    • optional height [integer]: the height of the svg document - default is 1/2 screen height.
    • optional nub_size [integer]: the width of the "nub" that splits each tree -- see the examples below to visualize.
    }
}

Data format

Should correspond to the typical d3.js tree json format, where each element is an object with keys `name` and optional `children` array. The top element should also have a `root` key specified, which will determine the root label styling and positioning. See wo-example.json for details.

Styling overrides

Should be done via css. See this page for example overrides.

Examples

© Copyright 2015 Chris Tabor.
See repo and LICENSE for details.