plugin-stanford

plugin-stanford

new plugin-stanford(options) → {Stanford}

Source:

Stanford diagram plugin

Examples
// Plugin must be loaded before the use.
<script src="$YOUR_PATH/plugin/billboardjs-plugin-stanford.js"></script>

 var chart = bb.generate({
    data: {
       columns: [ ... ],
       type: "scatter"
    }
    ...
    plugins: [
       new bb.plugin.stanford({
          colors: d3.interpolateHslLong(
             d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)
          ),
          epochs: [ 1, 1, 2, 2, ... ],
          lines: [
                 { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" },
                 { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" }
          ],
          scale: {
          	max: 10000,
            	min: 1,
          	width: 500,
            	format: 'pow10',
          },
          padding: {
          	top: 15,
          	right: 0,
          	bottom: 0,
          	left: 0
          },
          regions: [
          	{
              	points: [ // add points counter-clockwise
              	    { x: 0, y: 0 },
              	    { x: 40, y: 40 },
              	    { x: 0, y: 40 }
              	],
              	text: function (value, percentage) {
              	    return `Normal Operations: ${value} (${percentage}%)`;
              	},
              	opacity: 0.2, // 0 to 1
              	class: "test-polygon1"
             },
            	...
          ]
       }
    ]
 });
import {bb} from "billboard.js";
import Stanford from "billboard.js/dist/billboardjs-plugin-stanford";

bb.generate({
    plugins: [
       new Stanford({ ... })
    ]
})
Parameters:
Name Type Description
options object

Stanford plugin options

Requires:
  • module:d3-selection
  • module:d3-interpolate
  • module:d3-color
  • module:d3-scale
  • module:d3-brush
  • module:d3-axis
  • module:d3-format
Returns:
Type
Stanford

Extends

Requires

  • module:d3-selection
  • module:d3-interpolate
  • module:d3-color
  • module:d3-scale
  • module:d3-brush
  • module:d3-axis
  • module:d3-format

Members

(static) colors :function

Source:
Default Value:
  • undefined

Set the color of the color scale. This function receives a value between 0 and 1, and should return a color.

Type:
  • function
Example
colors: d3.interpolateHslLong(
     d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)
  )

(static) epochs :Array

Source:
Default Value:
  • []

Specify the key of epochs values in the data.

Type:
  • Array
Example
epochs: [ 1, 1, 2, 2, ... ]

(static) lines :Array

Source:
Default Value:
  • []

Show additional lines anywhere on the chart.

  • Each line object should consist with following options:
Key Type Description
x1 Number Starting position on the x axis
y1 Number Starting position on the y axis
x2 Number Ending position on the x axis
y2 Number Ending position on the y axis
class String Optional value. Set a custom css class to this line.
Type:
  • Array
Example
lines: [
      { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" },
      { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" }
  ]

(static) padding :object

Source:
Properties:
Name Type Attributes Description
padding object <optional>

padding object

Properties
Name Type Attributes Default Description
top number <optional>
0

Top padding value.

right number <optional>
0

Right padding value.

bottom number <optional>
0

Bottom padding value.

left number <optional>
0

Left padding value.

The padding for color scale element

Type:
  • object
Example
padding: {
    top: 15,
    right: 0,
    bottom: 0,
    left: 0
 },

(static) regions :Array

Source:
Default Value:
  • []

Show additional regions anywhere on the chart.

  • Each region object should consist with following options:

    Key Type Default Attributes Description
    points Array Accepts a group of objects that has x and y.
    These points should be added in a counter-clockwise fashion to make a closed polygon.
    opacity Number 0.2 <optional> Sets the opacity of the region as value between 0 and 1
    text Function <optional> This function receives a value and percentage of the number of epochs in this region.
    Return a string to place text in the middle of the region.
    class String <optional> Se a custom css class to this region, use the fill property in css to set a background color.
Type:
  • Array
Example
regions: [
      {
          points: [ // add points counter-clockwise
              { x: 0, y: 0 },
              { x: 40, y: 40 },
              { x: 0, y: 40 },
          ],
          text: function (value, percentage) {
              return `Normal Operations: ${value} (${percentage}%)`;
          },
          opacity: 0.2, // 0 to 1
          class: "test-polygon1"
      },
      ...
  ]

(static) scale :object

Source:
Properties:
Name Type Attributes Description
scale object <optional>

scale object

Properties
Name Type Attributes Default Description
min number <optional>

Minimum value of the color scale. Default: lowest value in epochs

max number <optional>

Maximum value of the color scale. Default: highest value in epochs

width number <optional>
20

Width of the color scale

format string | function <optional>

Format of the axis of the color scale. Use 'pow10' to format as powers of 10 or a custom function. Example: d3.format("d")

Set scale values

Type:
  • object
Example
scale: {
   max: 10000,
   min: 1,
   width: 500,

   // specify 'pow10' to format as powers of 10
   format: "pow10",

   // or specify a format function
   format: function(x) {
   	return x +"%";
   }
 },