Expose more rows? - tabulator

I see only the first 20 (of 128) data rows when I call table.setData. How can I expose all 128? I don't see any controls for this. The 20 rows display with much blank space underneath, so I don't think it's an issue of room. When I open or dismiss Chrome developer tools, all the rows show up, but collapsed. If I hit F12 (toggle developer tools) twice, everything is fine. (This is in a stand-alone configuration, without other JavaScript plugins.) My constructor and (truncated) data are appended.
Tabulator v4.0.1
Chrome Version 61.0.3163.100 (Official Build) (64-bit)
{
"initialSort": [
{
"column": "WillCo_Eff",
"dir": "desc"
},
{
"column": "Which_Eff",
"dir": "desc"
},
{
"column": "VeryVeryVeryLongWay_Eff",
"dir": "desc"
},
{
"column": "Roger_Eff",
"dir": "desc"
},
{
"column": "Over_Eff",
"dir": "desc"
},
{
"column": "Out_Eff",
"dir": "desc"
},
{
"column": "Any_Eff",
"dir": "desc"
}
],
"columnVertAlign": "bottom",
"height": 5180,
"layout": "fitColumns",
"columns": [
{
"title": "Parents",
"columns": [
{
"title": "Any_Eff",
"field": "Any_Eff",
"align": "center",
"sorter": "string",
"headerSort": false
},
{
"title": "Out_Eff",
"field": "Out_Eff",
"align": "center",
"sorter": "string",
"headerSort": false
},
{
"title": "Over_Eff",
"field": "Over_Eff",
"align": "center",
"sorter": "string",
"headerSort": false
},
{
"title": "Roger_Eff",
"field": "Roger_Eff",
"align": "center",
"sorter": "string",
"headerSort": false
},
{
"title": "VeryVeryVeryLongWay_Eff",
"field": "VeryVeryVeryLongWay_Eff",
"align": "center",
"sorter": "string",
"headerSort": false
},
{
"title": "Which_Eff",
"field": "Which_Eff",
"align": "center",
"sorter": "string",
"headerSort": false
},
{
"title": "WillCo_Eff",
"field": "WillCo_Eff",
"align": "center",
"sorter": "string",
"headerSort": false
}
]
},
{
"title": "Multi_1_Eff",
"width": 150,
"columns": [
{
"title": "T",
"field": "pTrue",
"align": "center",
"headerSort": false
},
{
"title": "<i>F</i>",
"field": "pFalse",
"align": "center",
"headerSort": false
}
]
},
{
"title": "Belief",
"columns": [
{
"title": "odds",
"field": "odds",
"align": "center",
"headerSort": false
},
{
"title": "log<sub>2</sub> odds",
"field": "log2odds",
"align": "center",
"headerSort": false
}
]
}
]
}
foo.js:273
[
{
"id": 0,
"pTrue": 0.9,
"pFalse": 0.09999999999999998,
"odds": 9.000000000000002,
"log2odds": 3.1699250014423126,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 1,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 2,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 3,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 4,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 5,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 6,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 7,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 8,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 9,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 10,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 11,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 12,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 13,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 14,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 15,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "T",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 16,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 17,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 18,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 19,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 20,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 21,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 22,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 23,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 24,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 25,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 26,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 27,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 28,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "T"
},
{
"id": 29,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "T",
"WillCo_Eff": "F"
},
{
"id": 30,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "T"
},
{
"id": 31,
"pTrue": 0,
"pFalse": 1,
"odds": 0,
"log2odds": null,
"Any_Eff": "T",
"Out_Eff": "T",
"Over_Eff": "F",
"Roger_Eff": "F",
"VeryVeryVeryLongWay_Eff": "F",
"Which_Eff": "F",
"WillCo_Eff": "F"
},
{
"id": 32,
"pTrue": 0.1125,
"pFalse": 0.8875,
"odds": 0.1267605633802817,
"log2odds": -2.9798221180623696,
"Any_Eff": "T",
"Out_Eff": "F",
"Over_Eff": "T",
"Roger_Eff": "T",
"VeryVeryVeryLongWay_Eff": "T",
"Which_Eff": "T",
"WillCo_Eff": "T"
}
]

You seem to have set your table height to an enormous value of 5180px so it has probably overflowed the height of the container.
If you set it to a smaller value, say 300, or you set it to "100%" then it will only take up that much space and a scroll bar will appear.
"height": 300,
or
"height": "100%",
Alternatively, if you want to handle the scroll behavior if you specify no height it will take the full height of all the rows in the table.

See Oli Folkerd's comment---problem was that the table's DOM element was not visible when the table was created.

Related

Unable to start mongodb server. I am getting error as below :48

[
{
"t": {
"$date": "2022-03-11T17:51:24.276+07:00"
},
"s": "I",
"c": "NETWORK",
"id": 4915701,
"ctx": "-",
"msg": "Initialized wire specification",
"attr": {
"spec": {
"incomingExternalClient": {
"minWireVersion": 0,
"maxWireVersion": 13
},
"incomingInternalClient": {
"minWireVersion": 0,
"maxWireVersion": 13
},
"outgoing": {
"minWireVersion": 0,
"maxWireVersion": 13
},
"isInternalClient": true
}
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.279+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 23285,
"ctx": "main",
"msg": "Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols 'none'"
},
{
"t": {
"$date": "2022-03-11T17:51:24.279+07:00"
},
"s": "W",
"c": "ASIO",
"id": 22601,
"ctx": "main",
"msg": "No TransportLayer configured during NetworkInterface startup"
},
{
"t": {
"$date": "2022-03-11T17:51:24.279+07:00"
},
"s": "I",
"c": "NETWORK",
"id": 4648602,
"ctx": "main",
"msg": "Implicit TCP FastOpen in use."
},
{
"t": {
"$date": "2022-03-11T17:51:24.282+07:00"
},
"s": "W",
"c": "ASIO",
"id": 22601,
"ctx": "main",
"msg": "No TransportLayer configured during NetworkInterface startup"
},
{
"t": {
"$date": "2022-03-11T17:51:24.284+07:00"
},
"s": "I",
"c": "REPL",
"id": 5123008,
"ctx": "main",
"msg": "Successfully registered PrimaryOnlyService",
"attr": {
"service": "TenantMigrationDonorService",
"ns": "config.tenantMigrationDonors"
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.284+07:00"
},
"s": "I",
"c": "REPL",
"id": 5123008,
"ctx": "main",
"msg": "Successfully registered PrimaryOnlyService",
"attr": {
"service": "TenantMigrationRecipientService",
"ns": "config.tenantMigrationRecipients"
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.284+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 5945603,
"ctx": "main",
"msg": "Multi threading initialized"
},
{
"t": {
"$date": "2022-03-11T17:51:24.284+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 4615611,
"ctx": "initandlisten",
"msg": "MongoDB starting",
"attr": {
"pid": 40244,
"port": 27017,
"dbPath": "/data/db",
"architecture": "64-bit",
"host": "macs-MacBook-Pro.local"
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.284+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 23403,
"ctx": "initandlisten",
"msg": "Build Info",
"attr": {
"buildInfo": {
"version": "5.0.6",
"gitVersion": "212a8dbb47f07427dae194a9c75baec1d81d9259",
"modules": [],
"allocator": "system",
"environment": {
"distarch": "x86_64",
"target_arch": "x86_64"
}
}
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.284+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 51765,
"ctx": "initandlisten",
"msg": "Operating System",
"attr": {
"os": {
"name": "Mac OS X",
"version": "18.7.0"
}
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.284+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 21951,
"ctx": "initandlisten",
"msg": "Options set by command line",
"attr": {
"options": {
"net": {
"port": 27017
},
"storage": {
"dbPath": "/data/db"
}
}
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.286+07:00"
},
"s": "E",
"c": "CONTROL",
"id": 20568,
"ctx": "initandlisten",
"msg": "Error setting up listener",
"attr": {
"error": {
"code": 9001,
"codeName": "SocketException",
"errmsg": "Address already in use"
}
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "REPL",
"id": 4784900,
"ctx": "initandlisten",
"msg": "Stepping down the ReplicationCoordinator for shutdown",
"attr": {
"waitTimeMillis": 15000
}
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "COMMAND",
"id": 4784901,
"ctx": "initandlisten",
"msg": "Shutting down the MirrorMaestro"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "SHARDING",
"id": 4784902,
"ctx": "initandlisten",
"msg": "Shutting down the WaitForMajorityService"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "NETWORK",
"id": 4784905,
"ctx": "initandlisten",
"msg": "Shutting down the global connection pool"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "NETWORK",
"id": 4784918,
"ctx": "initandlisten",
"msg": "Shutting down the ReplicaSetMonitor"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "SHARDING",
"id": 4784921,
"ctx": "initandlisten",
"msg": "Shutting down the MigrationUtilExecutor"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "ASIO",
"id": 22582,
"ctx": "MigrationUtil-TaskExecutor",
"msg": "Killing all outstanding egress activity."
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "COMMAND",
"id": 4784923,
"ctx": "initandlisten",
"msg": "Shutting down the ServiceEntryPoint"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 4784925,
"ctx": "initandlisten",
"msg": "Shutting down free monitoring"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 4784927,
"ctx": "initandlisten",
"msg": "Shutting down the HealthLog"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 4784928,
"ctx": "initandlisten",
"msg": "Shutting down the TTL monitor"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 4784929,
"ctx": "initandlisten",
"msg": "Acquiring the global lock for shutdown"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "-",
"id": 4784931,
"ctx": "initandlisten",
"msg": "Dropping the scope cache for shutdown"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "FTDC",
"id": 4784926,
"ctx": "initandlisten",
"msg": "Shutting down full-time data capture"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 20565,
"ctx": "initandlisten",
"msg": "Now exiting"
},
{
"t": {
"$date": "2022-03-11T17:51:24.287+07:00"
},
"s": "I",
"c": "CONTROL",
"id": 23138,
"ctx": "initandlisten",
"msg": "Shutting down",
"attr": {
"exitCode": 48
}
}
]

timeUnit does not work after a flatten and flod transformation

Is it possible to use timeUnit after a flatten and flod transformation?
In the example below it doesnt work!
If I remove the timeUnit from the x axis it plots, but without the good things that come with the timeUnit.
Thanks
This is an example code that can be executed in the link below
https://vega.github.io/editor/#/edited
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Sales in a Year.",
"width": 500,
"height": 200,
"data": {
"values": [
{"timestamp": ["2019-01-01","2019-02-01","2019-03-01","2019-04-01","2019-05-01","2019-06-01",
"2019-07-01","2019-08-01","2019-09-01","2019-10-01","2019-11-01","2019-12-01"],
"cars" : [55, 43, 91, 81, 53, 19, 87, 52, 52, 44, 52, 52],
"bikes" : [12, 6, 2, 0, 0, 0, 0, 0, 0, 3, 9, 15]}
]
},
"transform": [
{"flatten": ["timestamp", "cars", "bikes"]},
{"fold": ["cars", "bikes"]}
],
"mark": {"type":"bar", "tooltip": true, "cornerRadiusEnd": 4},
"encoding": {
"x": {"field": "timestamp",
"timeUnit": "month",
"type": "ordinal",
"title": "",
"axis": {"labelAngle": 0}},
"y": {"field": "value",
"type": "quantitative",
"title": "Soiling Loss"},
"color":{"field": "key",
"type": "nominal"}
}
}
For convenience, strings in input data with a simple temporal encoding are automatically parsed as dates, but such parsing is not applied to data that is the result of a transformation.
In this case, you can do the parsing manually with a calculate transform (view in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Sales in a Year.",
"width": 500,
"height": 200,
"data": {
"values": [
{
"timestamp": [
"2019-01-01",
"2019-02-01",
"2019-03-01",
"2019-04-01",
"2019-05-01",
"2019-06-01",
"2019-07-01",
"2019-08-01",
"2019-09-01",
"2019-10-01",
"2019-11-01",
"2019-12-01"
],
"cars": [55, 43, 91, 81, 53, 19, 87, 52, 52, 44, 52, 52],
"bikes": [12, 6, 2, 0, 0, 0, 0, 0, 0, 3, 9, 15]
}
]
},
"transform": [
{"flatten": ["timestamp", "cars", "bikes"]},
{"fold": ["cars", "bikes"]},
{"calculate": "toDate(datum.timestamp)", "as": "timestamp"}
],
"mark": {"type": "bar", "tooltip": true, "cornerRadiusEnd": 4},
"encoding": {
"x": {
"field": "timestamp",
"timeUnit": "month",
"type": "ordinal",
"title": "",
"axis": {"labelAngle": 0}
},
"y": {"field": "value", "type": "quantitative", "title": "Soiling Loss"},
"color": {"field": "key", "type": "nominal"}
}
}

How to make a chart with SVG marker whose size increases in only one aspect or show a custom SVG marker for each data point in Vega/Vega-Lite?

I want to make a chart that has "spikes" as markers. And to denote the "severity" or the "quantitative" nature of the data, I want to scale the "spikes" longer but NOT wider. Currently, when I use the size encoding it increases the area of the "spike", which is undesirable. I used "aspect": false too but the results did not change -
Vega-Lite Spec
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": {"type": "point", "shape":"M -1 0 L0 -10 L1 0", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"size": {"field": "b", "type": "quantitative"}
}
}
Then I thought that maybe I can specify shape as an encoding and provide custom SVG that only changes in height, as PATH value to the data itself and pass that in the shape encoding. But of course that didn't work. Vega-Lite assigned its own shapes -
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28, "c":"M -1 0 L0 -10 L1 0"}, {"a": "B", "b": 55, "c":"M -1 0 L0 -5 L1 0"}, {"a": "C", "b": 43, "c":"M -1 0 L0 -20 L1 0"},
{"a": "D", "b": 91, "c":"M -1 0 L0 -1 L1 0"}
]
},
"mark": {"type": "point", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"shape": {"field": "c", "type": "quantitative"}
}
}
I also played around with url encoding in point mark as well as image mark, but they did not yield anything.
I saw Path Mark in Vega, which may be useful but I do not see it in Vega-Lite. If it can somehow be used then that is fine too.
Any idea how do I make this happen?
Main idea is to have the width of the marker same, but scale the height. I don't mind doing it via encoding channels or arguments/parameters or specifying an SVG PATH for each data point, either way is fine.
EDIT 1
After fiddling with vega, I got around to the following -
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A simple bar chart with embedded data.",
"background": "white",
"padding": 5,
"height": 700,
"style": "cell",
"data": [
{
"name": "source_0",
"values": [
{"a": "A", "b": 1.5, "c": 0},
{"a": "B", "b": 0.5, "c": 0},
{"a": "C", "b": 10, "c": 0},
{"a": "D", "b": 1, "c": 0}
]
},
{
"name": "data_0",
"source": "source_0",
"transform": [
{
"type": "filter",
"expr": "isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
}
]
}
],
"signals": [
{"name": "x_step", "value": 20},
{
"name": "width",
"update": "bandspace(domain('x').length, 1, 0.5) * x_step"
}
],
"marks": [
{
"name": "marks",
"type": "symbol",
"style": ["path"],
"from": {"data": "data_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "red"},
"stroke": {"value": "red"},
"strokeOpacity": {"value": 1},
"strokeWidth": {"value": 0.25},
"shape": {"value": "M -1 0 L0 -10 L1 0 Z"},
"ariaRoleDescription": {"value": "point"},
"description": {
"signal": "\"a\" + \": \" + (isValid(datum[\"a\"]) ? datum[\"a\"] : \"\"+datum[\"a\"]) + \"; \" + \"b\" + \": \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "x", "field": "a"},
"y": {"scale": "y", "field": "c"},
"scaleY": {"field": "b", "type": "quantitative"}
}
}
}
],
"scales": [
{
"name": "x",
"type": "point",
"domain": {"data": "data_0", "field": "a", "sort": true},
"range": {"step": {"signal": "x_step"}},
"padding": 0.5
},
{
"name": "y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
},
{
"name": "size",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [0, 361],
"zero": true
}
],
"axes": [
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "a",
"labelAlign": "right",
"labelAngle": 270,
"labelBaseline": "middle",
"labelOverlap": true,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "b",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
]
}
Which gives me -
I tried to convert this to Vega-Lite but it doesn't seem to work -
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 2}, {"a": "B", "b": 5}, {"a": "C", "b": 4},
{"a": "D", "b": 9}
]
},
"mark": {"type": "point", "shape":"M -1 0 L0 -10 L1 0", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
"encoding": {
"x": {"field": "a", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"},
"scaleY": {"field": "b", "type": "quantitative"}
}
}
Error
Property scaleY is not allowed.
Your second approach, of providing the SVG path in the shape encoding, will work if you set the scale to null (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28, "c":"M -1 0 L0 -10 L1 0"},
{"a": "B", "b": 55, "c":"M -1 0 L0 -5 L1 0"},
{"a": "C", "b": 43, "c":"M -1 0 L0 -20 L1 0"},
{"a": "D", "b": 91, "c":"M -1 0 L0 -1 L1 0"}
]
},
"mark": {"type": "point", "fill": "red", "opacity": 0.5, "stroke": "black", "strokeOpacity": 1 },
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"shape": {"field": "c", "type": "quantitative", "scale": null}
}
}
Vega-Lite does not provide the equivalent of Vega's ScaleY encoding, so if you want that approach you will have to work in Vega directly.

