d3-rs-squares

d3-rs-squares easily generate either a co-occurrence matrix or a calendar chart.

Builds

Example

View @redsift/d3-rs-squares on Codepen

Matrix chart

Co occurrence chart

Calendar chart

Usage

Browser

<script src="//static.redsift.io/reusable/d3-rs-squares/latest/d3-rs-squares.umd-es2015.min.js"></script>
<script>
	// for cooccurence view
	var squares = d3_rs_squares.html();
	...
	//or for calendar view
	var calendar = d3_rs_squares.html().type('calendar').lastWeeks(12);
</script>

ES6

import { chart } from "@redsift/d3-rs-squares";
let eml = chart.html();
...

Require

var chart = require("@redsift/d3-rs-squares");
var eml = chart.html();
...

Data layout

Both displays expect an Array with JSON objects.

var data = [{}, {}, ...];

Between the two types the layout of the object varies:

For the calendar view the expected JSON object should be:

{
	d: 1462057200000, // epoch timestamp in milliseconds 
	v: 10
}

For the co-occurrence matrix the expected JSON object should be:

{
	x: 'key1', 
	y: 'key2',
	z: 10 // number or object. To access object properties use zfield
}

Parameters

Name	Used In	Description	Transition	Preview
`classed`	*	SVG custom class	N
`width`, `height`	*	Integer Resize the chart height and width.	Y	Examples: Bricks / CodePen
`size`	*	Integer SVG container sizes	Y	Examples: Bricks / CodePen
`scale`	*	Integer SVG container sizes	Y	Examples: Bricks / CodePen
`style`	*	String Custom CSS to inject into chart	N
`color`	*	String, Array Color palette for the data. Available options from d3-rs-theme e.g. `'blue'`,`'green'`,`'aqua'`,...	Y	Examples: Bricks / CodePen
`theme`	*	String `'light'` (default) or `'dark'` as described in d3-rs-theme		Examples: Bricks / CodePen
`inset`	*	Integer, Object Provide additional margin for axis with long keys. Expected object structure `{top: 0, bottom:10, left:10, right:0}`		Examples: Bricks / CodePen
`zfield`	matrix.*	String When `z` field is an object this parameter gives you the ability to use the value under a different key e.g. for `{x:'',y:'',z:{prop1:''}}` to use the value of the `prop1` key pass the name of the key `'prop1'` to the parameter		Example: CodePen
`cellSize`	*	Integer Get or override calculated size of cells		Example: CodePen
`type`		`'calendar.days'`, `'calendar.hours'`, `'matrix.cooc'`, `'matrix'`(default)		Examples: Calendar Bricks / Matrix Bricks / Matrix CodePen / Calendar CodePen
`minDate`	`'calendar.days'`	Timestamp Override the earliest day of the dataset	Y	Examples: Bricks / CodePen
`maxDate`	`'calendar.days'`	Timestamp Override the latest day of the dataset	Y	Examples: Bricks / CodePen
`nice`	`'calendar.days'`	Boolean (deault: yes) Extend range of calendar to display whole months	N	Example: CodePen
`monthSeparation`	`'calendar.days'`	Boolean (deault: yes) Add extra space between months	N	Examples: Bricks / CodePen
`starting`	calendar.*	String First day of the week. Default is `'timeSunday'` Available options: (`'timeMonday'`, `'timeTuesday'`, ...) or the utc counterparts: (`'utcMonday'`, `'utcTuesday'`, ...) based on the d3-time package		Examples: Bricks / CodePen
`rangeIndex`, `rangeValue`	matrix	String, Function, Array ranges from d3-time#ranges (Milliseconds not supported) Custom ranges need to follow the d3-time#range paradigm. If an array is supplied first expected element is the range function and second a cardinality override of the range unit e.g. `[d3.timeYear, 2]` for a range of 2 years		Examples: Bricks / CodePen
`intervalIndex`, `intervalValue`	matrix	String, Array intervals from d3-time#intervals (Milliseconds not supported). For custom intervals an array is expected with the interval and range functions following the paradigm in d3-time e.g. `[timeHour, timeHours]`		Examples: Bricks / CodePen
`onClick`		Function handler for a click event on the data series