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

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

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

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 {
width: 20px;
height: 75px;
}
</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 ];
.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:
.data(dataset)
.enter()
.append("div")
.style("height", function(d) {return d + "px";});

FS 2014
15
Adding Space
div.bar {
width: 20px;
height: 75px;
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 ];
.data(dataset)
.enter()
.append("div")
.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 kennenlernen

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (19)

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

Similaire à Open Data Vorlesung Termin 9: Daten als Balken darstellen, Data Repositories und Meta-Daten kennenlernen (20)

Plus de Matthias Stürmer

Plus de Matthias Stürmer (20)

Dernier

Dernier (7)

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