Published
Edited
Mar 9, 2018
16 stars
originalData = [
["Country", "2016", "2018"],
["Switzerland", 1, 2],
["Germany", 3, 4],
["Italy", 5, 6]
]
originalData.reduce((prev, curr) => {
prev = prev.concat(curr) // we extend the previous array with the current array
return prev;
}, [])
[
{ country: "Switzerland", year: "2016", value: 1 },
{ country: "Switzerland", year: "2018", value: 2 },
{ country: "Germany", year: "2016", value: 3 },
{ country: "Germany", year: "2018", value: 4 },
{ country: "France", year: "2016", value: 5 },
{ country: "France", year: "2018", value: 6 }
]
[
{"row":0,"column":0,"value":"Country"},
{"row":0,"column":1,"value":"2016"},
{"row":0,"column":2,"value":"2018"},
{"row":1,"column":0,"value":"Switzerland"},
{"row":1,"column":1,"value":1},
{"row":1,"column":2,"value":2},
{"row":2,"column":0,"value":"Germany"},
{"row":2,"column":1,"value":3},
{"row":2,"column":2,"value":4},
{"row":3,"column":0,"value":"France"},
{"row":3,"column":1,"value":5},
{"row":3,"column":2,"value":6}
]
{
const spec = ({
"height": 50,
"width": 50,
"background": "red",
"data": [
{
"name": "original-data",
"values": originalData
}
]
})
const view = new vega.View(vega.parse(spec)).renderer("none").initialize();
view.toSVG();
return JSON.parse(JSON.stringify(view.data('original-data')));
}
{
const spec = ({
"height": 50,
"width": 50,
"background": "red",
"data": [
{
"name": "original-data",
"values": originalData,
"transform": [
{
"type": "project",
"fields": ["0", "1", "2"],
"as": ["firstColumn", "secondColumn", "thirdColumn"]
}
]
}
]
})
const view = new vega.View(vega.parse(spec)).renderer("none").initialize();
view.toSVG();
return view.data('original-data');
}
{
const spec = ({
"height": 50,
"width": 50,
"background": "red",
"data": [
{
"name": "original-data",
"values": originalData
},
{
"name": "sequence-data",
"transform": [
{
"type": "sequence",
"start": 0,
"stop": {
"signal": "data('original-data').length"
}
},
{
"type": "formula",
"expr": "data('original-data')[datum.data]",
"as": "rowCells"
}
]
}
]
})
const view = new vega.View(vega.parse(spec)).renderer("none").initialize();
view.toSVG();
return view.data('sequence-data');
}
flattedTable = {
const spec = {
"height": 50,
"width": 50,
"background": "red",
"data": [
{
"name": "original-data",
"values": originalData
},
{
"name": "flatted-table",
"transform": [
{
"type": "sequence",
"start": 0,
"stop": {
"signal": "data('original-data').length"
}
},
{
"type": "formula",
"expr": "data('original-data')[datum.data]",
"as": "rowCells"
},
{
"type": "flatten",
"fields": ["rowCells"],
"as": ["value"]
},
{
"type": "identifier",
"as": "id"
},
{
"type": "formula",
"expr": "(datum.id - 1) % datum.rowCells.length",
"as": "column"
},
{
"type": "project",
"fields": ["data", "column", "value"],
"as": ["row"]
}
]
}
]
};
var view = new vega.View(vega.parse(spec)).renderer("none").initialize();
view.toSVG();
return view.data('flatted-table');
}
vega = require('vega')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
