Home Reference Source Repository

Function

Static Public Summary
public

blankSVG(d3local: D3, size: Object, select: String): D3Object

blankSVG: Creates a new, blank SVG to perform d3 methods on.

public

dimensions: Follows the general d3 sizing rules to make it easier to reason about the size and margins of the d3 the goal is have a cleaner way of coding the absolute width and the dimensions the graph will fall in.

public

draw(what: String, parent: D3Object, settings: Object): Object

draw: manages the heavy lifting of d3 by creating a reusable pattern to create graphics.

public

drawSchedule(what: String, parent: D3Object, settings: Object): Object

drawSchedule: exactly the same as draw except to be used with load.

public

load(stringId: String, transitions: ...Function)

load what each transition to schq to be rendered in sequential order.

Static Public

public blankSVG(d3local: D3, size: Object, select: String): D3Object source

import blankSVG from 'grizzy/src/main/blankSVG.js'

blankSVG: Creates a new, blank SVG to perform d3 methods on.

Params:

NameTypeAttributeDescription
d3local D3

d3 instance for your code

size Object

dimensions of the chart

select String
  • optional
  • default: 'body'

the id or class of the DOM selection

Return:

D3Object

an Array that contains the update/enter methods

Example:

import d3 from 'd3';

var SIZE = dimensions({
    width : 600,
    height : 500,
    margin:{top: 10, right: 30, bottom: 10, left: 20}
});

svg = new blankSVG(d3, SIZE, '#chart')

See:

public dimensions(sizing: Object): Object source

import dimensions from 'grizzy/src/main/dimensions.js'

dimensions: Follows the general d3 sizing rules to make it easier to reason about the size and margins of the d3 the goal is have a cleaner way of coding the absolute width and the dimensions the graph will fall in.

Params:

NameTypeAttributeDescription
sizing Object

object of width, heigh, and margins

sizing.width Object

total height

sizing.height Object

total width

sizing.margin Object
  • optional
  • default: 0

all margins

sizing.margin.top Object

top margin

sizing.margin.right Object

right margin

sizing.margin.bottom Object

bottom margin

sizing.margin.left Object

left margin

Return:

Object

dimensions for d3 DOM object

Example:

var SIZE = dimensions({
    width : 600,
    height : 500,
    margin:{top: 10, right: 30, bottom: 10, left: 20}
});

public draw(what: String, parent: D3Object, settings: Object): Object source

import draw from 'grizzy/src/main/draw.js'

draw: manages the heavy lifting of d3 by creating a reusable pattern to create graphics. Note: if setting.data is false parent object will bind only.

Params:

NameTypeAttributeDescription
what String

what will be picked in the selection

parent D3Object

the svg that will be render new images

settings Object

Object of data and is.

settings.data Array

an Array or an Array of an Array and an id fuction.

settings.is Object

a function following d3 convention of passing the parent to perform d3 methods on.

Return:

Object

Example:

draw("rect.range", container, {
  data: rangez,
  is : {
    enter : (selection) => {
      return selection.enter().append("rect")
        .attr({
          "class": (d, i) => "range s" + i,
          "width": w0,
          "height": height,
          "x": reverse ? lastScale : 0
        })
      .transition()
        .duration(duration)
        .attr({
          "width": w1,
          "x": reverse ? currentScale : 0
        });
    },
    postUpdate : (selection) => {
      return selection.transition()
        .duration(duration)
        .attr({
          "x": reverse ? currentScale : 0,
          "width": w1,
          "height": height
        });
    },
    exit : (selection) => {
      return selection.exit().remove();
    }
  }
});

public drawSchedule(what: String, parent: D3Object, settings: Object): Object source

import {drawSchedule} from 'grizzy/src/main/scheduler/drawSchedule.js'

drawSchedule: exactly the same as draw except to be used with load. drawSchedule causes nothing to happen on its own. It returns an object to be rendered by load.

 const axis = drawSchedule(...args);
 const bar = drawSchedule(...args);
 load('barAnimation', axis, bar);

The big difference is there needs to be a second argument to pass to the function during rendering. Under the hood an event listener is used to know when the function completes asynchronously. Notice in the main example the following code.

 (selection, done) =>
   ...
   .call(done)

In order for the sequence to complete an argument must be given to the function and it must be called at the end.

Params:

NameTypeAttributeDescription
what String

what will be picked in the selection

parent D3Object

the SVG that will be render new images

settings Object

All of the functionality of the view of component. must include properties data, and is.

Return:

Object

this is description.

Return Properties:

NameTypeAttributeDescription
string String

type used internally

bind Function

function that will bind or not bind data to the DOM

is Object

functions render DOM nodes with D3

Example:

function bar(parent, data, helpers) {
  let {size, x, y} = helpers;

  return drawSchedule('.bar', parent, {
    data: data,
    is:{
      enter: (selection, done) => {
        return selection.enter().append('rect')
          .attr({
            'class': 'bar',
            'x': (d) => x(d.letter),
            'width': x.rangeBand(),
            'y': (d) => y(d.frequency),
            'height': (d) => size.height - y(d.frequency)
          })
          .style({
            'opacity': 0
          })
          .transition().delay(100)
          .style({
            'opacity': 1
          })
          .call(done);
      }
    }
  });
}

See:

TODO:

  • have a verification to make sure an argument is given to the function that is called by .call.

public load(stringId: String, transitions: ...Function) source

load what each transition to schq to be rendered in sequential order. Any time this function is call all previous transition are canceled.

Params:

NameTypeAttributeDescription
stringId String

a unique id so schq can use an event listener to know when transitions have ended.

transitions ...Function

a series of functions that return transition objects

See: