Red Sift D3 Components

To bring the data computed by your Sift on the screen we provide you with a set of configurable D3 components to get started quickly with the visualization of your data. This list will grow over time, so make sure to check back every now and then.

The Red Sift D3 Components are following the D3 reusable chart convention which includes various ways for data to be displayed in an interactive chart. In this section, we are going to explore each of the components to give you an overview how and for which type of data to use them. You can play around with the components on your own with the provided Codepens. Try it, its fun bringing your data alive!

Components Reference:

This section contains documentation for the following libraries, which can be found on Github:

• d3-rs-lines
• d3-rs-squares
• d3-rs-geo
• d3-rs-bars

We also provide data visualization web components below, which hide the D3 interface and expose only a simple interface via HTML and Javascript. They have a ui- prefix to distinguish them from the libraries above which expose a D3 interface:

• ui-rs-radial-chart
• ui-rs-schedule

d3-rs-lines library

The d3-rs-lines library is one of Red Sift components that map your data-set to generate line charts. The library include different property that render the chart to support area fills, hovers and highlights.

Datum

The data structure used by the Red Sifts components are different for each component. The structure used by the lines library is shown below.

//A simple line chart structure

//Structure of the dataSet 
//l represent the x-axis and v is the y-axis 
let dataSet = [{l: 1 , v: 3},	 //this represent (1,3)
               {l: 4 , v: 7},		
               {l: 6 , v: 9}
							];

let  chart = d3_rs_lines.html();

d3.select('body')
	.datum(dataSet)
	.call()

Below shows the result of the simple line chart structure:

Showcasing the lines library

The showcase utilises the lines library to provide an interactive chart taking advantage of the diverse properties of the library.

Lines Library Properties

The lines library comes with a range of properties that provides customisation to the line chart. It allows the chart to change in colours, highlights values, animate or display info on hover.

The following shows a collection of properties that can be used with the line chart.

Parameters

Examples

This section provide a quick look at the properties available and how they are used.

View @redsift/d3-rs-lines collection on Codepen

d3-rs-squares library

The d3-rs-squares is a library which focuses on providing insight from your data in the form of square matrices. The library can easily generate either a co-occurrence matrix or a calendar chart. The calendar chart supports only Unix time stamp data set.

Datum

The squares library contains two different data structure which are used to produce matrix or calendar chart.

The simple example below give an example of how the matrix chart is structured.

//A simple matrix structure

//Structure of the dataSet 
//x represent the x-axis, y represent the y-axis and z the colour intensity
let dataSet = [
               {x: 1 , y: 3, z:10},  //this represent the x: column y: row z: colour 
               {x: 4 , y: 7, z:1},   
               {x: 6 , y: 9, z:5}
              ];

let  chart = d3_rs_squares.html();

d3.select('#chart')
  .datum(dataSet)
  .call(chart)

The result of the above dataSet is given below.

The calendar data structure is different to matrix, where it only support UNIX time stamp data. The type by default is set to matrix thus when using calendar you will need to change the calendar property.

The simple example below give an of how the data for calendar chart need to be structured.

//A simple calendar chart structure

//Structure of the dataSet 
//Calendar dataset takes Unix timestamp as parameter for 'd'
//'v' is the square colour intensity 
let dataTime = [  
      {d: 1462057200000, v: 10},
      {d: 1462402800000, v: 5},
      {d: 1464822000000, v: 15}
    ];

let  chart = d3_rs_squares.html()
                          .type('calendar.days'); //the type need to be set for calendar property since by default it is set to matrix

d3.select('#chart')
  .datum(dataTime)
  .call(chart)

The above calendar chart example result is given below:

Showcasing the squares library

The showcase utilises the squares library to provide an interactive chart taking advantage of the diverse properties of the library.

Squares library properties

The squares library has a variety of properties that allows customisation for the square chart. The square chart can be modified by change in colour, range in calendar dates or squares colour intensity.

Parameters

Examples

This section provide a quick look at the properties available and how they are used.

View @redsift/d3-rs-squares collection on Codepen

d3-rs-geo library

The d3-rs-geo library provide a TopoJSON map in an SVG constainer. TopoJSON is an extension of GeoJSON that encodes topology. The d3-rs-geo library enables linking points of interest, projection and zoom.

Datum

Datum can be one of:

1. String representing the URL to load the TopoJSON file for the map from
2. Object representing the TopoJSON itself
3. Object with key url (URL to load the TopoJSON file) and optionally the keys points and links

