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