chess-dataviz docs & demos

Examples

Defaults

Default options with some data.

Fancy

Dynamic data update, custom color scaling and d3.tip integration.

Methods

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

argument	description
selector	DOM selector that you would pass to d3.select()
options	options configuration object width total width of the svg element margin margins around the chess board, hence the total width of the chess board will be width - 2 * margin accessor the accessor keys for piece and color. this will define what parts of the data is being shown on the heatmap. valid values: piece: all, k, q, r, b, k, p color: w, b sizeScale scale the size of the heatmap squares depending on the data value colorScale color the heatmap squares depending on the data value, optionally, you can pass an array of 2 colors to interpolate such as ['yellow', 'red']. If set to true, but not supplied an array, the default interpolation is ['blue', 'red'].
data	data formatted as: The data consists of an array of 64 elements (only 2 shown in the example above) representing the squares, from top-left to bottom-right in row order (a8, b8, c8 ... ,f1, g1, h1)

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

Examples

Defaults

Default options with some data.

Fancy

Data update, event handlers and custom colors.

Methods

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

argument	description
selector	DOM selector that you would pass to d3.select()
options	options configuration object width total width of the svg element height total height of the svg element colors an ordinal scale of colors for the different segments of the sunburst graph. every first move will get a color, and its variations will be darkened/lightened by move number and color to move. arcThreshold a minimum angle (in radians) where smaller arcs will not appear. use this to remove variations that have small percentages, or set it to 0 to show all of them. textThreshold a minimum angle (in radians) where smaller SAN texts will not appear. similar to arcThreshold
data	data formatted as: The data structure is what d3.partition() expects, a "start" object with nested children, each level representing a "ply", or a move by either black or white.

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 height.

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 (data, moves) for the arc. data contains the data of the arc that is under the mouse, and moves will be an array of moves up until that point (e.g. ['e4', 'e5', 'Nf3', 'Nf6'] if you were on the Nf6 arc).

mousemove

Will fire when mouse moves around an arc.

mouseleave

Will fire when mouse leaves an arc.

CSS

The CSS classes for styleable elements of the sunburst graph.

.arc

an arc in the sunburst graph

.san

SAN texts for arcs

Examples

Defaults

Default options with some data and custom board colors.

Methods

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

argument	description
selector	DOM selector that you would pass to d3.select()
options	options configuration object width total width of the svg element margin margins around the chess board, hence the total width of the chess board will be width - 2 * margin accessor the starting square of a piece, such as 'Nb1' or 'e2'. binSize to aggregate moves over 'bins' in case there are many games involved. this determines the number of lines drawn per binSize moves. if you have data with many moves, you should set this to a high value, as it will affect performance pointRandomizer a function which takes in the data point {x: , y: } and returns a randomized coordinate. this is used to fuzz start and end coordinates of the path. bezierRandomizer a function which takes in a point {x: , y: } and returns a randomized coordinate. this is used to fuzz the control point of the quadratic bezier curve of the path. bezierScaleFactor a number to scale the distance of the bezier control point.
data	data formatted as: The data is an object with keys containing all the pieces' starting points, where the key values are objects with keys of the format {startSquare}-{endSquare} e.g e2-e4 and values as the counts (number of times that piece move along those squares).

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

CSS

The CSS classes for styleable elements of the board and paths.

.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)

.move-path

path corresponding to a path line

Examples

Custom

Custom options with some data and interactive toggle.

Methods

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

argument	description
selector	DOM selector that you would pass to d3.select()
options	options configuration object width total width of the svg element height total height of the svg element margin a margin object of the form {top, right, bottom, left} describing the margins to apply to each side interactive toggle for enabling interactive mode, where mousemove events cause x and y axis guide lines to move
data	data formatted as: The data format is an array of objects describing the moves as {move, score, time}. note that score and time should be numbers and not strings

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, height 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).

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 the graph area.

mousemove

Will fire when mouse moves around on the graph, passing the current data point to the handler.

mouseleave

Will fire when mouse leaves the graph.

CSS

The CSS classes for styleable elements of the graph.

.graph

graph wrapper

.axis

styles for x and y axes

.axis-label

styles for x and y axis labels

.bar

bars for the black player

.bar.white

bars for the white player

.line

lines for the black player

.line.white

lines for the white player

.area

area above the line for the black player

.area.white

area under the line for the white player

.eval-guides

evaluation marker lines on the graph

.eval-guide-line

evaluation marker line paths on the graph

.eval-guide-text

evaluation marker text on the graph

.interactive-layer.guide

the interactive guidelines

.interactive-layer.guide.hidden

the interactive guidelines when they are hidden