Methods

constructor(selector, [ options ], [ data ])

data(data)

Set or change the data of the graph. This method will automatically call update() . The data format needs to be the same as the one that the constructor accepts.

options(options)

Change graph options. This method will automatically call update() . You can change all the options as described in constructor except width and margin .

update()

Updates and re-draws the graph. You shouldn't need to call this under normal circumstances.

Properties

container

Holds the reference to the DOM object containing the <svg> element. Same object as if you had called d3.select(selector) .

dataContainer

Holds the reference to the <g> element containing the data elements

dispatch

d3 event dispatcher. You can hook your event handler to this property to listen to graph events.

Events

The events are dispatched via this.dispatch .

mouseenter

Will fire when mouse enters a heat square. The handler will be passed the current data (count) for the square.

mousemove

Will fire when mouse moves around a heat square.

mouseleave

Will fire when mouse leaves a heat square.

CSS

The CSS classes for styleable elements of the heatmap.

.white rect

white chess board square

.white .label

white chess board square label (file or rank label)

.black rect

black chess board square

.black .label

black chess board square label (file or rank label)

.heat-square

rect corresponding to a heat square