SIMPLE
ONLINE
CHARTS

Public datasets

RAWGraphs

Datawrapper

Let's try some real data...

Dataviz libraries

Problems with dataviz libraries:

• Flexibility
• Ugly/non-functional defaults
• Longevity
• Documentation

Code examples

Code examples

Since we're starting with the code now: you can find all the examples on github:

https://github.com/dominikus/online-data-visualization

Taucharts

Taucharts Basics

<script
 src="https://cdn.jsdelivr.net/d3js/3.5.17/d3.min.js"
 charset="utf-8"></script>
<script
 src="https://cdn.jsdelivr.net/npm/taucharts@1/build/production/tauCharts.min.js"
 type="text/javascript"></script>

<link rel="stylesheet" type="text/css"
 href="https://cdn.jsdelivr.net/npm/taucharts@1/build/production/tauCharts.min.css">
  

Taucharts Basics II

var chart = new tauCharts.Chart({
      data: defData,
      type: 'bar',
      x: 'date',
      y: 'count',
      color: 'type'
  });
  
  chart.renderTo('#chart');

fetch API

fetch API

Easy way to get remote (or local!) data into your script.
Replaces the old XMLHttpRequest API.

fetch API

Basic syntax (text):

fetch(remoteURL)
  .then(function(result){
    return result.text();
  })
  .then(function(parsedResult){
    // do something with the text...
  });
  

fetch API

Basic syntax (JSON):

fetch(remoteURL)
  .then(function(result){
    return result.json();
  })
  .then(function(parsedResult){
    // do something with the JSON...
  });
  

fetch API

Widely supported. If you need IE support, use polyfill.