Realisation der Interaktiven
Daten-Visualisierung
im Zauberwald

30.11.2018

Janina Tanner | Felix Prantl | Colin Schmid

Bachelor in Interaction Design 3. Semester

Kurs: «Data Literacy and Visualization»

Dozenten: Prof. Jürgen Späth, Joël Gähwiler und Timo Grossenbacher

Radar

TA

Konzept

Daten

Used data sets and their sources:

~700 Einheiten

~4400 Einheiten

~13 Einheiten

Node Web SCraper fürs Data Mining

var request = require('request')
var fs = require('fs')
var readcsv = require('readcsv')

const geoCode = (lines, next) => {
    var line = lines[0]
    if(!line) {
      return next()
    }
    request.get(('https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(line.Location) + ',+Switzerland' + '&key=AIzaSyCDvW_uvyPe-L_bjFrcYiWLsbOP1sbq7B4'), (error, response, body) => {

      if (error) {
        return console.dir(error)
      }


      let lat = apiResponse.results[0].geometry.location.lat
      let lng = apiResponse.results[0].geometry.location.lng


      fs.appendFile('solar_complete.csv', line.Location + "," + line.Production + "," + line.Startup + ", " +  lat + ", " + lng + "," + "\n", function(error) {

        if (error) {
          console.log('append failed')
        } else {
          console.log('done')
        }

      })

      lines.shift()

      setTimeout( () => {
        geoCode(lines, next)
      })

    })
}

readcsv(true, './csv_source/zips/solar.csv', (err, data) => {
  if(err) { return console.log(err) }
  geoCode(data, () => {
    console.log('we have data')
  })
})

Python Pandas fürs Data Refinement

Python Pandas fürs Data Refinement

import numpy as numpy
import pandas as pandas

# import data csv, rename and rearrange headers
data = pandas.read_csv('./datasets/water.csv')
#print(data)

# import coordinates csv
coordinates = pandas.read_csv('./coordinates/coordinates_water.csv')
#print(coordinates)

# merge
merged = pandas.merge(data, coordinates, how='outer', right_on='Location', left_on='Location')
merged.drop(merged.columns[[4]], axis=1, inplace=True)
merged.drop_duplicates(inplace=True)
#print(merged)

# save to csv
merged.to_csv(path_or_buf='./water_merged.csv', index=False)

Findet Unseren code auf github

Realisation der Visualisierung

Realisation der Interaktivität

Processing Für Die Visualisation

void loadWater() {
  background(0);
  // Create interactive map centered around Switzerland
  map = new UnfoldingMap(this);
  map.zoomAndPanTo(new Location(46.986991, 8.178334), 8);
  MapUtils.createDefaultEventDispatcher(this, map);
  map.setTweening(true);

  // Load CSV Wind data
  Table waterDataCSV = loadTable(waterFile, "header, csv");

  // Create hydropower plants
  for (TableRow waterPosRow : waterDataCSV.rows()) {
    WaterPos waterPos = new WaterPos();
    float lat = waterPosRow.getFloat("Latitude");
    float lng = waterPosRow.getFloat("Longitude");
    waterPos.location = new Location(lat, lng);
    waterPositions.add(waterPos);
  }
}
void vizWater() {

  for (WaterPos waterPos : waterPositions) {
    // Calculate position of power plant in degrees
    ScreenPosition pos = map.getScreenPosition(waterPos.location);
    pointDist = dist(width/2, height/2, pos.x, pos.y);
    pointRadInner = (pos.x - (width/2)) / pointDist;
    if(pos.y < (height/2)) {
      pointAngle = map(pointRadInner, 1, -1, 3, 180);
    } else {
      pointAngle = map(pointRadInner, -1, 1, 183, 360);
    }
    pointerDist = pointerAngle - pointAngle;

    // Display power plant if radar pointer is close
    if(pointerDist < -340 && pointerDist > -360) {
      pointerDist = map(pointerDist, -300, -360, 150, 0);
    }

    // Make point blink when Interaction happens
    if(pointerDist < pointerDistMax && pointerDist > pointerDistMin) {
      pointOpacity = map(pointerDist, pointerDistMax, pointerDistMin, 0, 100);
      noStroke();
      fill(0, 255, 255, pointOpacity);
      ellipse(pos.x, pos.y, waterSize, waterSize);
      if(water > 0 && pointDist > 0) {
        noFill();
        stroke(0, 255, 255, pointOpacity);
        ellipse(pos.x, pos.y, pointDist/10, pointDist/10);
      }
    }
  }
}

Findet Unseren code auf github

Wie gehts weiter?

  • Lösung für Ruckler
  • Interaktionen optimieren
  • Farbkonzept...

Vielen Dank für eure Aufmerksamkeit

Gerne beantworten wir eure Fragen.

Data Literacy and Visualization – Realisation

By Colin Schmid

Data Literacy and Visualization – Realisation

A short presentation of our realised concept for the «Data Literacy and Visualization» course during our third bachelor semester in Interaction Design at ZHdK. Vast data sets where aqcuired and refined using Python Pandas. A working prototype was built in Processing. Lecturers where Prof. Jürgen Späth, Joël Gähwiler and Timo Grossenbacher.

  • 90