The simple example below represent the TopoJSON datum of the world. The datum uses the object with key url of the TopoJSON link.

//simple example of the topoJSON Datum
var geo = d3_rs_geo.html();

    d3.select('#elm')
      .datum({ url: 'https://static.redsift.io/thirdparty/topojson/examples/world-50m.json' }) //world topoJSON
      .call(geo);

The result of the simple example:

Showcasing the geo library

The example below uses a variety of properties included in the geo library to provide links between countries using links. The showcase represent link from London Heathrow Airport, UK to different part of the world. A convenient way to show the airport route of different journey travelled by an individual.

Parameters

Examples

The examples showcase the property of the library.

d3-rs-bars library

The d3-rs-bars library generate an interactive bar chart from your data-set that can be stacked or unstacked series. The library supports a variety of properties that includes hovers and highlights.

Datum

The structure of the datum is similar to d3-rs-lines datum which can include just a simple datum array or can be customised using Index and Value which can support epoch time data.

1 ) The example below is using a simple datum customising just the bar size.

//A simple bar chart structure

let chart = d3_rs_bars.html();

//datum just include an array with the data
d3.select('body')
  .datum([300,400,1000,700,500]) 
  .call(chart);

The preview of the above datum.

2. The datum can be customised using the Index and Value. Value ("V") specify the length of the bar chart and Index ("I") is used to label the bar. The example below uses String to label "l" but Number or Epoch time (Example 4) could also be used.

//A simple bar chart structure 2

let chart = d3_rs_bars.html();

//datum using Index and Value to customise the bar
  let data = [{"l":"Gas","v":59},{"l":"Water","v":22},{"l":"Oil","v":30}];

d3.select('body')
  .datum(data) 
  .call(chart);

The preview of the above datum.

3. The datum also support a series of data for stacked or unstacked bar chart. By default the series data are set to stack and can be changed to unstacked using the stacked property set to false.

//A simple bar chart structure 3

let chart = d3_rs_bars.html();

//datum using Index and Value using data series and by dafault it is stacked
let data = [{"l":2,"v":[5,4,2]},{"l":4,"v":[2,2,4]},{"l":1,"v":[3,1,2]}]

d3.select('body')
  .datum(data) 
  .call(chart);

The preview of the above datum.

4. The datum can also supports epoch time data-set which can be used instead of an Integer or a String. This provide additional customisation to your bar chart if you want to include month of a year or day of a week to support your chart.

//A simple bar chart structure 4

let chart = d3_rs_bars.html()
                      .labelTime('%a'); //format the epoch time using string specifiers

//datum using epoch time dataset 
let data = [{"l":1466511212000,"v":[5,4,2]},{"l":1466856812000,"v":[2,2,4]},{"l":1466684012000,"v":[3,1,2]}]

d3.select('body')
  .datum(data) 
  .call(chart);

The preview of the above datum.

Showcasing the bars library

The showcase is a re-implementation of Research Excellence Framework (REF) scores from giCentre using the d3-rs-bars library.

Bars library properties

The bars library includes a variety of properties that can customise the bar chart. The library comprise of the hovers, highlight, stacked and tick properties.

Parameters

Examples

The examples showcase the property of the library.

ui-rs-radial-chart library

