Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/.block

Last active August 29, 2019 18:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timelyportfolio/360518995b27d1b70be75d17702ee4db to your computer and use it in GitHub Desktop.
Save timelyportfolio/360518995b27d1b70be75d17702ee4db to your computer and use it in GitHub Desktop.
Download ZIP
vega-lite theme
Raw
.block
license: mit
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/vega-tooltip@0.4.3/build/vega-tooltip.min.css">
<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/vega/build/vega-core.js"></script>
<script src="https://unpkg.com/vega-lite/build/vega-lite.js"></script>
<script src="https://unpkg.com/vega-embed/build/vega-embed.js"></script>
<script src=""></script>
</head>
<body>
<h3><a href="https://github.com/antvis/g2/blob/master/src/theme/default.js" target="_blank">G2</a> theme for Vega</h3>
<div style="display:flex;">
<div style="width: 50%;">
<div id = "example-single" style = "width: 100%; height: 400px"></div>
</div>
<div style="width: 50%;">
<div id = "example-multiple" style = "width: 100%; height: 400px"></div>
</div>
</div>
<script>
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.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": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
var spec2 = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "https://vega.github.io/vega-lite/data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}
}
}
// experiment with vega-themes
var markColor = '#1890FF';
var theme = {
background: '#fff',
mark: {fill: markColor},
axis: {
domainWidth: 0.5,
gridDefault: true,
tickPadding: 2,
tickWidth: 0.5,
titleFontWeight: 'normal',
tickSize: 5
},
axisBand: {
gridDefault: false
},
axisX: {
gridWidth: 0.2
},
axisY: {
gridWidth: 0.4,
gridDash: [3]
},
legend: {
padding: 1,
labelFontSize: 11,
symbolType: 'square'
},
range: {
category: [
'#1890FF',
'#2FC25B',
'#FACC14',
'#223273',
'#8543E0',
'#13C2C2',
'#3436C7',
'#F04864'
]
}
};
var view = new vega.View(
vega.parse(
vl.compile(spec, {config: theme}).spec
),
theme
)
.renderer('svg') // set renderer (canvas or svg)
.initialize('#example-single') // initialize view within parent DOM container
.hover() // enable hover encode set processing
.run(); // run the dataflow and render the view
var view2 = new vega.View(
vega.parse(
vl.compile(spec2, {config: theme}).spec
),
theme
)
.renderer('svg') // set renderer (canvas or svg)
.initialize('#example-multiple') // initialize view within parent DOM container
.hover() // enable hover encode set processing
.run();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment