Skip to content

Instantly share code, notes, and snippets.

@ericsoco

ericsoco/multi-series.json

Created October 10, 2018 19:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ericsoco/657bf99ffb5088a0a1effebfdc1a193d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ericsoco/657bf99ffb5088a0a1effebfdc1a193d to your computer and use it in GitHub Desktop.
Download ZIP
Vega: Multi-series line chart w/ tooltips
Raw
multi-series.json
// The spec below creates a dataset, `tooltip_0_0`,
// that contains pivoted values for each groupby.
// These key:value pairs can be fed into a tooltip implementation
// to display the value of each line at each timestep.
{
"$schema": "https://vega.github.io/schema/vega/v4.0.json",
"description": "",
"width": 800,
"height": 600,
"padding": {
"top": 0,
"right": 0,
"bottom": 25,
"left": 25
},
"autosize": {
"type": "fit",
"contains": "padding"
},
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{
"events": "@tooltip-hitarea:mouseover",
"update": "datum"
},
{
"events": "@tooltip-hitarea:mouseout",
"update": "{}"
}
]
}
],
"data": [
{
"name": "input_0",
"values": [
{"ts": "2015-07-13 00:00:00", "city": "SF", "country": "US", "metrics1": 131},
{"ts": "2015-07-13 01:00:00", "city": "SF", "country": "US", "metrics1": 115},
{"ts": "2015-07-13 02:00:00", "city": "SF", "country": "US", "metrics1": 115},
{"ts": "2015-07-13 03:00:00", "city": "SF", "country": "US", "metrics1": 116},
{"ts": "2015-07-13 04:00:00", "city": "SF", "country": "US", "metrics1": 112},
{"ts": "2015-07-13 05:00:00", "city": "SF", "country": "US", "metrics1": 130},
{"ts": "2015-07-13 06:00:00", "city": "SF", "country": "US", "metrics1": 193},
{"ts": "2015-07-13 07:00:00", "city": "SF", "country": "US", "metrics1": 128},
{"ts": "2015-07-13 08:00:00", "city": "SF", "country": "US", "metrics1": 112},
{"ts": "2015-07-13 09:00:00", "city": "SF", "country": "US", "metrics1": 102},
{"ts": "2015-07-13 10:00:00", "city": "SF", "country": "US", "metrics1": 106},
{"ts": "2015-07-13 11:00:00", "city": "SF", "country": "US", "metrics1": 124},
{"ts": "2015-07-13 00:00:00", "city": "LA", "country": "US", "metrics1": 58},
{"ts": "2015-07-13 01:00:00", "city": "LA", "country": "US", "metrics1": 36},
{"ts": "2015-07-13 02:00:00", "city": "LA", "country": "US", "metrics1": 22},
{"ts": "2015-07-13 03:00:00", "city": "LA", "country": "US", "metrics1": 39},
{"ts": "2015-07-13 04:00:00", "city": "LA", "country": "US", "metrics1": 16},
{"ts": "2015-07-13 05:00:00", "city": "LA", "country": "US", "metrics1": 42},
{"ts": "2015-07-13 06:00:00", "city": "LA", "country": "US", "metrics1": 63},
{"ts": "2015-07-13 07:00:00", "city": "LA", "country": "US", "metrics1": 42},
{"ts": "2015-07-13 08:00:00", "city": "LA", "country": "US", "metrics1": 15},
{"ts": "2015-07-13 09:00:00", "city": "LA", "country": "US", "metrics1": 39},
{"ts": "2015-07-13 10:00:00", "city": "LA", "country": "US", "metrics1": 19},
{"ts": "2015-07-13 11:00:00", "city": "LA", "country": "US", "metrics1": 29},
{"ts": "2015-07-13 00:00:00", "city": "Beijing", "country": "China", "metrics1": 21},
{"ts": "2015-07-13 01:00:00", "city": "Beijing", "country": "China", "metrics1": 16},
{"ts": "2015-07-13 02:00:00", "city": "Beijing", "country": "China", "metrics1": 5},
{"ts": "2015-07-13 03:00:00", "city": "Beijing", "country": "China", "metrics1": 5},
{"ts": "2015-07-13 04:00:00", "city": "Beijing", "country": "China", "metrics1": 12},
{"ts": "2015-07-13 05:00:00", "city": "Beijing", "country": "China", "metrics1": 44},
{"ts": "2015-07-13 06:00:00", "city": "Beijing", "country": "China", "metrics1": 86},
{"ts": "2015-07-13 07:00:00", "city": "Beijing", "country": "China", "metrics1": 97},
{"ts": "2015-07-13 08:00:00", "city": "Beijing", "country": "China", "metrics1": 128},
{"ts": "2015-07-13 09:00:00", "city": "Beijing", "country": "China", "metrics1": 113},
{"ts": "2015-07-13 10:00:00", "city": "Beijing", "country": "China", "metrics1": 131},
{"ts": "2015-07-13 11:00:00", "city": "Beijing", "country": "China", "metrics1": 179},
{"ts": "2015-07-13 00:00:00", "city": "Hong Kong", "country": "China", "metrics1": 31},
{"ts": "2015-07-13 01:00:00", "city": "Hong Kong", "country": "China", "metrics1": 15},
{"ts": "2015-07-13 02:00:00", "city": "Hong Kong", "country": "China", "metrics1": 55},
{"ts": "2015-07-13 03:00:00", "city": "Hong Kong", "country": "China", "metrics1": 16},
{"ts": "2015-07-13 04:00:00", "city": "Hong Kong", "country": "China", "metrics1": 82},
{"ts": "2015-07-13 05:00:00", "city": "Hong Kong", "country": "China", "metrics1": 30},
{"ts": "2015-07-13 06:00:00", "city": "Hong Kong", "country": "China", "metrics1": 93},
{"ts": "2015-07-13 07:00:00", "city": "Hong Kong", "country": "China", "metrics1": 28},
{"ts": "2015-07-13 08:00:00", "city": "Hong Kong", "country": "China", "metrics1": 12},
{"ts": "2015-07-13 09:00:00", "city": "Hong Kong", "country": "China", "metrics1": 42},
{"ts": "2015-07-13 10:00:00", "city": "Hong Kong", "country": "China", "metrics1": 76},
{"ts": "2015-07-13 11:00:00", "city": "Hong Kong", "country": "China", "metrics1": 14}
]
},
{
"name": "output_0_0",
"source": "input_0",
"transform": [
{
"type": "formula",
"as": "ts_time",
"expr": "datetime(time(datum[\"ts\"]) + timezoneoffset(datum[\"ts\"]) * 60000)"
},
{
"type": "formula",
"as": "metrics1_number",
"expr": "toNumber(datum[\"metrics1\"])"
},
{
"type": "aggregate",
"groupby": [
"ts_time",
"city"
],
"fields": [
"metrics1_number",
"metrics1_number",
"metrics1_number"
],
"ops": [
"count",
"valid",
"sum"
],
"as": [
"metrics1_count",
"metrics1_valid",
"metrics1_aggregate"
]
},
{
"type": "collect",
"sort": {
"field": [
"ts_time",
"city"
],
"order": [
"ascending",
"ascending"
]
}
},
{
"type": "project",
"fields": [
"ts_time",
"metrics1_aggregate",
"city"
],
"as": [
"x_out_0",
"y_out_0"
]
}
]
},
{
"name": "tooltip_0_0",
"source": "output_0_0",
"transform": [
{
"type": "pivot",
"field": "city",
"value": "y_out_0",
"groupby": [
"x_out_0"
]
}
]
}
],
"scales": [
{
"name": "x_0_0",
"type": "time",
"domain": {
"data": "output_0_0",
"field": "x_out_0"
},
"nice": false,
"zero": false,
"range": "width"
},
{
"name": "y_0_0",
"type": "linear",
"domain": {
"data": "output_0_0",
"fields": [
"y_out_0"
]
},
"nice": true,
"zero": true,
"range": "height"
},
{
"name": "x_0_tooltip",
"type": "band",
"domain": {
"data": "output_0_0",
"field": "x_out_0"
},
"range": [
0,
{
"signal": "width * data(\"output_0_0\").length / (data(\"output_0_0\").length - 1)"
}
],
"zero": false,
"padding": 0,
"round": true
},
{
"name": "y_0_tooltip",
"type": "linear",
"domain": [
0,
1
],
"range": "height",
"zero": true
},
{
"name": "color_0_0",
"type": "ordinal",
"domain": [
"Beijing",
"Hong Kong",
"LA",
"SF"
],
"range": [
"#88572C",
"#FF991F",
"#DDB27C",
"#11939a"
]
},
{
"name": "colorUnique_0_0",
"type": "ordinal",
"domain": [
"Beijing",
"Hong Kong",
"LA",
"SF"
],
"range": [
"#88572C",
"#FF991F",
"#DDB27C",
"#11939a"
]
}
],
"projections": [],
"axes": [
{
"orient": "left",
"scale": "y_0_0",
"title": "",
"grid": false,
"zindex": 10,
"labelOverlap": true,
"encode": {
"labels": {
"update": {
"text": {
"signal": "replace(replace(replace(format(datum.value, '.2s'), /.0*D$/, ''), /G$/, 'B'), /.*m$/, format(datum.value, '.2f'))"
}
}
}
}
},
{
"orient": "bottom",
"scale": "x_0_0",
"title": "",
"grid": false,
"zindex": 10,
"labelOverlap": true,
"encode": {
"labels": {
"update": {
"text": {
"signal": "timeFormat(datum.value, '%b %e')"
}
}
}
}
}
],
"legends": [
{
"stroke": "colorUnique_0_0",
"orient": "top",
"offset": 20,
"direction": "horizontal",
"encode": {
"symbols": {
"name": "legendSymbol",
"interactive": true,
"update": {
"size": {
"value": 150
},
"shape": {
"value": "M -1 0 H 1"
},
"strokeWidth": {
"value": 2
}
}
},
"labels": {
"name": "legendLabel",
"interactive": true,
"update": {
"dx": {
"value": -20
},
"dy": {
"value": 10
}
}
}
},
"zindex": 2
}
],
"marks": [
{
"type": "group",
"clip": true,
"from": {
"facet": {
"name": "faceted_0_0",
"data": "output_0_0",
"groupby": "city"
}
},
"marks": [
{
"type": "line",
"interactive": false,
"clip": false,
"from": {
"data": "faceted_0_0"
},
"style": "lineDefault",
"encode": {
"enter": {
"x": {
"scale": "x_0_0",
"field": "x_out_0"
},
"y": {
"scale": "y_0_0",
"field": "y_out_0"
},
"stroke": {
"scale": "color_0_0",
"field": "city"
}
},
"update": {
"x": {
"scale": "x_0_0",
"field": "x_out_0"
},
"y": {
"scale": "y_0_0",
"field": "y_out_0"
},
"stroke": {
"scale": "color_0_0",
"field": "city"
}
}
}
}
]
},
{
"type": "rule",
"interactive": false,
"clip": true,
"zindex": 20,
"encode": {
"enter": {},
"update": {
"x": {
"scale": "x_0_0",
"signal": "tooltip.x_out_0"
},
"y": {
"scale": "y_0_tooltip",
"value": 1
},
"y2": {
"scale": "y_0_tooltip",
"value": 0
}
}
}
},
{
"name": "tooltip-hitarea",
"type": "rect",
"interactive": true,
"clip": true,
"from": {
"data": "tooltip_0_0"
},
"encode": {
"enter": {
"xc": {
"scale": "x_0_0",
"field": "x_out_0"
},
"y": {
"scale": "y_0_tooltip",
"value": 1
},
"y2": {
"scale": "y_0_tooltip",
"value": 0
},
"width": {
"scale": "x_0_tooltip",
"band": 1
},
"fill": {
"value": "#00ff00"
},
"fillOpacity": {
"value": 0
}
},
"update": {
"xc": {
"scale": "x_0_0",
"field": "x_out_0"
},
"y": {
"scale": "y_0_tooltip",
"value": 1
},
"y2": {
"scale": "y_0_tooltip",
"value": 0
},
"width": {
"scale": "x_0_tooltip",
"band": 1
},
"fill": {
"value": "#00ff00"
},
"fillOpacity": {
"value": 0
}
}
}
}
],
"usermeta": {
"types": [
"LineChart"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment