d2bSVG BubblePack

Local Image

# d2b.svgBubblePack()

Constructs a new bubblePack generator with the default settings. The purpose of this module is to provide a common graph API used in other types of graphs (e.g. area, line, bar).

When using the d2b-bubblePack generator you can draw multiple bubblePack graphs onto each element in the selection. This is shown in the data example below.

# bubblePack(context)

Render the bubblePack(s) to the given context, which may be either a d3-selection of SVG containers (either SVG or G elements) or a corresponding d3-transition.

Before applying the d2b-bubblePack generator, you should join the data to the selected element(s) using selection.data or selection.datum. The data format is different than other d2b graph generators because it is hierarchical. Here is the default data format.

var bubblePack = d2b.svgBubblePack();

var datum = [
  {
    label: 'Bubble Pack Graph 1',
    values: [
      {
        label: 'Parent 1',
        // By setting expanded to true, this bubble will initially be expanded
        // expanded: true,
        children: [
          {
            label: 'Parent 1 Child 1',
            children: [
              {
                label: 'Parent 1 Child 1 Child 1',
                size: 20,
                x: 15,
                y: 25
              },
              {
                label: 'Parent 1 Child 1 Child 2',
                size: 4,
                x: 34,
                y: 14
              }
            ]
          },
          {
            label: 'Parent 1 Child 2',
            size: 10,
            x: 25,
            y: 14
          }
        ],
      },
      {
        label: 'Parent 2',
        size: 10,
        x: 31,
        y: 45
      }
    ]
  },
  {
    label: 'Bubble Pack Graph 2',
    values: [
      {
        label: 'Parent 1',
        size: 22,
        x: 4,
        y: 50
      }
    ]
  }
];

d3.select('.chart')
    .datum(datum)
    .call(bubblePack);

The leaf nodes of the data should contain size, x, and y values.

Expanding Bubbles

By default if a node has an array of children then it can be "expanded". When the user clicks on a bubble the bubble will disappear and the children bubbles will transition to their respective locations. This can also be done programmatically by setting the expanded flag on a node in the hierarchy.

# bubblePack.type()

Returns the string bubblePack.

# bubblePack.point([point])

If point is specified, sets the point generator to the specified point and returns the bubblePack generator. If point is not specified, returns the current point generator, which defaults to:

  var point = d2b.point().size(d => d.size * 100);

  function () {
    return point;
  }

The point can be configured at will, except for the active, fill, and type properties which will be set automatically by the bubblePack generator.

# bubblePack.x([x])

If x is specified, sets the x scale to the specified d3-scale and returns the bubblePack generator. If x is not specified, returns the current x scale, which defaults to a d3.scaleLinear().

Currently, only continuous scales are supported for the bubble pack.

# bubblePack.y([y])

If y is specified, sets the y scale to the specified d3-scale and returns the bubblePack generator. If y is not specified, returns the current y scale, which defaults to a d3.scaleLinear().

Currently, only continuous scales are supported for the bubble pack.

# bubblePack.annotation([d3-annotation])

If d3-annotation is specified, sets the annotation generator to the specified d3-annotation and returns the bubblePack generator. If d3-annotation is not specified, returns the current annotation generator, which defaults to a d3.annotation().

Datum Level Accessors

When the d2b bubblePack generator is applied to a selection, the following properties will be invoked. The function will be passed the element's bound datum d and the corresponding element index i.

# bubblePack.graphs([graphs])

If graphs is specified, sets the graphs array to the specified accessor function or array and returns the bubblePack generator. If graphs is not specified, returns the current graphs accessor, which defaults to d => d.

# bubblePack.duration([duration])

If duration is specified, sets the duration of the internal chart transitions to the specified accessor function or value and returns the bubblePack generator. If duration is not specified, returns the current duration accessor, which defaults to () => 250.

Graph Level Accessors

When the d2b bubblePack generator is applied to a selection, the following properties will be invoked for each graph in the graphs array. The function will be passed the graph data d and the corresponding graph index i.

function (d) {
  // Here is what d might contain
  // d => {
  //   label: 'Bubble Pack Graph 2',
  //   values: [
  //     {
  //       label: 'Parent 1',
  //       size: 22,
  //       x: 4,
  //       y: 50
  //     }
  //   ]
  // }
}

# bubblePack.tendancy([tendancy])

If tendancy is specified, sets the tendancy to the specified accessor function or d2b math tendancy (e.g. d2b.mean, d2b.median) and returns the bubblePack generator. If tendancy is not specified, returns the current tendancy scale accessor, which defaults to:

function () {
  return d2b.mean;
}

# bubblePack.tooltipGraph([tooltip_graph])

If tooltip_graph is specified, sets the tooltip_graph to the specified accessor function and returns the bubblePack generator. If tooltip_graph is not specified, returns the current tooltip_graph accessor, which defaults to:

  function (d) {
    return d.tooltipGraph;
  }

# bubblePack.shift([shift])

If shift is specified, sets the horizontal shift to the specified accessor function or value and returns the bubblePack generator. If shift is not specified, returns the current shift accessor, which defaults to () => null.

If a null accessor is used this shift will be computed dynamically based on the type of d3-scale being used. If a band scale is used then the shift will be set to half of the scale's bandwidth.

