0.8.0 • Published 7 years ago
@redsift/d3-rs-squares v0.8.0
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