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.

Made with Slides.com