Embed Size (px)
DESCRIPTION
Citation preview
Open Data: Datenmanagement und Visualisierung Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
Termin 9, 17. April 2014
Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach Universität Bern, Institut für Wirtschaftsinformatik Abteilung Informationsmanagement Forschungsstelle Digitale Nachhaltigkeit
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
2
09: Daten als Balken und Kreise darstellen, Data Repositories und Meta-Daten kennenlernen
Donnerstag, 17. April 2014 > Buch „Interactive Data Visualization for the Web“
Kapitel: 6. Drawing with Data > Variablen und Funktionen, Daten verketten und anbinden,
Balken und Kreise zeichnen, Diagramme aufbauen Gastreferat im zweiten Teil der Vorlesung: > Andreas Amsler, Projektleiter und
Business Developer Liip AG > Das Datenportal, der Single Point of Orientation:
— Datenportale: Notwendigkeit und Herausforderungen — Comprehensive Knowledge Archive Network (CKAN) — Entwicklung und Umsetzung eines Metadaten-Modells — opendata.admin.ch: Aufbau eines Datenportals
2
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
3
Agenda
1. Einen Balken mit div zeichnen
2. Mehrere Balken zeichnen
3. Flexibel Daten hinzufügen
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
4
Interactive Data Visualization for the Web
Chapter 6. Drawing with Data:
> It’s time to start drawing with data.
> http://chimera.labs.oreilly.com/books/1230
000000345/ch06.html
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
5
Drawing divs
<div style="display: inline-block; width: 20px; height: 75px; background-color: teal;"></div>
zeichnet:
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
6
CSS class "bar"
In das CSS Stylesheet einfügen: div.bar { display: inline-block; width: 20px; height: 75px; background-color: teal; }
Von jetzt an divs einfach formatieren: <div class="bar"></div>
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
7
Setting Attributes
<p class="caption"> <select id="country"> <img src="logo.png" width="100px" alt="Logo" /> Diese HTML-Elemente enthalten 5 Attribute:
Attribute Value class caption
id country
src logo.png
width 100px
alt Logo
Dem Attribut "class" den Wert "bar" zuweisen: .attr("class", "bar")
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
8
Agenda
1. Einen Balken mit div zeichnen
2. Mehrere Balken zeichnen
3. Flexibel Daten hinzufügen
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
9
Using D3.js API Reference
Link: https://github.com/mbostock/d3/wiki/Selections#attr
Den Befehl selection.attr() in der API Referenz nachschlagen:
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
10
D3.js Bar Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Chapter 6</title> <script type="text/javascript" src="/js/vendor/d3.min.js"></script> <style type="text/css"> div.bar { display: inline-block; width: 20px; height: 75px; background-color: teal; } </style> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar"); </script> </body> </html>
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
11
D3.js Bar Example
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
12
D3.js Bar Example
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
13
D3.js Bar Example
Balken mit div aus dem Array generieren: var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar");
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
14
Setting Styles
Die Höhe eines Balkens kann mit height festgelegt werden: <div style="height: 75px;"></div> Im D3.js Code den Befehl .style("height"...) anfügen: d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style("height", function(d) {return d + "px";});
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
15
Adding Space
div.bar { display: inline-block; width: 20px; height: 75px; background-color: teal; margin-right: 2px; }
zeichnet:
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
16
Agenda
1. Einen Balken mit div zeichnen
2. Mehrere Balken zeichnen
3. Flexibel Daten hinzufügen
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
17
Flexibilität von .data()
Mehr Daten hinzufügen und Höhe der Balken verstärken: var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style("height", function(d) { var barHeight = d * 50; return barHeight + "px"; });
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
18
Flexibilität von .data()
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
19
Zufallsgenerator Math.random()
Zufallszahlen generieren: var dataset = []; for (var i = 0; i < 25; i++) { var newNumber = Math.random() * 30; dataset.push(newNumber); }
