D3 Examples - TTN Vega-Lite Example

TTN Vega-Lite Example

This examples connects to data from an API provided by the Storage Integration application of The Things Network (TTN) platform. The results in JSON form are proxied through a PHP script (see proxy.php). This can be directly used in a Vega-Lite visualization.

You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!

xxxxxxxxxx
 
<!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>
  <script src="https://cdn.jsdelivr.net/npm/zepto@1.2.0"></script>
</head>
​
<body>  
  <div id="vis"></div>
  
  <script>
    
    ;(function($){
      
      $.getJSON('https://opendata.utou.ch/ttn/pizzatime/', function(data) {
​
var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Visualization of real-time data",
  "width": 500,
  "data": {
    "values": data
  },
  "mark": {
    "type": "line",
    "interpolate": "step-after"
  },
  "encoding": {
    "x": {"field": "time", "type": "temporal"},
    "y": {"field": "level", "type": "quantitative", "scale": {"zero": false}},
    "tooltip": {"field": "level", "type": "quantitative"}
  }
}
vegaEmbed('#vis', spec, {defaultStyle: true}).catch(console.warn);
        
      });
    })(Zepto)
  </script>
</body>
    