Skip to content

Instantly share code, notes, and snippets.

@amzoss
Last active October 31, 2018 18:29
Show Gist options
  • Save amzoss/95ba3f30b2774da788de75eb2b0b745a to your computer and use it in GitHub Desktop.
Save amzoss/95ba3f30b2774da788de75eb2b0b745a to your computer and use it in GitHub Desktop.
test gantt
<!DOCTYPE html>
<head>
<title>Visualizing the Future Symposium</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@4.2.0/build/vega.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc6/build/vega-lite.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.19.2/build/vega-embed.js"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Visualizing the Future Schedule of Activities</h1>
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
var spec = "vega-spec2.json";
vegaEmbed('#vis', spec, {defaultStyle: true, renderer: 'svg'}).catch(console.warn);
//var view = new vega.View(vega.parse(spec))
// .renderer('svg') // set renderer (canvas or svg)
// .initialize('#vis') // initialize view within parent DOM container
// .hover() // enable hover encode set processing
// .run(); // run the dataflow and render the view
//var view = new vega.View(vega.parse(vl.compile(spec).spec))
//.initialize('#vis')
//.run();
//vegaTooltip.vega(view);
</script>
</body>
</html>
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.0.0-rc6.json",
"description": "A simple bar chart with ranged data (aka Gantt Chart).",
"data": {
"values": [
{"task": "A","start": 1, "end": 3},
{"task": "B","start": 3, "end": 8},
{"task": "C","start": 8, "end": 10}
]
},
"mark": "bar",
"encoding": {
"y": {"field": "task", "type": "ordinal"},
"x": {"field": "start", "type": "quantitative"},
"x2": {"field": "end", "type": "quantitative"}
}
}
{
"width": 600,
"height": 300,
"$schema": "https://vega.github.io/schema/vega-lite/v3.0.0-rc6.json",
"description": "A simple bar chart with ranged data (aka Gantt Chart).",
"data": {"url": "https://docs.google.com/spreadsheets/d/e/2PACX-1vQaiII93n4oKbW_Vr9AbsfGwphC1JBJ9D3eTS5SWHnL4kZ3z-M3spJ24MEEz9cupSgmMY72kjZfybKV/pub?gid=0&single=true&output=csv",
"format": {"type": "csv","parse":{"start": "date","end": "date"}}},
"mark": "bar",
"encoding": {
"y": {"field": "task", "type": "nominal", "sort": "null", "axis": {"title": ""}},
"x": {"field": "start", "type": "temporal", "axis": {"title": "date", "format": "%b %Y", "tickCount": 8}},
"x2": {"field": "end", "type": "temporal", "axis": {"title": "", "format": "%b %Y", "tickCount": 8}},
"tooltip": [{"field": "task", "type": "nominal", "title": "activity"},
{"field": "start", "type": "temporal", "format": "%m/%d/%Y"},
{"field": "end", "type": "temporal", "format": "%m/%d/%Y"}],
"color": {
"field": "highlight",
"type": "nominal",
"legend": null,
"scale": {"range": ["#cccccc", "#000000"]}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment