Skip to content

Instantly share code, notes, and snippets.

@jakevdp
Last active July 29, 2020 20:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jakevdp/1643ebb6853e76c32e47a969f415f3ea to your computer and use it in GitHub Desktop.
Save jakevdp/1643ebb6853e76c32e47a969f415f3ea to your computer and use it in GitHub Desktop.
Example of an interactive time-series plot
license: MIT
counts date
144 2018-01-02
446 2018-01-03
508 2018-01-04
540 2018-01-05
558 2018-01-06
546 2018-01-07
299 2018-01-08
315 2018-01-09
591 2018-01-10
647 2018-01-11
678 2018-01-12
645 2018-01-13
605 2018-01-14
327 2018-01-15
299 2018-01-16
582 2018-01-17
611 2018-01-18
644 2018-01-19
681 2018-01-20
639 2018-01-21
356 2018-01-22
351 2018-01-23
626 2018-01-24
639 2018-01-25
668 2018-01-26
663 2018-01-27
679 2018-01-28
427 2018-01-29
407 2018-01-30
674 2018-01-31
705 2018-02-01
722 2018-02-02
735 2018-02-03
708 2018-02-04
442 2018-02-05
437 2018-02-06
723 2018-02-07
759 2018-02-08
790 2018-02-09
727 2018-02-10
711 2018-02-11
443 2018-02-12
456 2018-02-13
765 2018-02-14
780 2018-02-15
832 2018-02-16
820 2018-02-17
801 2018-02-18
533 2018-02-19
520 2018-02-20
808 2018-02-21
825 2018-02-22
867 2018-02-23
863 2018-02-24
843 2018-02-25
584 2018-02-26
589 2018-02-27
878 2018-02-28
880 2018-03-01
915 2018-03-02
908 2018-03-03
877 2018-03-04
601 2018-03-05
591 2018-03-06
912 2018-03-07
963 2018-03-08
1000 2018-03-09
1031 2018-03-10
1040 2018-03-11
788 2018-03-12
772 2018-03-13
1024 2018-03-14
1045 2018-03-15
1051 2018-03-16
1035 2018-03-17
1024 2018-03-18
751 2018-03-19
752 2018-03-20
1028 2018-03-21
1038 2018-03-22
1036 2018-03-23
1009 2018-03-24
990 2018-03-25
739 2018-03-26
698 2018-03-27
1000 2018-03-28
1010 2018-03-29
1024 2018-03-30
1028 2018-03-31
1030 2018-04-01
<!DOCTYPE html>
<head>
<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>
<style>
body {
font-family: sans-serif;
}
.vega-actions a {
padding: 0.2em;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "spec.json";
vegaEmbed('#vis', spec).catch(console.warn);
</script>
</body>
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
"data": {"url": "data.csv"},
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "date", "timeUnit": "date", "type": "ordinal"},
"y": {"field": "counts", "type": "quantitative"},
"color": {"field": "date", "timeUnit": "month", "type": "nominal"}
}
},
{
"mark": "point",
"selection": {
"detail": {
"type": "single",
"on": "mouseover",
"nearest": true
}
},
"encoding": {
"x": {"field": "date", "timeUnit": "date", "type": "ordinal"},
"y": {"field": "counts", "type": "quantitative"},
"color": {"field": "date", "timeUnit": "month", "type": "nominal"},
"size": {
"condition": {
"selection": {"not": "detail"}, "value": 50
},
"value": 300
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dy": -15
},
"encoding": {
"x": {"field": "date", "timeUnit": "date", "type": "ordinal"},
"y": {"field": "counts", "type": "quantitative"},
"color": {"field": "date", "timeUnit": "month", "type": "nominal"},
"text": {
"condition": {
"selection": {"not": "detail"}, "value": " "
},
"field": "counts"
}
}
}],
"width": 600,
"height": 400
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment