Skip to content

Instantly share code, notes, and snippets.

@ndrhzn

ndrhzn/average_daily_temp.csv

Last active January 5, 2019 23:43
Show Gist options
  • Save ndrhzn/b46560b4d2cfca7b7fbee43622b3c528 to your computer and use it in GitHub Desktop.
Save ndrhzn/b46560b4d2cfca7b7fbee43622b3c528 to your computer and use it in GitHub Desktop.
Download ZIP
Vega-Lite - Ribbon & Line - Responsive Data Visualization
Raw
average_daily_temp.csv
date temp_mean temp_min temp_max month season
2016-01-01 -12 -14 -10 January Winter
2016-01-02 -10.5 -15 -9 January Winter
2016-01-03 -15 -16 -12 January Winter
2016-01-04 -14 -17 -12 January Winter
2016-01-05 -8 -12 -6 January Winter
2016-01-06 -3.5 -6 0 January Winter
2016-01-07 -5 -6 -4 January Winter
2016-01-08 -4.5 -11 -1 January Winter
2016-01-09 -4 -7 3 January Winter
2016-01-10 0 -1 1 January Winter
2016-01-11 2.5 -1 5 January Winter
2016-01-12 4 1 7 January Winter
2016-01-13 1 0 4 January Winter
2016-01-14 -1 -6 1 January Winter
2016-01-15 -2 -3 -1 January Winter
2016-01-16 -2 -9 -1 January Winter
2016-01-17 -9 -16 -6 January Winter
2016-01-18 -6 -10 -4 January Winter
2016-01-19 -6 -12 -5 January Winter
2016-01-20 -7 -11 -4 January Winter
2016-01-21 -5 -7 -4 January Winter
2016-01-22 -5.5 -17 -4 January Winter
2016-01-23 -6 -16 -1 January Winter
2016-01-24 -6 -18 -3 January Winter
2016-01-25 -2 -3 0 January Winter
2016-01-26 1 0 3 January Winter
2016-01-27 3 2 5 January Winter
2016-01-28 5 3 9 January Winter
2016-01-29 1 -2 5 January Winter
2016-01-31 3 -1 7 January Winter
2016-02-01 1 -2 2 February Winter
2016-02-02 6 2 11 February Winter
2016-02-03 7 4 9 February Winter
2016-02-04 0 -1 3 February Winter
2016-02-05 0 -2 1 February Winter
2016-02-06 -1 -2 5 February Winter
2016-02-07 1 -4 5 February Winter
2016-02-08 6 -1 9 February Winter
2016-02-09 7 6 12 February Winter
2016-02-10 6 4 10 February Winter
2016-02-11 2 0 5 February Winter
2016-02-12 2 -2 7 February Winter
2016-02-13 4 1 5 February Winter
2016-02-14 4 0 9 February Winter
2016-02-15 8 4 15 February Winter
2016-02-16 4 2 7 February Winter
2016-02-17 2.5 2 5 February Winter
2016-02-18 5 4 6 February Winter
2016-02-19 3 2 5 February Winter
2016-02-20 1 -4 2 February Winter
2016-02-21 3 -4 5 February Winter
2016-02-22 11 4 14 February Winter
2016-02-23 9 2 11 February Winter
2016-02-24 0.5 -1 3 February Winter
2016-02-25 0 -4 5 February Winter
2016-02-26 0 -5 2 February Winter
2016-02-27 1 -7 3 February Winter
2016-02-28 4.5 1 12 February Winter
2016-02-29 4 1 6 February Winter
2016-03-01 6 2 10 March Spring
2016-03-02 1 -1 4 March Spring
2016-03-03 2.5 -3 5 March Spring
2016-03-04 3 2 5 March Spring
2016-03-05 4 2 9 March Spring
2016-03-06 8 2 13 March Spring
2016-03-07 7 6 9 March Spring
2016-03-08 5.5 0 8 March Spring
2016-03-09 4 -2 6 March Spring
2016-03-10 7 5 10 March Spring
2016-03-11 5 4 8 March Spring
2016-03-12 5 4 6 March Spring
2016-03-13 4 1 5 March Spring
2016-03-14 3 -2 7 March Spring
2016-03-15 1 0 3 March Spring
2016-03-16 1 -2 6 March Spring
2016-03-17 4 -4 9 March Spring
2016-03-18 5 2 11 March Spring
2016-03-19 1 -2 3 March Spring
2016-03-20 3 -1 6 March Spring
2016-03-21 3 0 5 March Spring
2016-03-22 2 0 7 March Spring
2016-03-23 2.5 2 6 March Spring
2016-03-24 0 -2 2 March Spring
2016-03-25 0 -7 7 March Spring
2016-03-26 3.5 -3 7 March Spring
2016-03-27 3 -3 11 March Spring
2016-03-28 4 -2 13 March Spring
2016-03-29 7 -1 12 March Spring
2016-03-30 8 1 15 March Spring
2016-04-01 7 3 16 April Spring
2016-04-02 4 0 11 April Spring
2016-04-03 9 -1 15 April Spring
2016-04-04 13.5 3 22 April Spring
2016-04-05 14 8 23 April Spring
2016-04-06 17 8 24 April Spring
2016-04-07 14 9 20 April Spring
2016-04-08 15 11 19 April Spring
2016-04-09 15 12 20 April Spring
2016-04-10 11 10 14 April Spring
2016-04-11 10 9 10 April Spring
2016-04-12 9.5 8 12 April Spring
2016-04-13 10 9 17 April Spring
2016-04-14 11 6 18 April Spring
2016-04-15 9 6 14 April Spring
2016-04-16 14.5 8 20 April Spring
2016-04-17 17.5 7 22 April Spring
2016-04-18 11 7 14 April Spring
2016-04-19 8 5 13 April Spring
2016-04-20 6 3 10 April Spring
2016-04-21 6.5 2 13 April Spring
2016-04-22 10 3 16 April Spring
2016-04-23 10 2 14 April Spring
2016-04-24 7.5 4 13 April Spring
2016-04-25 2 1 4 April Spring
2016-04-26 3 1 10 April Spring
2016-04-27 10 -1 16 April Spring
2016-04-28 8 3 14 April Spring
2016-04-29 9 4 16 April Spring
2016-04-30 9 8 12 April Spring
2016-05-01 14 7 20 May Spring
2016-05-02 14 9 19 May Spring
2016-05-03 14.5 10 19 May Spring
2016-05-04 14 9 21 May Spring
2016-05-05 14.5 10 19 May Spring
2016-05-06 14 6 20 May Spring
2016-05-07 11 7 16 May Spring
2016-05-08 11 8 15 May Spring
2016-05-09 12 9 18 May Spring
2016-05-10 15 5 20 May Spring
2016-05-11 16 8 21 May Spring
2016-05-12 17 6 22 May Spring
2016-05-13 14 12 19 May Spring
2016-05-14 14 11 19 May Spring
2016-05-15 12 10 14 May Spring
2016-05-17 8 5 13 May Spring
2016-05-18 6 4 11 May Spring
2016-05-19 10.5 1 17 May Spring
2016-05-20 13.5 2 19 May Spring
2016-05-21 14 5 22 May Spring
2016-05-22 17 9 22 May Spring
2016-05-23 19 10 24 May Spring
2016-05-24 20 13 24 May Spring
2016-05-25 15 12 21 May Spring
2016-05-26 16.5 7 22 May Spring
2016-05-27 14 9 24 May Spring
2016-05-28 20 10 27 May Spring
2016-05-29 22.5 11 27 May Spring
2016-05-30 20 14 28 May Spring
2016-05-31 18 16 22 May Spring
2016-06-01 20 13 26 June Summer
2016-06-02 18 15 20 June Summer
2016-06-03 16.5 13 21 June Summer
2016-06-04 18.5 8 23 June Summer
2016-06-05 18 10 24 June Summer
2016-06-06 16 11 18 June Summer
2016-06-07 13 8 17 June Summer
2016-06-08 15 4 20 June Summer
2016-06-09 18 7 23 June Summer
2016-06-10 15 9 21 June Summer
2016-06-11 14 9 19 June Summer
2016-06-12 16 7 19 June Summer
2016-06-13 17 11 19 June Summer
2016-06-14 15 13 16 June Summer
2016-06-15 16 13 23 June Summer
2016-06-16 18.5 15 25 June Summer
2016-06-17 25 17 32 June Summer
2016-06-18 20 13 26 June Summer
2016-06-19 23 16 27 June Summer
2016-06-20 22 18 27 June Summer
2016-06-21 18 17 20 June Summer
2016-06-22 23 16 27 June Summer
2016-06-23 22.5 19 28 June Summer
2016-06-24 25 18 30 June Summer
2016-06-25 24.5 20 29 June Summer
2016-06-26 23.5 19 30 June Summer
2016-06-27 20 18 21 June Summer
2016-06-28 17 17 20 June Summer
2016-06-29 19.5 13 26 June Summer
2016-06-30 22.5 12 28 June Summer
2016-07-01 23.5 14 29 July Summer
2016-07-02 24 17 30 July Summer
2016-07-03 19 16 24 July Summer
2016-07-04 18 12 22 July Summer
2016-07-05 19 9 24 July Summer
2016-07-06 19 14 24 July Summer
2016-07-07 15 11 17 July Summer
2016-07-08 16 7 23 July Summer
2016-07-09 15 12 19 July Summer
2016-07-10 15.5 11 23 July Summer
2016-07-11 22 11 29 July Summer
2016-07-12 25.5 15 31 July Summer
2016-07-13 24 16 31 July Summer
2016-07-14 19 17 28 July Summer
2016-07-15 16 12 20 July Summer
2016-07-16 18 13 22 July Summer
2016-07-17 17 15 20 July Summer
2016-07-18 16 14 19 July Summer
2016-07-19 15 13 19 July Summer
2016-07-20 17 12 22 July Summer
2016-07-21 18 9 24 July Summer
2016-07-22 19.5 8 25 July Summer
2016-07-23 19 11 24 July Summer
2016-07-24 21.5 13 28 July Summer
2016-07-25 23 14 29 July Summer
2016-07-26 21 17 31 July Summer
2016-07-27 22 18 30 July Summer
2016-07-28 21 16 28 July Summer
2016-07-29 22 15 26 July Summer
2016-07-30 18 14 28 July Summer
2016-07-31 22 15 30 July Summer
2016-08-01 20 17 27 August Summer
2016-08-02 18.5 15 24 August Summer
2016-08-03 18 12 26 August Summer
2016-08-04 21 12 28 August Summer
2016-08-05 24.5 16 31 August Summer
2016-08-06 20 18 23 August Summer
2016-08-07 17 12 23 August Summer
2016-08-08 17.5 8 26 August Summer
2016-08-09 19.5 11 29 August Summer
2016-08-10 19 15 27 August Summer
2016-08-11 14 11 16 August Summer
2016-08-12 13 9 19 August Summer
2016-08-13 16 6 21 August Summer
2016-08-14 18 13 25 August Summer
2016-08-15 17 11 22 August Summer
2016-08-16 15 10 22 August Summer
2016-08-17 13 8 15 August Summer
2016-08-18 13 7 22 August Summer
2016-08-19 16.5 10 26 August Summer
2016-08-20 19.5 11 28 August Summer
2016-08-21 20 13 30 August Summer
2016-08-22 19 17 22 August Summer
2016-08-23 17 15 23 August Summer
2016-08-24 18 10 24 August Summer
2016-08-25 17 10 24 August Summer
2016-08-26 17.5 9 26 August Summer
2016-08-27 18.5 10 29 August Summer
2016-08-28 20 12 30 August Summer
2016-08-29 21 13 30 August Summer
2016-08-30 18 11 23 August Summer
2016-08-31 16 7 22 August Summer
2016-09-01 16 8 25 September Autumn
2016-09-02 15 8 25 September Autumn
2016-09-03 14 9 25 September Autumn
2016-09-04 18.5 10 28 September Autumn
2016-09-05 17 15 19 September Autumn
2016-09-06 16 15 22 September Autumn
2016-09-07 18.5 14 27 September Autumn
2016-09-08 16 12 27 September Autumn
2016-09-09 15 12 27 September Autumn
2016-09-10 18 12 29 September Autumn
2016-09-11 20 12 30 September Autumn
2016-09-12 20 15 29 September Autumn
2016-09-13 20.5 12 28 September Autumn
2016-09-14 17 12 23 September Autumn
2016-09-15 14.5 8 23 September Autumn
2016-09-16 16.5 7 26 September Autumn
2016-09-17 17.5 12 25 September Autumn
2016-09-18 13 11 15 September Autumn
2016-09-19 13 12 15 September Autumn
2016-09-20 10 8 13 September Autumn
2016-09-21 9 7 12 September Autumn
2016-09-22 8 6 13 September Autumn
2016-09-23 11 8 15 September Autumn
2016-09-24 11 8 16 September Autumn
2016-09-25 8 6 17 September Autumn
2016-09-26 9 6 15 September Autumn
2016-09-27 9 5 14 September Autumn
2016-09-28 13 5 17 September Autumn
2016-09-29 15 13 21 September Autumn
2016-09-30 15 9 23 September Autumn
2016-10-01 15 10 22 October Autumn
2016-10-02 15.5 9 23 October Autumn
2016-10-03 14 13 16 October Autumn
2016-10-04 11 5 13 October Autumn
2016-10-05 4 1 5 October Autumn
2016-10-06 6.5 -1 11 October Autumn
2016-10-07 6 2 10 October Autumn
2016-10-08 2 0 11 October Autumn
2016-10-09 6 3 10 October Autumn
2016-10-10 6 4 11 October Autumn
2016-10-11 6 4 11 October Autumn
2016-10-12 6 5 8 October Autumn
2016-10-13 3.5 3 5 October Autumn
2016-10-14 3 1 10 October Autumn
2016-10-15 5 2 6 October Autumn
2016-10-16 4 3 4 October Autumn
2016-10-17 5 2 9 October Autumn
2016-10-18 4 2 6 October Autumn
2016-10-19 6 4 9 October Autumn
2016-10-20 6 4 9 October Autumn
2016-10-21 6 5 7 October Autumn
2016-10-22 6 4 8 October Autumn
2016-10-23 6 1 10 October Autumn
2016-10-24 8 7 8 October Autumn
2016-10-25 8.5 7 11 October Autumn
2016-10-26 8 6 9 October Autumn
2016-10-27 5 0 8 October Autumn
2016-10-28 6 -2 9 October Autumn
2016-10-29 8 3 10 October Autumn
2016-10-30 4 4 6 October Autumn
2016-10-31 4 3 6 October Autumn
2016-11-01 4 2 6 November Autumn
2016-11-02 5 3 7 November Autumn
2016-11-03 3 2 5 November Autumn
2016-11-04 1 -2 5 November Autumn
2016-11-05 4 -4 9 November Autumn
2016-11-07 4 3 13 November Autumn
2016-11-08 4 0 6 November Autumn
2016-11-09 4 0 4 November Autumn
2016-11-10 1 0 3 November Autumn
2016-11-12 1 -2 3 November Autumn
2016-11-13 -2 -3 -2 November Autumn
2016-11-14 -2 -3 0 November Autumn
2016-11-15 -2.5 -6 2 November Autumn
2016-11-16 0 -3 1 November Autumn
2016-11-17 2 -1 4 November Autumn
2016-11-18 5 0 9 November Autumn
2016-11-19 5.5 4 10 November Autumn
2016-11-20 5 3 8 November Autumn
2016-11-21 4 2 5 November Autumn
2016-11-22 2 1 2 November Autumn
2016-11-23 1 1 3 November Autumn
2016-11-24 1 0 7 November Autumn
2016-11-25 3 0 4 November Autumn
2016-11-26 0 -1 2 November Autumn
2016-11-27 4 0 7 November Autumn
2016-11-28 -1 -3 1 November Autumn
2016-11-29 -3 -11 -1 November Autumn
2016-11-30 -1 -12 2 November Autumn
2016-12-01 0 -1 0 December Winter
2016-12-02 0 -3 1 December Winter
2016-12-03 0 -2 0 December Winter
2016-12-04 -2 -9 0 December Winter
2016-12-05 -4 -9 1 December Winter
2016-12-06 -2 -7 -1 December Winter
2016-12-07 -3 -11 -1 December Winter
2016-12-08 2 -7 4 December Winter
2016-12-09 3 2 5 December Winter
2016-12-10 6 4 7 December Winter
2016-12-11 5 4 6 December Winter
2016-12-12 1 -5 4 December Winter
2016-12-13 -7 -9 -5 December Winter
2016-12-14 -3 -7 -1 December Winter
2016-12-15 0 -2 0 December Winter
2016-12-16 -5 -11 -2 December Winter
2016-12-17 -4 -9 -1 December Winter
2016-12-18 -3 -10 -2 December Winter
2016-12-19 -1 -3 0 December Winter
2016-12-20 0 -1 0 December Winter
2016-12-21 -1 -6 1 December Winter
2016-12-22 -6 -9 3 December Winter
2016-12-23 -2.5 -9 -1 December Winter
2016-12-24 -1 -2 1 December Winter
2016-12-25 -0.5 -2 0 December Winter
2016-12-26 3 0 4 December Winter
2016-12-27 2 1 4 December Winter
2016-12-28 0 -1 2 December Winter
2016-12-29 -2 -2 0 December Winter
2016-12-30 -2 -4 -1 December Winter
2016-12-31 -2 -9 1 December Winter
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Температура у Львові</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@4.3.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc10"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.24.1"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
<style media="screen">
body {
display: grid;
grid-template-columns: 0.5fr 4fr 0.5fr;
font-family: 'Ubuntu Mono';
color: #3A3F4A;
}
.vis-header {
grid-column: 2;
padding-left: 10px;
}
.vis-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 0px;
padding: 0px;
line-height: 0.5;
}
#vis {
grid-column: 2;
justify-content: center;
min-width: 400px;
height: 400px;
pointer-events: none;
}
.vis-footer {
grid-column: 2;
text-align: right;
font-size: 10px;
padding: 0px;
}
.background {
stroke: rgb(255, 255, 255) !important;
}
</style>
</head>
<body>
<div class="vis-header">
<p class="vis-title">Температура у Львові</p>
<p>Графік демонструє мінімальну, максимальну, а також середню температуру для кожного дня 2016 року</p>
</div>
<div id="vis"></div>
<div class="vis-footer">
<p>Дані: Weather Underground | Візуалізація: Textura.in.ua</p>
</div>
</body>
<script type="text/javascript">
const chart = {
"$schema":"https://vega.github.io/schema/vega-lite/v3.json",
"autosize": "fit",
"data": {"url": "average_daily_temp.csv"},
"layer": [{
"mark": {
"type": "area",
"interpolate":"linear"
},
"encoding": {
"x": {
"field":"date",
"title": "дата",
"type": "temporal",
"timeUnit":"yearmonthdate",
"axis": {
"format": "%m",
"tickCount": 12
},
},
"y": {
"title": "мінімальна температура",
"field": "temp_min",
"type": "quantitative",
"scale": {
"domain": [-20, 35]
},
"axis": {
"title": false
}
},
"y2":{
"title": "максимальна температура",
"field": "temp_max",
"type": "quantitative",
"axis": {
"title": false
}
},
"color":{
"value": "#F1F1F1"
}
}},
{
"mark": {
"type":"line",
"interpolate": "linear"
},
"encoding": {
"x": {
"field": "date",
"title": "дата",
"type": "temporal",
"timeUnit":"yearmonthdate",
"format": "%m"
},
"y": {
"field": "temp_mean",
"title": "температура",
"type": "quantitative",
"axis": {
"orient": "left",
"labelPadding": 10,
"title": "температура"
}
},
"size":{
"value": 1
},
"color": {
"value": "#556676"
}
}
}
],
"config": {
"axis": {
"domain": false,
"labelFont": "Ubuntu Mono",
"labelFontSize": 12,
"labelColor": "#3A3F4A",
"titleColor": "#3A3F4A",
"titleFont": "Ubuntu Mono",
"ticks": false,
"gridWidth": 0.5,
"gridOpacity": 0.5,
"gridDash": 1
},
"padding": {
"left": 0,
"rigth": 0
}
}
};
const opts = {
"renderer": "svg",
"actions": false,
"tooltip": false
}
vegaEmbed('#vis', chart, opts).then(function(result) {
result.view.width(document.getElementById('vis').offsetWidth);
result.view.height(document.getElementById('vis').offsetHeight);
window.onresize = function(event) {
result.view.width(document.getElementById('vis').offsetWidth);
result.view.run()
};
}).catch(console.error);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment