Hi,
Quick summary of what I want the visualization to be like ...
I have multiple IHS proxys which route requests to a bunch of servers. I want to draw a parallel coordinates graph that would show the number of requests getting routed from each IHS proxy to each server. That way, if there is an imbalance in the routing logic, we would come to know. I want the thickness of the lines to indicate the number of requests (I also plan to add the tooltip later which would show the number of requests).
My data:
All the IHS logs are sent to elastic. For easy sharing and simulation, I have uploaded the output of the elastic query to gist.github.com and running the visualization on that.
High Level Logic:
Extract IHS and AppServer fields from elastic index (now gist.github json) and form a dataset. Let's call it ihsdata.
On ihsdata, apply group by on IHS and AppServer fields, and for a new dataset ihssummary.
Now ihssummary has data IHS-AppServer-count.
...
...
Create a scale 'StrokeWidth' over a range [1-10] (which is what I want my strokewidth to be) on the domain ihssummary.count.
...
...
Draw the parallel coordinates visualization by specifying strokewidth on scale "StrokeWidth" and field "{parent: {datum: count}}"
Problem:
All my lines are coming with same width.
My Vega Code
{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"width": 700,
"height": 400,
"padding": 5,
"autosize": "pad",
"config": {
"axisY": {
"titleX": -2,
"titleY": 410,
"titleAngle": 0,
"titleAlign": "right",
"titleBaseline": "top"
}
},
"data": [
{
"name": "ihsdata",
"url": "https://gist.githubusercontent.com/tanmaydeuskar/630fbc30e94322f7442ea1f2042c53ec/raw/889bf99786e7463afbafa1c2eb8278278c08e166/ihs_vega_es_output.json",
"format": {"property": "hits.hits"},
"transform": [
{"type": "formula", "as": "IHS", "expr": "datum._source.IHS"},
{"type": "formula", "as": "AppServer", "expr": "datum._source.AppServer"}
]
},
{
"name": "ihssummary", "source": "ihsdata",
"transform": [
{ "type": "aggregate", "groupby": ["IHS", "AppServer"] }
]
},
{
"name": "distinct-ihs", "source": "ihssummary",
"transform": [
{ "type": "aggregate", "groupby": ["IHS"] },
{ "type": "collect", "sort": {"field": "IHS"} }
]
},
{
"name": "distinct-appserver", "source": "ihssummary",
"transform": [
{ "type": "aggregate", "groupby": ["AppServer"] },
{ "type": "collect", "sort": {"field": "AppServer"} }
]
},
{
"name": "fields",
"values": [
"IHS",
"AppServer"
]
}
],
"scales": [
{
"name": "ord", "type": "point",
"range": "width", "round": true,
"domain": {"data": "fields", "field": "data"}
},
{
"name": "IHS", "type": "point",
"range": "height", "round": true,
"domain": {"data": "distinct-ihs", "field": "IHS"}
},
{
"name": "AppServer", "type": "point",
"range": "height", "round": true,
"domain": {"data": "distinct-appserver", "field": "AppServer"}
},
{
"name": "StrokeWidth", "type": "linear",
"range": [1,10],
"domain": {"data": "ihssummary", "field": "count"}
}
],
"axes": [
{
"orient": "left", "zindex": 1,
"scale": "IHS", "title": "IHS",
"offset": {"scale": "ord", "value": "IHS", "mult": -1}
},
{
"orient": "left", "zindex": 1,
"scale": "AppServer", "title": "AppServer",
"offset": {"scale": "ord", "value": "AppServer", "mult": -1}
}
],
"marks": [
{
"type": "group",
"from": {"data": "ihssummary"},
"marks": [
{
"type": "line",
"from": {"data": "fields"},
"encode": {
"enter": {
"x": {"scale": "ord", "field": "data"},
"y": {
"scale": {"datum": "data"},
"field": {"parent": {"datum": "data"}}
},
"stroke": {"value": "steelblue"},
"strokeWidth": {
"scale": "StrokeWidth",
"field": {"parent": {"datum": "count"}}
},
"strokeOpacity": {
"value": 1
}
}
}
}
]
}
]
}
This is how the visualization looks
Some of the vegadebug information (in case it helps):
Vega debug of dataset ihssummary
VEGA_DEBUG.view.data("ihssummary")
(15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {IHS: "IHS1", AppServer: "Server2", count: 67, Symbol(vega_id): 8469}
1: {IHS: "IHS3", AppServer: "Server3", count: 21, Symbol(vega_id): 8470}
2: {IHS: "IHS1", AppServer: "Server4", count: 70, Symbol(vega_id): 8471}
3: {IHS: "IHS1", AppServer: "Server1", count: 104, Symbol(vega_id): 8472}
4: {IHS: "IHS1", AppServer: "Server3", count: 63, Symbol(vega_id): 8473}
5: {IHS: "IHS2", AppServer: "Server3", count: 29, Symbol(vega_id): 8474}
6: {IHS: "IHS3", AppServer: "Server5", count: 11, Symbol(vega_id): 8475}
7: {IHS: "IHS2", AppServer: "Server1", count: 41, Symbol(vega_id): 8476}
8: {IHS: "IHS1", AppServer: "Server5", count: 38, Symbol(vega_id): 8477}
9: {IHS: "IHS2", AppServer: "Server4", count: 18, Symbol(vega_id): 8478}
10: {IHS: "IHS3", AppServer: "Server1", count: 29, Symbol(vega_id): 8479}
11: {IHS: "IHS3", AppServer: "Server4", count: 29, Symbol(vega_id): 8480}
12: {IHS: "IHS3", AppServer: "Server2", count: 20, Symbol(vega_id): 8481}
13: {IHS: "IHS2", AppServer: "Server2", count: 19, Symbol(vega_id): 8482}
14: {IHS: "IHS2", AppServer: "Server5", count: 11, Symbol(vega_id): 8483}
length: 15
__proto__: Array(0)
Any idea where I am going wrong? Thanks in advance for help.
- Parag
Probably my QA background helped