d3plus-hierarchy

    1.0.1 • Public • Published

    d3plus-hierarchy

    NPM Release Build Status Dependency Status Gitter

    Nested, hierarchical, and cluster charts built on D3

    Installing

    If you use NPM, npm install d3plus-hierarchy. Otherwise, download the latest release. You can also load d3plus-hierarchy as a standalone library or as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

    <script src="https://cdn.jsdelivr.net/npm/d3plus-hierarchy@1"></script>
    <script>
      console.log(d3plus);
    </script>

    Simple Tree Map

    Creating a tree map using d3plus is super simple. Given an array of data objects that looks something like this:

    var data = [
      {parent: "Group 1", id: "alpha", value: 29},
      {parent: "Group 1", id: "beta", value: 10},
      {parent: "Group 1", id: "gamma", value: 2},
      {parent: "Group 2", id: "delta", value: 29},
      {parent: "Group 2", id: "eta", value: 25}
    ];

    Only a few lines of code are needed to transform it into an interactive TreeMap:

    new d3plus.Treemap()
      .data(data)
      .groupBy(["parent", "id"])
      .sum("value")
      .render();

    Colors are assigned to each unique ID using the color assign function, and the rectangles are created using the Rect class.

    Click here to view this example live on the web.

    More Examples

    API Reference


    Donut <>

    This is a global class, and extends all of the methods and functionality of Pie.

    # new Donut()

    Extends the Pie visualization to create a donut chart.


    Pack <>

    This is a global class, and extends all of the methods and functionality of Viz.

    # new Pack()

    Uses the d3 pack layout to creates Circle Packing chart based on an array of data.

    # Pack.hover([value]) <>

    If value is specified, sets the hover method to the specified function and returns the current class instance.

    This is a static method of Pack, and is chainable with other methods of this Class.

    # Pack.layoutPadding([value]) <>

    If value is specified, sets the opacity accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current pack opacity accessor.

    This is a static method of Pack.

    # Pack.packOpacity([value]) <>

    If value is specified, sets the padding accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current pack opacity accessor.

    This is a static method of Pack.

    # Pack.sort([comparator]) <>

    If comparator is specified, sets the sort order for the pack using the specified comparator function. If comparator is not specified, returns the current group sort order, which defaults to descending order by the associated input data's numeric value attribute.

    This is a static method of Pack.

    function comparator(a, b) {
      return b.value - a.value;
    }

    # Pack.sum([value]) <>

    If value is specified, sets the sum accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current sum accessor.

    This is a static method of Pack.

    function sum(d) {
      return d.sum;
    }

    Pie <>

    This is a global class, and extends all of the methods and functionality of Viz.

    # new Pie()

    Uses the d3 pie layout to creates SVG arcs based on an array of data.

    # Pie.innerRadius([value]) <>

    If value is specified, sets the inner radius accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current inner radius accessor.

    This is a static method of Pie.

    # Pie.padAngle([value]) <>

    If value is specified, sets the arc padding to the specified radian value and returns the current class instance. If value is not specified, returns the current radian padding.

    This is a static method of Pie.

    # Pie.padPixel([value]) <>

    If value is specified, sets the arc padding to the specified pixel value and returns the current class instance. If value is not specified, returns the current pixel padding.

    This is a static method of Pie.

    # Pie.sort([comparator]) <>

    If comparator is specified, sets the sort order for the pie slices using the specified comparator function. If comparator is not specified, returns the current sort order, which defaults to descending order by the associated input data's numeric value attribute.

    This is a static method of Pie.

    function comparator(a, b) {
      return b.value - a.value;
    }

    # Pie.value(value) <>

    If value is specified, sets the value accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current value accessor.

    This is a static method of Pie.

    function value(d) {
      return d.value;
    }

    Tree <>

    This is a global class, and extends all of the methods and functionality of Viz.

    # new Tree()

    Uses d3's tree layout to create a tidy tree chart based on an array of data.

    # Tree.orient([value]) <>

    If value is specified, sets the orientation to the specified value. If value is not specified, returns the current orientation.

    This is a static method of Tree.

    # Tree.separation([value]) <>

    If value is specified, sets the separation accessor to the specified function. If value is not specified, returns the current separation accessor.

    From the d3-hierarchy documentation:

    The separation accessor is used to separate neighboring nodes. The separation function is passed two nodes a and b, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent.

    This is a static method of Tree.

    function separation(a, b) {
      return a.parent === b.parent ? 1 : 2;
    }

    Treemap <>

    This is a global class, and extends all of the methods and functionality of Viz.

    # new Treemap()

    Uses the d3 treemap layout to creates SVG rectangles based on an array of data. See this example for help getting started using the treemap generator.

    # Treemap.layoutPadding([value]) <>

    If value is specified, sets the inner and outer padding accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current padding accessor.

    This is a static method of Treemap.

    # Treemap.sort([comparator]) <>

    If comparator is specified, sets the sort order for the treemap using the specified comparator function. If comparator is not specified, returns the current group sort order, which defaults to descending order by the associated input data's numeric value attribute.

    This is a static method of Treemap.

    function comparator(a, b) {
      return b.value - a.value;
    }

    # Treemap.sum([value]) <>

    If value is specified, sets the sum accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current sum accessor.

    This is a static method of Treemap.

    function sum(d) {
      return d.sum;
    }

    # Treemap.tile([value]) <>

    Sets the tiling method used when calcuating the size and position of the rectangles.

    Can either be a string referring to a d3-hierarchy tiling method, or a custom function in the same format.

    This is a static method of Treemap.


    Documentation generated on Mon, 14 Jun 2021 17:16:57 GMT

    Install

    npm i d3plus-hierarchy

    Homepage

    d3plus.org

    DownloadsWeekly Downloads

    428

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    2.02 MB

    Total Files

    14

    Last publish

    Collaborators

    • davelandry