Ein Beispiel von Mittwoch Nachmittag
<!DOCTYPE html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> | |
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
<meta charset="utf-8"> | |
<!-- affinity group data, circle rotation, auto-resize svg image, chord function, configuration --> | |
<title>Chord Diagram - Nepal migration visualization</title> | |
<style> |
Versucht den Tooltip lesbarer zu machen. Beispielsweise Jahr: xxxx, Schuldden: xxxxx$
In diesem Beispiel werden mehrere Länder dargestellt sowie zwei verschiedene Datensätze. Diese Beispiel könnt Ihr beliebig weiterentwickeln mit mehr Ländern oder Datensätzen
Nun wollen wir eine zweite Datenlinie einfügen.
- Sucht Euch ein zweites Land aus der Datenbank aus
- Erstellt ein zweite .csv Datei
- Passt den Code so an, dass er für eure ausgesuchten Länder passt
Dieser Code zeigt den Standard Tooltip (html) ohne einfache Möglichkeit zur Anpassung.
- Versucht bei Eurem Beispiel ein Tooltip einzufügen
Unter dem nachfoldenen Link findet Ihr eine Anleitung wie man tooltips auf eine andere Art einfügen kann. Diese Art hat den Vorteil, dass man das Aussehen des tooltips einfacher nach eigenen Wünschen anpassen kann.
- Lest die Anleitung durch und versucht bei Eurem Beispiel den Tooltip auf diese zweite mögliche Art und Weise einzubinden
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html?m=1
D3 js based example for line chart used for students course on webvisualizations - WEBMAP 2016
Die Daten findet Ihr hier: http://data.worldbank.org/indicator/DT.TDS.MLAT.CD
- Speichert die Daten auf eurem PC
- Sucht euch ein Land aus
- Formatiert die Daten analog debt_bolivia.csv
- Passt das Beispiel gemäss dem ausgewählten Land an
- Versucht selbständig einen y-Axen Titel hinzuzufügen Tipp: google, "d3 add axis title"
The chart shows a impressive increase of tourist arrivals in Grisons beginning in the year 2011. The Canton of Grisons managed to almost triple the arrivals of Swiss tourists. Furthermore, we see that before 2011 only few Japanese tourist visited Grisons. Nowadays, Grisons welcomes Japanese tourist during the Summer. Another interesting observation is the fact that Swiss tourist prefer Winter holidays whereas Japanese tourists prefer the Summer over the Winter.
Scatterplot from the top 15 countries of origin of tourists in Grisons, Switzerland in June 2015. The Scatterplot shows the relation of travel distance and lenght of stay. The chart shows that tourists from Australia stay 1.5 nights in average whereas tourist from Belgium stay more than 6 nights in average.