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

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


3

Agenda

1. Einen Balken mit div zeichnen

2. Mehrere Balken zeichnen

3. Flexibel Daten hinzufügen

FS 2014


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

http://chimera.labs.oreilly.com/books/1230000000345/ch06.html



FS 2014


5

Drawing divs

<div style="display: inline-block; width: 20px; height: 75px; background-color: teal;"></div>

zeichnet:

FS 2014


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


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


8

Agenda




FS 2014


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


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


11

D3.js Bar Example

FS 2014


12

D3.js Bar Example

FS 2014


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


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


15

Adding Space

div.bar { display: inline-block; width: 20px; height: 75px; background-color: teal; margin-right: 2px; }

zeichnet:

FS 2014


16

Agenda




FS 2014


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


18

Flexibilität von .data()

FS 2014


19

Zufallsgenerator Math.random()

Zufallszahlen generieren: var dataset = []; for (var i = 0; i < 25; i++) { var newNumber = Math.random() * 30; dataset.push(newNumber); }

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

Education

Transcript of Open Data Vorlesung Termin 9: Daten als Balken darstellen, Data Repositories und Meta-Daten...