This chart can be used to show data over time in a radial fashion, e.g. your monthly expenses on taxis over a year. It is implemented as a custom element (which is one corner stone of web components.

To include the library add the following lines for the CSS and the Javascript to your web page:

<link rel="stylesheet" href="https://static.redsift.io/reusable/ui-rs-radial-chart/latest/css/ui-rs-radial-chart.min.css">

<script src="https://static.redsift.io/reusable/ui-rs-radial-chart/latest/js/ui-rs-radial-chart.umd-es2015.min.js"></script>

After the library is included use it like so:

<rs-radial-chart>
  <div id="chart"></div>
  <div id="legend"></div>
</rs-radial-chart>

The d3-rs-radial-chart element contains two DIVs for the chart itself and a legend. If you do not want a legend simply remove the DIV. To fill the chart with live add some data to it with Javascript:

let chart = document.querySelector('rs-radial-chart');

if (chart) {
  // Setup radial chart via public API
  chart.data = _dummyData(200);

  var count = 0;
  setInterval(() => {
    chart.data =  _dummyData((Math.random() * 400) + 20);
  }, 2500);
}

// Dummy data generator - creates an array with 12 objects, one for each month,
// with the following form:
// [ {
//      name: 'Jan',
//      value: '23',
//      color: () => { return '#0000ff'; },
//      classed: 'stripe'
//   }, {
//      name: 'Feb',
//      value: '173',
//      color: () => { return '#00ff00'; },
//   },
//   ...
// ]
// The generator uses utility functions provided by RedsiftUI for the handling
// of months.
function _dummyData(range) {
  let color = d3.scale.category20(),
      r = Redsift.Lang.localShortMonths();
  r = r.concat(Redsift.Lang.localShortMonths(), Redsift.Lang.localShortMonths());
  return r.map((m, i) => {
    let v = Math.random() * range;
    return {
      name: m,
      value: v,
      color: () => { return color(v); },
      classed: (i !== 1) ? undefined : 'stripe'
    };
  }).filter((d, i) => { return i < 12; });
}

The data structure expected by the chart is a simple array with an object for each month containing a name, value, color and optional classed value. The classed value can be set to a class name which will be applied to the visual data cone of the respective month. This allows you e.g. to highlight a month when it is over a certain budget limit. color is a function returning a color in hex. Here is an example of the structure:

let data = [{
    name: "Jan",
    value: 3.6732592034888905,
    color: () => { return '#00ff00'; }
  }, {
    name: "Feb",
    value: 3.3835721480313685,
    color: () => { return '#00ff00'; },
    classed: "stripe"
  }, {
    name: "Mar",
    value: 46.90614320865888,
    color: () => { return '#00ff11'; }
  }, {
    name: "Apr",
    value: 16.262593631395912,
    color: () => { return '#00ff22'; }
  }, {
    name: "May",
    value: 53.40171839979518,
    color: () => { return '#00ff33'; }
  }, {
    name: "Jun",
    value: 15.899117927917139,
    color: () => { return '#00ff44'; }
  }, {
    name: "Jul",
    value: 6.650584346480011,
    color: () => { return '#00ff55'; }
  }, {
    name: "Aug",
    value: 26.689381547140503,
    color: () => { return '#00ff66'; }
  }, {
    name: "Sep",
    value: 34.29461737322482,
    color: () => { return '#00ff77'; }
  }, {
    name: "Oct",
    value: 26.4320733402228,
    color: () => { return '#00ff88'; }
  }, {
    name: "Nov",
    value: 51.88087153647562,
    color: () => { return '#00ff99'; }
  }, {
    name: "Dec",
    value: 54.6380052855129,
    color: () => { return '#00ffaa'; }
  }];

ui-rs-schedule

The ui-rs-schedule element allows you to create an SVG-based schedule for your visualization. It is implemented as a custom element (which is one corner stone of web components.

To include the library add the following lines for the Javascript to your web page:

<script src="https://static.redsift.io/reusable/ui-rs-schedule/latest/js/ui-rs-schedule.umd-es2015.min.js"></script>

Afterwards you can embed the element into your web page:

<rs-schedule></rs-schedule>

var data = [{
  "start": Date.parse("2016-04-13T14:30:00+01:00")
}, {
  "end": Date.parse("2016-04-13T18:30:00+01:00")
}, {
  "status": "confirmed",
  "summary": "Confirmed overlap event",
  "self": true,
  "start": Date.parse("2016-04-13T16:30:00+01:00"),
  "end": Date.parse("2016-04-13T18:30:00+01:00")
}, {
  "status": "tentative",
  "summary": "Tentative event",
  "self": false,
  "start": Date.parse("2016-04-13T15:00:00+01:00"),
  "end": Date.parse("2016-04-13T16:00:00+01:00")
}, {
  "status": "proposed",
  "summary": "Suggested event of some significant length",
  "self": false,
  "start": Date.parse("2016-04-13T16:00:00+01:00"),
  "end": Date.parse("2016-04-13T17:00:00+01:00")
}, ];

var chart = document.querySelector('rs-schedule');
chart.width = 350;
chart.data = data;

The element's width is set via the width attribute. The start and end of the displayed schedule is configured via the first two elements of the data array, with the start and end property respectively. The following elements are interpreted as schedule entries. Each is configured via these properties:

• status: Can be one of confirmed, tentative and proposed and determines the color of the event
• summary: Displays a short description of the event
• start: The start date/time of the event
• end: The end date/time of the event
• self: Highlights the event with a symbol on the right