d2bSVG Box

Local Image

# d2b.box()

Constructs a new box generator with the default settings.

When using the d2b-box generator you can draw a box and whisker component onto each element in the selection.

# box(context)

Render the box(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-box generator, you should join the data to the selected element(s) using selection.data or selection.datum. Here is the default data format.

var box = d2b.box(),
    scale = d3.scaleLinear().domain([0, 14]).range([400, 0]);

box.scale(scale).orient('horizontal');

d3.select('body').append('svg')
  .datum({
    maximum: 10,   
    minimum: 1,   
    upperQuartile: 7.5,   
    lowerQuartile: 2.8,
    median: 5.4,
    outliers: [0.5, 12, 13.3]
  })
  .call(box);

# box.scale([scale])

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

# box.annotation([d3-annotation])

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

# box.enterScale([scale])

If scale is specified, sets the enter scale to the specified d3-scale and returns the box generator. If scale is not specified, returns the current enter scale, which defaults to a null.

The enter scale will be used to render new box elements and then they will be transformed using the default box.scale either instantly or by the transition context. If a null enter scale is used then box elements will be entered using the default box.scale.

# box.valueFormat([format])

If format is specified, sets the format function for box-tick-values and returns the box generator. If format is not specified, returns the current format function, which defaults to d => d.

# box.orient([orientation])

If orientation is specified, sets the box-orientation and returns the box generator. If orientation is not specified, returns the current box-orientation which defaults to 'vertical'. The orientation should be one of 'vertical' or 'horizontal'.

# box.data([data])

If data is specified, sets the box-data-accessor function and returns the box generator. If data is not specified, returns the current box-data-accessor function which defaults to d => d. This method will determine what data object to pass down to the following props. This method receives two arguments, the box bound datum d and its index i.

Data Level Accessors

When the d2b box generator is applied to a selection, the following properties will be invoked. The function will be passed the determined box.data d and the corresponding box index i.

# box.median([median])

If median is specified, sets the box-median-accessor function and returns the box generator. If median is not specified, returns the current box-median-accessor function which defaults to d => d.median.

# box.upperQuartile([upperQuartile])

If upperQuartile is specified, sets the box-upper-quartile-accessor function and returns the box generator. If upperQuartile is not specified, returns the current box-upper-quartile-accessor function which defaults to d => d.upperQuartile.

# box.lowerQuartile([lowerQuartile])

If lowerQuartile is specified, sets the box-lower-quartile-accessor function and returns the box generator. If lowerQuartile is not specified, returns the current box-lower-quartile-accessor function which defaults to d => d.lowerQuartile.

# box.maximum([maximum])

If maximum is specified, sets the box-maximum-accessor function and returns the box generator. If maximum is not specified, returns the current box-maximum-accessor function which defaults to d => d.maximum.

# box.minimum([minimum])

If minimum is specified, sets the box-minimum-accessor function and returns the box generator. If minimum is not specified, returns the current box-minimum-accessor function which defaults to d => d.minimum.

# box.outliers([outliers])

If outliers is specified, sets the box-outliers-accessor function and returns the box generator. If outliers is not specified, returns the current box-outliers-accessor function which defaults to d => d.outliers. The outliers should be an array of values representing both upper and lower outliers. If any outliers are given between the box's minimum and maximum values they will be ignored.

# box.width([width])

If width is specified, sets the box-width-accessor function and returns the box generator. If width is not specified, returns the current box-width-accessor function which defaults to () => 20.

# box.color([color])

If color is specified, sets the box-color-accessor function and returns the box generator. If color is not specified, returns the current box-color-accessor function which defaults to () => 'steelblue'.

Annotations

The box generator has built in hooks for annotations using the d3.annotation plugin. Each box may contain an annotation at its maximum, upperQuartile, median, lowerQuartile, and minimum locations. For example, a box with annotations at the upper and lower quartiles:

{
  maximum: 15,
  minimum: 2,
  upperQuartile: 12,
  lowerQuartile: 4.8,
  median: 7,
  annotations: [
    {
      location: 'upperQuartile',
      dy: 0,
      dx: 60,
      note: {
        title: 'Upper Quartile'
      },
      connector: {
        end : "dot"
      }
    },
    {
      location: 'lowerQuartile',
      dy: 0,
      dx: 60,
      note: {
        title: 'Lower Quartile'
      },
      connector: {
        end : "dot"
      }
    }
  ]
}

# box.annotations([annotations])

If annotations is specified, sets the annotations accessor to the specified box-annotations-accessor function and returns the box generator. If annotations is not specified, returns the current annotations accessor, which defaults to:

function (d) {
  return d.annotations;
}

results matching ""

    No results matching ""