Derivative transform on Vega-Lite

I have a dataset that I need to plot the derivative function of it. Is there a way to perform the derivative of a series in Vega-Lite? Maybe a transform function or maybe with the calculate function? Is there a way to do it manually, X(t) - X(t-1)?
You can construct the operation you have in mind using a window transform to determine the adjacent value, followed by a calculate transform to compute the difference between the values.
Here is an example (vega editor link):
{
"data": {
"values": [
{"x": 0, "y": 0},
{"x": 1, "y": 0.8},
{"x": 2, "y": 0.9},
{"x": 3, "y": 0.1},
{"x": 4, "y": -0.8},
{"x": 5, "y": -1},
{"x": 6, "y": -0.3},
{"x": 7, "y": 0.7},
{"x": 8, "y": 1},
{"x": 9, "y": 0.4},
{"x": 10, "y": -0.5}
]
},
"transform": [
{
"window": [{"op": "last_value", "field": "y", "as": "y1"}],
"frame": [0, 1],
"sort": [{"field": "x", "order": "ascending"}]
},
{"calculate": "datum.y1 - datum.y", "as": "dy"}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"type": "quantitative", "field": "y"}
}
},
{
"mark": "line",
"encoding": {
"color": {"value": "red"},
"x": {"type": "quantitative", "field": "x"},
"y": {"type": "quantitative", "field": "dy"}
}
}
],
"config": {"view": {"width": 400, "height": 300}}
}