# bubblePack.symbol([symbol])

If symbol is specified, sets the graph symbol accessor to the specified accessor function and returns the bubblePack generator. If symbol is not specified, returns the current symbol accessor, which defaults to (d) => d3.symbolCircle.

This property should be set to one of the preset or custom d3 symbols. This symbol type will set the default symbol type for an entire graph.

# bubblePack.key([key])

If key is specified, sets the graph key accessor to the specified accessor function and returns the bubblePack generator. If key is not specified, returns the current key accessor, which defaults to (d) => d.label.

If you are transitioning from one data set to another the key function is useful in making sure the proper graphs get updated to their corresponding values.

# bubblePack.color([color])

If color is specified, sets the color accessor to the specified accessor function and returns the bubblePack generator. If color is not specified, returns the current color accessor, which defaults to:

// define d3 color scale that will be used in the accessor
var color = d3.scaleOrdinal(d3.schemeCategory10);

function (d) {
  return color(d.label);
}

If you are transitioning from one data set to another the key function is useful in making sure the proper graphs get updated to their corresponding values.

# bubblePack.values([values])

If values is specified, sets the values array to the specified accessor function or array and returns the bubblePack generator. If values is not specified, returns the current values accessor, which defaults to:

function (d) {
  return d.values;
}

Value Level Accessors

When the d2b bubblePack generator is applied to a selection, the hierarchical value data will be flattened and the following accessors will invoked for each node in the flattened array. The function will be passed the value data d, the index position within it's values or children array i, and the corresponding graph data graph.

Note that not every accessor will be invoked for all nodes in the hierarchy, sometimes the "hidden" nodes won't need certain properties to be processed.

function (d, i, graph) {
  // An example of the node data being passed to the accessor function
  // d => {
  //   label: 'Parent 1 Child 1',
  //   children: [
  //     {
  //       label: 'Parent 1 Child 1 Child 1',
  //       size: 20,
  //       x: 15,
  //       y: 25
  //     },
  //     {
  //       label: 'Parent 1 Child 1 Child 2',
  //       size: 4,
  //       x: 34,
  //       y: 14
  //     }
  //   ]
  // }
}

# bubblePack.px([px])

If px is specified, sets the px accessor to the specified accessor function and returns the bubblePack generator. If px is not specified, returns the current px accessor, which defaults to:

function (d) {
  return d.x;
}

# bubblePack.py([py])

If py is specified, sets the py accessor to the specified accessor function and returns the bubblePack generator. If py is not specified, returns the current py accessor, which defaults to:

function (d) {
  return d.y;
}

# bubblePack.pcolor([color])

If color is specified, sets the color accessor to the specified accessor function and returns the bubblePack generator. If color is not specified, returns the current color accessor, which defaults to () => null.

If color is null then the corresponding graph color will be used.

# bubblePack.psymbol([symbol])

If symbol is specified, sets the symbol accessor to the specified accessor function and returns the bubblePack generator. If symbol is not specified, returns the current symbol accessor, which defaults to () => null.

If symbol is null then the corresponding graph symbol type will be used.

# bubblePack.psize([size])

If size is specified, sets the size accessor to the specified accessor function and returns the bubblePack generator. If size is not specified, returns the current size accessor, which defaults to:

function (d) {
  return d.size;
}

The size is a numerical value corresponding to the pixel area of the defined symbol type.

# bubblePack.pkey([key])

If key is specified, sets the key accessor to the specified accessor function and returns the bubblePack generator. If key is not specified, returns the current key accessor, which defaults to (d, i) => i.

If transitioning between data sets, the key may be used to be sure that the matching bubblePack points transition properly.

# bubblePack.pannotation([annotation])

If annotation is specified, sets the annotation accessor to the specified accessor function and returns the bubblePack generator. If annotation is not specified, returns the current annotation accessor, which defaults to:

function (d) {
  return d.annotation;
}

Annotations

The bubblePack graph generator has built in hooks for annotations using the d3.annotation plugin. Each value in a bubblePack graph may contain an annotation at its (x, y) location. For example, a bubble value with an annotation:

{
  label: 'A Leaf Bubble',
  x: 2,
  y: 41,
  size: 5,
  annotation: {
    // dx/dy pixel offset that the annotation has from the value
    dy: -150,
    dx: -150,
    // use a custom annotation type from d3.annotation
    type: d3.annotationCalloutCircle,
    note: {
      title: 'Important Point'
    },
    subject: {
      radius: 20,
      radiusPadding: 5
    },
    connector: {
      end : "arrow"
    }
  }
}

Other Methods

# bubblePack.getComputedGraphs(context)

Returns the array of computed graphs for the context's datum. This is not the same as the graphs array provided in the datum. This is a constructed graphs array that invokes all of the accessors described above. Usually this is used internally by the d2b.chartAxis module.

# bubblePack.getVisiblePoints(context)

Returns the array of visible points. This array will be formed by concatenating all of the graph values and invoking the px and py accessor for each. This is helpful when trying to dynamically update the scale domains based on the range of x and y values. Usually this is used internally by the d2b.chartAxis module.

results matching ""

    No results matching ""