Skip to content

Data format

Jump to bottom
Jorge Yagüe París edited this page Feb 13, 2018 · 27 revisions
Version history
0.0.30 (current)
0.0.3
0.0.1

Proteic.js uses the same data format for every visualisation. This format is an array of data points with a set of keys that might change for each type of visualisation or chart. The format is valid in both JavaScript and JSON notation. The following is a list of examples for the current visualisations, pulled from the examples folder:

Bar chart

Property Description Type
key Data series keys or groups String
x Category in the X axis String
y Value in the Y axis Numeric

Example:

var data = [
  {x: 'SP', key: '- 18', y: 30},
  {x: 'SP', key: '+ 18 - 35', y: 25},
  {x: 'SP', key: '+ 35', y: 45},
  {x: 'FR', key: '- 18', y: 10},
  {x: 'FR', key: '+ 18 - 35', y: 50},
  {x: 'FR', key: '+ 35', y: 40},
  {x: 'BR', key: '- 18', y: 20},
  {x: 'BR', key: '+ 18 - 35', y: 40},
  {x: 'BR', key: '+ 35', y: 40}
];

Line chart

Property Description Type
key Data series or groups String
x Value in the X axis Numeric
y Value in the Y axis Numeric or date String 
var dataArea = [
  {key:'serie1', x:1, y:5},
  {key:'serie1', x:2, y:15},
  {key:'serie1', x:3, y:35},
  {key:'serie1', x:4, y:25},
  {key:'serie1', x:5, y:12},
  {key:'serie1', x:6, y:0},
  {key:'serie1', x:7, y:21},
  {key:'serie1', x:8, y:0},
  {key:'serie2', x:1, y:4},
  {key:'serie2', x:2, y:4},
  {key:'serie2', x:3, y:20},
  {key:'serie2', x:7, y:12},
  {key:'serie2', x:5, y:14},
  {key:'serie2', x:6, y:9},
  {key:'serie2', x:4, y:12},
  {key:'serie2', x:8, y:13}
];

With temporal data:

var temporalData = [
  {key:'serie1', x: '01/01/16', y: 3},
  {key:'serie1', x: '01/02/16', y: 5},
  {key:'serie1', x: '01/03/16', y: 3},
  {key:'serie1', x: '01/04/16', y: 8},
  {key:'serie1', x: '01/04/16', y: 3},
  {key:'serie1', x: '01/05/16', y: 5},
  {key:'serie1', x: '01/06/16', y: 3},
  {key:'serie1', x: '01/07/16', y: 8},
  {key:'serie1', x: '01/08/16', y: 3},
  {key:'serie1', x: '01/09/16', y: 5},
  {key:'serie1', x: '01/10/16', y: 3},
  {key:'serie1', x: '01/11/16', y: 8},
  {key:'serie1', x: '01/12/16', y: 3},
  {key:'serie1', x: '01/13/16', y: 5},
  {key:'serie1', x: '01/14/16', y: 3},
  {key:'serie1', x: '01/15/16', y: 8},
  {key:'serie1', x: '01/19/16', y: 5}, //unsorted!!!! 
  {key:'serie1', x: '01/16/16', y: 3},
  {key:'serie1', x: '01/17/16', y: 8},
  {key:'serie1', x: '01/18/16', y: 3},
  {key:'serie1', x: '01/20/16', y: 3},
  {key:'serie2', x: '01/10/16', y: 8},
  {key:'serie2', x: '01/14/16', y: 5}
];

Stacked area chart

Property Description Type
key Category String
x X axis value Numeric or date String
y Y axis value Date String 
var data = [
  {'key': 'ES', x: '01/08/13', y:30},
  {'key': 'UK', x: '01/08/13', y:40},
  {'key': 'ES', x: '01/09/13', y:10},
  {'key': 'UK', x: '01/09/13', y:10},
  {'key': 'ES', x: '01/10/13', y:70},
  {'key': 'UK', x: '01/10/13', y:30},
  {'key': 'ES', x: '01/11/13', y:50},
  {'key': 'UK', x: '01/11/13', y:50},
  {'key': 'ES', x: '01/12/13', y:25},
  {'key': 'UK', x: '01/12/13', y:75},
  {'key': 'ES', x: '01/13/13', y:80},
  {'key': 'UK', x: '01/13/13', y:20},
  {'key': 'ES', x: '01/14/13', y:90},
  {'key': 'UK', x: '01/14/13', y:10}
];

Gauge

It will only take the last value of the array.

Property Description Type
value Value of the needle Numeric 
var data = [
  {value: 50}
];

Swimlane

Property Description Type
key ID of the lane String
start Starting date of the event Date String
end End date of the event Date String 
var data = [
  {key: 'Lane1', start:"2012-01-01", end:"2012-01-03"},
  {key: 'Lane1', start:"2012-01-05", end:"2012-01-10"},
  {key: 'Lane1', start:"2012-01-12", end:"2012-01-15"},
  {key: 'Lane1', start:"2012-01-16", end:"2012-01-20"},
  {key: 'Lane2', start:"2012-01-01", end:"2012-01-03"},
  {key: 'Lane2', start:"2012-01-05", end:"2012-01-10"},
  {key: 'Lane2', start:"2012-01-12", end:"2012-01-12"},
  {key: 'Lane2', start:"2012-01-13", end:"2012-01-20"}
];