Printing the second frame of top output

When I execute the "top" command without any flags, I get
with about a dozen processes using at least 0.1% memory and CPU.
When I print this to a file using a cronjob set to run every minute, which executes the command below, however, I only get two or three processes using more than 0.1% memory and CPU.
The cronjob executes this command:
top -b -n 1 | sed -n '8,17p' | sed 's/^ *//' | tr -s ' ' | sed 's/ /", "/g ; s/^/{"/g ; s/$/"},/g ; 1s/^/[/ ; $ s/.$/]/ ; s/"/"pid": "/1 ; s/"/"user": "/5 ; s/"/"pr": "/9 ; s/"/"ni": "/13 ; s/"/"virt": "/17 ; s/"/"res": "/21 ; s/"/"shr": "/25 ; s/"/"s": "/29 ; s/"/"cpu": "/33 ; s/"/"mem": "/37 ; s/"/"time": "/41 ; s/"/"command": "/45 ; s/"\(-\?[0-9]\+\)"/\1/g'
which takes the first frame of "top" in batch mode and returns it in JSON format, e.g. something like this:
[
{
"pid": 7303,
"user": "fahclie+",
"pr": 39,
"ni": 19,
"virt": 255736,
"res": 14716,
"shr": 5556,
"s": "S",
"cpu": "400,9",
"mem": "0,2",
"time": "210:15.98",
"command": "FahCore_a4"
},
{
"pid": 1,
"user": "root",
"pr": 20,
"ni": 0,
"virt": 42040,
"res": 4664,
"shr": 2840,
"s": "S",
"cpu": "0,0",
"mem": "0,1",
"time": "0:01.16",
"command": "init"
},
{
"pid": 2,
"user": "root",
"pr": 20,
"ni": 0,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:00.00",
"command": "kthreadd"
},
{
"pid": 3,
"user": "root",
"pr": 20,
"ni": 0,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:00.13",
"command": "ksoftirqd/0"
},
{
"pid": 5,
"user": "root",
"pr": 0,
"ni": -20,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:00.00",
"command": "kworker/0:+"
},
{
"pid": 7,
"user": "root",
"pr": 20,
"ni": 0,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:03.58",
"command": "rcu_sched"
},
{
"pid": 8,
"user": "root",
"pr": 20,
"ni": 0,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:00.00",
"command": "rcu_bh"
},
{
"pid": 9,
"user": "root",
"pr": 20,
"ni": 0,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:01.26",
"command": "rcuos/0"
},
{
"pid": 10,
"user": "root",
"pr": 20,
"ni": 0,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:00.00",
"command": "rcuob/0"
},
{
"pid": 11,
"user": "root",
"pr": "rt",
"ni": 0,
"virt": 0,
"res": 0,
"shr": 0,
"s": "S",
"cpu": "0,0",
"mem": "0,0",
"time": "0:00.51",
"command": "migration/0"
}
]
Note how from the third processes onward, none of these processes use over 0.0% memory or CPU.
I suspect this is because the first frame of top is the one being written, while during the first frame, top is still gathering process information.
Is there a way to print the second frame to a file instead?
I found the answer thanks to jamesd in freenode's #bash IRC channel:
First we use top -b -n 2 to return the first 2 frames.
We then pipe these frames to grep -A10 'PID USER' (10 being the number of trailing context lines after the matching line, and 'PID USER' the beginning of the headings line), and in turn pipe the result of this to tail -n 10 to get rid of the headings line.
This shows only the top 10 processes of the second frame of top.
10 can of course be swapped out for the desired number of processes, and 'PID USER' for whichever fields come first in the headings line of your personal top configuration.

Resources