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

* In the default orientation *Index and *Value apply respectively to the the x and y axis