Streamgraph

Property Description Type
key Category String
x X axis value Numeric or date String
y Y axis value Date String 
var data = [
  {'key': 'ES', x: '01/08/13', y:30},
  {'key': 'UK', x: '01/08/13', y:40},
  {'key': 'ES', x: '01/09/13', y:10},
  {'key': 'UK', x: '01/09/13', y:10},
  {'key': 'ES', x: '01/10/13', y:70},
  {'key': 'UK', x: '01/10/13', y:30},
  {'key': 'ES', x: '01/11/13', y:50},
  {'key': 'UK', x: '01/11/13', y:50},
  {'key': 'ES', x: '01/12/13', y:25},
  {'key': 'UK', x: '01/12/13', y:75},
  {'key': 'ES', x: '01/13/13', y:80},
  {'key': 'UK', x: '01/13/13', y:20},
  {'key': 'ES', x: '01/14/13', y:90},
  {'key': 'UK', x: '01/14/13', y:10}
];

Sunburst

Property Description Type
id ID of the node String
parent ID of the parent node String
value Weight or size of the node Numeric
label Label of the node String 
// Note: the IDs are just strings, the numeric notation is an example
var data = [
  { "id": "root", "parent": "", "value": "0", "label": "sequences" },
  { "id": "1", "parent": "root", "value": "50", "label": "home" },
  { "id": "2", "parent": "root", "value": "0", "label": "about"},
  { "id": "2.1", "parent": "2", "value": "25", "label": "contact"},
  { "id": "3", "parent": "root", "value": "0", "label": "product"},
  { "id": "3.1", "parent": "3", "value": "0", "label": "product"},
  { "id": "3.1.1", "parent": "3.1", "value": "25", "label": "cart"}
];

Scatterplot

Property Description Type
key Data series or groups String
x Value in the X axis Numeric
y Value in the Y axis Numeric 
var dataArea = [
  {key:'serie1', x:1, y:5},
  {key:'serie1', x:2, y:15},
  {key:'serie1', x:3, y:35},
  {key:'serie1', x:4, y:25},
  {key:'serie1', x:5, y:12},
  {key:'serie1', x:6, y:0},
  {key:'serie1', x:7, y:21},
  {key:'serie1', x:8, y:0},
  {key:'serie2', x:1, y:4},
  {key:'serie2', x:2, y:4},
  {key:'serie2', x:3, y:20},
  {key:'serie2', x:7, y:12},
  {key:'serie2', x:5, y:14},
  {key:'serie2', x:6, y:9},
  {key:'serie2', x:4, y:12},
  {key:'serie2', x:8, y:13}
];

Parallel coordinates

Property Description Type
key Data series or groups String
* Value in the Y axis Numeric or String

Any property other than key will be added as a new Y axis automatically.

  // Data from: https://bl.ocks.org/mbostock/1341021
  // missing some dimensions
  var dataParallel = [
  {key: 'Brougham', 'economy (mpg)': 13,
  'cylinders': 8, 'power (hp)': 175,	// missing 'displacement (cc)'
  'weight (lb)': 3821, '0-60 mph (s)': 11, 'year': 73 },
  {key: 'DPL', 'economy (mpg)': 15,
  'cylinders': 8, 'displacement (cc)': 390, 'power (hp)': 190,
  'weight (lb)': 3850, '0-60 mph (s)': 8.5, 'year': 70 },
  {key: 'SST',	// missing 'economy (mpg)'
  'cylinders': 8, 'displacement (cc)': 304, 'power (hp)': 150,
  'weight (lb)': 3672, '0-60 mph (s)': 11.5, 'year': 72 },
  {key: 'Concord DL6', 'economy (mpg)': 20.2,
  'cylinders': 6, 'displacement (cc)': 232, 'power (hp)': 90,
  'weight (lb)': 3265, '0-60 mph (s)': 18.2, 'year': 79 },
  {key: 'Concord DL', 'economy (mpg)': 18.1,
  'cylinders': 6, 'displacement (cc)': 258, 'power (hp)': 120,
  'weight (lb)': 3410, '0-60 mph (s)': 15.1, 'year': 78 },
  {key: 'Concord DL', 'economy (mpg)': 23,
  'cylinders': 4, 'displacement (cc)': 151, 'power (hp)': 100,
  'weight (lb)': 3035, '0-60 mph (s)': 20.5, 'year': 82 },
  {key: 'Concord', 'economy (mpg)': 19.4,
  'cylinders': 6, 'power (hp)': 90,	// missing 'displacement (cc)'
  'weight (lb)': 3210, '0-60 mph (s)': 17.2, 'year': 78 },
  {key: 'Concord', 'economy (mpg)': 24.3,
  'cylinders': 4, 'displacement (cc)': 151, 'power (hp)': 90,
  'weight (lb)': 3003, '0-60 mph (s)': 20.1, 'year': 80 }
];

PROTEUS-H2020

Proteic logo

Proteic

Docs

Clone this wiki locally