Open Data:
Datenmanagement und Visualisierung
Daten als Balken darstellen, Data
Repositories und Meta-Daten kennenlernen
T...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
2
09: Daten als Balken ...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
3
Agenda
1. Einen Balke...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
4
Interactive Data Visu...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
5
Drawing divs
<div sty...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
6
CSS class "bar"
In da...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
7
Setting Attributes
<p...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
8
Agenda
1. Einen Balke...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
9
Using D3.js API Refer...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
10
D3.js Bar Example
<!...
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
Ba...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
14
Setting Styles
Die H...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
15
Adding Space
div.bar...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
16
Agenda
1. Einen Balk...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
17
Flexibilität von .da...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
18
Flexibilität von .da...
FS 2014
Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen
19
Zufallsgenerator Mat...
Nächste SlideShare
Wird geladen in …5
×

Open Data Vorlesung Termin 9: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen

397 Aufrufe

Veröffentlicht am

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
397
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Open Data Vorlesung Termin 9: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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:
  6. 6. 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>
  7. 7. 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")
  8. 8. 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
  9. 9. 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:
  10. 10. 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>
  11. 11. FS 2014 Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen 11 D3.js Bar Example
  12. 12. FS 2014 Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen 12 D3.js Bar Example
  13. 13. 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");
  14. 14. 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";});
  15. 15. 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:
  16. 16. 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
  17. 17. 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"; });
  18. 18. FS 2014 Open Data > 09: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen 18 Flexibilität von .data()
  19. 19. 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); }

×