Skip to content

Instantly share code, notes, and snippets.

@domoritz

domoritz/.block

Created July 3, 2018 18:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save domoritz/71f37aafa0a45ed8cbcbf48ee3e9828e to your computer and use it in GitHub Desktop.
Save domoritz/71f37aafa0a45ed8cbcbf48ee3e9828e to your computer and use it in GitHub Desktop.
Download ZIP
Vega/vegalite theme issue
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="vis" style="width:1200px; height:600px; background: white; padding: 10px; display: inline-block;"></div>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
const specs = "timeline.vg.json"
const theme = {
"area": { "fill": '#0195E5' },
"path": { "stroke": '#b3bbbd' , "fill": "white"},
"rect": { "fill": '#0195E5' },
"shape": { "stroke": '#b3bbbd' , "fill": "white"},
};
opt = {"actions":false,
"renderer": 'svg', "config": theme,
"tooltip": true
};
vegaEmbed('#vis', specs, opt)
.then(function(result) {
result.view.run();
})
.catch(console.warn);
Raw
timeline.vg.json
{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"autosize": "fit",
"padding": 5,
"width": 1000,
"height": 600,
"data": [
{"name": "brush_store"},
{
"name": "source_0",
"url": "https://vega.github.io/vega-lite/data/sp500.csv",
"format": {"type": "csv"}
},
{
"name": "data_0",
"source": "source_0",
"transform": [
{"type": "formula", "expr": "toDate(datum[\"date\"])", "as": "date"},
{"type": "formula", "expr": "toNumber(datum[\"price\"])", "as": "price"}
]
},
{
"name": "data_1",
"source": "source_0",
"transform": [
{"type": "formula", "expr": "toDate(datum[\"date\"])", "as": "date"},
{"type": "formula", "expr": "toNumber(datum[\"price\"])", "as": "price"}
]
}
],
"signals": [
{"name": "concat_0_height", "value": 400},
{"name": "concat_1_height", "value": 60},
{
"name": "unit",
"value": {},
"on": [
{"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}
]
}
],
"layout": {
"padding": {"row": 10, "column": 10},
"columns": 1,
"bounds": "full",
"align": "each"
},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "width"},
"height": {"signal": "concat_0_height"}
}
},
"marks": [
{
"name": "concat_0_marks",
"type": "area",
"clip": true,
"style": ["area"],
"sort": {"field": "datum[\"date\"]", "order": "descending"},
"from": {"data": "data_0"},
"encode": {
"update": {
"orient": {"value": "vertical"},
"fill": {"value": "#4c78a8"},
"x": {"scale": "concat_0_x", "field": "date"},
"y": {"scale": "concat_0_y", "field": "price"},
"y2": {"scale": "concat_0_y", "value": 0},
"defined": {
"signal": "datum[\"date\"] !== null && !isNaN(datum[\"date\"]) && datum[\"price\"] !== null && !isNaN(datum[\"price\"])"
}
}
}
}
],
"axes": [
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": false,
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"zindex": 1
},
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"gridScale": "concat_0_y",
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": false,
"title": "price",
"labelOverlap": true,
"tickCount": {"signal": "ceil(concat_0_height/40)"},
"zindex": 1
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": true,
"tickCount": {"signal": "ceil(concat_0_height/40)"},
"gridScale": "concat_0_x",
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_group",
"style": "cell",
"encode": {
"update": {
"width": {"signal": "width"},
"height": {"signal": "concat_1_height"}
}
},
"signals": [
{
"name": "brush_x",
"value": [],
"on": [
{
"events": {
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
"update": "[x(unit), x(unit)]"
},
{
"events": {
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
{"source": "window", "type": "mouseup"}
]
},
"update": "[brush_x[0], clamp(x(unit), 0, width)]"
},
{
"events": {"signal": "brush_scale_trigger"},
"update": "[scale(\"concat_1_x\", brush_date[0]), scale(\"concat_1_x\", brush_date[1])]"
},
{
"events": {"signal": "brush_translate_delta"},
"update": "clampRange(panLinear(brush_translate_anchor.extent_x, brush_translate_delta.x / span(brush_translate_anchor.extent_x)), 0, width)"
},
{
"events": {"signal": "brush_zoom_delta"},
"update": "clampRange(zoomLinear(brush_x, brush_zoom_anchor.x, brush_zoom_delta), 0, width)"
}
]
},
{
"name": "brush_date",
"on": [
{
"events": {"signal": "brush_x"},
"update": "brush_x[0] === brush_x[1] ? null : invert(\"concat_1_x\", brush_x)"
}
]
},
{
"name": "brush_scale_trigger",
"update": "(!isArray(brush_date) || (+invert(\"concat_1_x\", brush_x)[0] === +brush_date[0] && +invert(\"concat_1_x\", brush_x)[1] === +brush_date[1])) ? brush_scale_trigger : {}"
},
{
"name": "brush_tuple",
"on": [
{
"events": [{"signal": "brush_date"}],
"update": "brush_date ? {unit: \"concat_1\", intervals: [{encoding: \"x\", field: \"date\", extent: brush_date}]} : null"
}
]
},
{
"name": "brush_translate_anchor",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit), extent_x: slice(brush_x)}"
}
]
},
{
"name": "brush_translate_delta",
"value": {},
"on": [
{
"events": [
{
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
},
{"source": "window", "type": "mouseup"}
]
}
],
"update": "{x: brush_translate_anchor.x - x(unit), y: brush_translate_anchor.y - y(unit)}"
}
]
},
{
"name": "brush_zoom_anchor",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit)}"
}
]
},
{
"name": "brush_zoom_delta",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"force": true,
"update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name": "brush_modify",
"on": [
{
"events": {"signal": "brush_tuple"},
"update": "modify(\"brush_store\", brush_tuple, true)"
}
]
}
],
"marks": [
{
"name": "brush_brush_bg",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {"value": "#333"},
"fillOpacity": {"value": 0.125}
},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"value": 0
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"field": {"group": "height"}
},
{"value": 0}
]
}
}
},
{
"name": "concat_1_marks",
"type": "area",
"style": ["area"],
"sort": {"field": "datum[\"date\"]", "order": "descending"},
"from": {"data": "data_1"},
"encode": {
"update": {
"orient": {"value": "vertical"},
"fill": {"value": "#4c78a8"},
"x": {"scale": "concat_1_x", "field": "date"},
"y": {"scale": "concat_1_y", "field": "price"},
"y2": {"scale": "concat_1_y", "value": 0},
"defined": {
"signal": "datum[\"date\"] !== null && !isNaN(datum[\"date\"]) && datum[\"price\"] !== null && !isNaN(datum[\"price\"])"
}
}
}
},
{
"name": "brush_brush",
"type": "rect",
"clip": true,
"encode": {
"enter": {"fill": {"value": "transparent"}},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"value": 0
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_1\"",
"field": {"group": "height"}
},
{"value": 0}
],
"stroke": [
{"test": "brush_x[0] !== brush_x[1]", "value": "white"},
{"value": null}
]
}
}
}
],
"axes": [
{
"scale": "concat_1_x",
"orient": "bottom",
"grid": false,
"title": "date",
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"encode": {
"labels": {
"update": {"text": {"signal": "timeFormat(datum.value, '%Y')"}}
}
},
"zindex": 1
},
{
"scale": "concat_1_x",
"orient": "bottom",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"gridScale": "concat_1_y",
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_y",
"orient": "left",
"grid": false,
"title": "price",
"tickCount": 3,
"labelOverlap": true,
"zindex": 1
}
]
}
],
"scales": [
{
"name": "concat_0_x",
"type": "time",
"domain": {"data": "data_0", "field": "date"},
"domainRaw": {
"signal": "vlIntervalDomain(\"brush_store\", null, \"date\")"
},
"range": [0, {"signal": "width"}]
},
{
"name": "concat_0_y",
"type": "linear",
"domain": {"data": "data_0", "field": "price"},
"range": [{"signal": "concat_0_height"}, 0],
"nice": true,
"zero": true
},
{
"name": "concat_1_x",
"type": "time",
"domain": {"data": "data_1", "field": "date"},
"range": [0, {"signal": "width"}]
},
{
"name": "concat_1_y",
"type": "linear",
"domain": {"data": "data_1", "field": "price"},
"range": [{"signal": "concat_1_height"}, 0],
"nice": true,
"zero": true
}
],
"config": {"axisY": {"minExtent": 30}}
}
Raw
timeline.vl.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"url": "https://vega.github.io/vega-lite/data/sp500.csv"
},
"vconcat": [
{
"width": 1000,
"mark": "area",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {
"domain": {
"selection": "brush"
}
},
"axis": {
"title": ""
}
},
"y": {
"field": "price",
"type": "quantitative"
}
}
},
{
"width": 1000,
"height": 60,
"mark": "area",
"selection": {
"brush": {
"type": "interval",
"encodings": [
"x"
]
}
},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"axis": {
"format": "%Y"
}
},
"y": {
"field": "price",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false
}
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment