Übung Open Data: Daten mit D3.js visualisieren

Größe: px
Ab Seite anzeigen:

Download "Übung Open Data: Daten mit D3.js visualisieren"

Transkript

1 Übung Open Data: Daten mit D3.js visualisieren Termin 6, 26. März 2015 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach Universität Bern, Institut für Wirtschaftsinformatik Abteilung Informationsmanagement Forschungsstelle Digitale Nachhaltigkeit

2 Opendata.ch Konferenz Nationale Open Data Konferenz mit Plenum und Fachsessions Mittwoch, 1. Juli 2015 im Hauptgebäude der Universität Bern > Gratis-Tickets für alle Teilnehmende der Open Data Vorlesung > Open Data Hack Room von 9h bis 17h im Raum 105 (HG) 15 Tische mit ca. 50 Sitzplätzen, einmal pro Stunde App-Demo, Eigene App weiterentwickeln, Networking mit anderen Entwicklern, Unternehmern, möglichen Arbeitgebern etc. Free Food, Getränke, Strom und Internet Anmeldung bis 15. Juni 2015 bei 2

3 Agenda 1. Einen Balken mit div zeichnen 2. Mehrere Balken zeichnen 3. Flexibel Daten hinzufügen

4 Interactive Data Visualization for the Web Chapter 6. Drawing with Data: > It s time to start drawing with data. > /ch06.html

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

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 Setting Attributes <p class="caption"> <select id="country"> <img src="logo.png" width="100px" alt="logo" /> Diese HTML-Elemente enthalten 5 Attribute: Attribute class id src width alt Value caption country logo.png 100px Logo Dem Attribut "class" den Wert "bar" zuweisen:.attr("class", "bar")

8 Agenda 1. Einen Balken mit div zeichnen 2. Mehrere Balken zeichnen 3. Flexibel Daten hinzufügen

9 Using D3.js API Reference Den Befehl selection.attr() in der API Referenz nachschlagen: Link: https://github.com/mbostock/d3/wiki/selections#attr

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"> </script> </body> </html> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectall("div").data(dataset).enter().append("div").attr("class", "bar");

11 D3.js Bar Example

12 D3.js Bar Example

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 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 Adding Space div.bar { display: inline-block; width: 20px; height: 75px; background-color: teal; margin-right: 2px; } zeichnet:

16 Agenda 1. Einen Balken mit div zeichnen 2. Mehrere Balken zeichnen 3. Flexibel Daten hinzufügen

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 Flexibilität von.data()

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

Daten visualisieren & Layouts

Daten visualisieren & Layouts Übung Open Data: Daten visualisieren & Layouts Termin 6, 7. April 2016 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach Forschungsstelle Digitale Nachhaltigkeit Institut für Wirtschaftsinformatik Universität

Mehr

Übung Open Data: Anpassen von bestehenden Apps & Bibliotheken die D3.js verwenden: C3.js und weitere Tools

Übung Open Data: Anpassen von bestehenden Apps & Bibliotheken die D3.js verwenden: C3.js und weitere Tools Übung Open Data: Anpassen von bestehenden Apps & Bibliotheken die D3.js verwenden: C3.js und weitere Tools Termin 5, 24. März 2016 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach Forschungsstelle Digitale

Mehr

Aufbau einer HTML Seite:

Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

Mehr

XML Technologien Seminar WS 2011/2012. 01.04.12 Einführung in HTML5 1

XML Technologien Seminar WS 2011/2012. 01.04.12 Einführung in HTML5 1 XML Technologien Seminar WS 2011/2012 01.04.12 Einführung in HTML5 1 EINFÜHRUNG IN HTML5 Eine kurze historische Einführung HTML5 Ausblick und kritische Reflexion 01.04.12 Einführung in HTML5 2 Eine kurze

Mehr

Übung Open Data: Informationen, Programming Coaching

Übung Open Data: Informationen, Programming Coaching Übung Open Data: Informationen, Programming Coaching Termin 12, 21. Mai 2015 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach Universität Bern, Institut für Wirtschaftsinformatik Abteilung Informationsmanagement

Mehr

Aufgabenbereich 3: Layoutgestaltung mit CSS

Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

Mehr

Templates für CMSMadeSimple

Templates für CMSMadeSimple 1. EINLEITUNG Templates für CMSMadeSimple Original von Jan Czarnowski piratos@coftware.de modifiziert von Andreas Just cyberman@gmx.ch Templates für CMSMadeSimple sind zur Zeit nur spärlich vorhanden.

Mehr

Roundtable Open Smart City Bern. Open Data und Open Government

Roundtable Open Smart City Bern. Open Data und Open Government Roundtable Open Smart City Bern Open Data und Open Government Dr. Matthias Stürmer Forschungsstelle Digitale Nachhaltigkeit Institut für Wirtschaftsinformatik Universität Bern Open Data und Open Government

Mehr

XHTML MP. Mobile Internet. Axel Reusch ar047 MIB

XHTML MP. Mobile Internet. Axel Reusch ar047 MIB XHTML MP Mobile Internet Axel Reusch ar047 MIB Agenda Was ist XHTML MP Prinzip Funktionsweise WTAI Vorteile Nachteile Quellen Seite 2 Untermenge von XHTML (aktuell XHTML 1.1) Strikteres HTML (alle Tags

Mehr

D ie Z ukunft m it H TM L5

D ie Z ukunft m it H TM L5 D ie Z ukunft m it H TM L5 Folien unter http://www.w3c.de/events/2009/webtech-html5/sasaki-webtech09-html5.pdf 1 HTML5-Beispiele getestet mit Firefox 3.5.3 2 Sprecher Hauptschwerpunkte Mehrsprachige Daten

Mehr

Übung Open Data: Skalen und Achsen mit D3.js realisieren

Übung Open Data: Skalen und Achsen mit D3.js realisieren Übung Open Data: Skalen und Achsen mit D3.js realisieren Termin 7, 2. April 2015 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach Universität Bern, Institut für Wirtschaftsinformatik Abteilung Informationsmanagement

Mehr

FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch

FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch FULLSCREEN ShoPWArE VollBIlD-PluGIn handbuch FULLSCREEN ShoPWArE PluGIn Inhaltsverzeichnis Bildgröße für Vollbildansicht konfigurieren 04 Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen

Mehr

Internetworking Klausur SS 09 HS Furtwangen

Internetworking Klausur SS 09 HS Furtwangen Internetworking Klausur SS 09 HS Furtwangen Name: Matrikelnummer: Aufgabe 1 von 22 Aufgabe 2 von 16 Aufgabe 3 von 20 Aufgabe 4 von 12 Aufgabe 5 von 20 Punkte von 90 Note Die Klausur wird ohne Hilfsmittel

Mehr

DataTables LDAP Service usage Guide

DataTables LDAP Service usage Guide DataTables LDAP Service usage Guide DTLDAP Usage Guide thomasktn@me.com / www.ktn.ch Benutzung des DTLDAP Service DataTables Der Service stellt einen JSON Feed für DataTables (http://www.datatables.net)

Mehr

Dokumentation für Popup (lightbox)

Dokumentation für Popup (lightbox) Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php

Mehr

HTML5. christian.cueni@bfh.ch

HTML5. christian.cueni@bfh.ch HTML5 christian.cueni@bfh.ch christian Cueni fh Biel Elektrotechnik Swisscom Eurospot / Swisscom Innovations / 89grad web / Mobile Web /

Mehr

Online Kataloge. Wie binde ich einen SGVSB-Online-Katalog in eine Webseite ein. Versionsnummer: 1.0 Änderungsdatum: 26.06.12.

Online Kataloge. Wie binde ich einen SGVSB-Online-Katalog in eine Webseite ein. Versionsnummer: 1.0 Änderungsdatum: 26.06.12. Online Kataloge Wie binde ich einen SGVSB-Online-Katalog in eine Webseite ein. Versionsnummer: 1.0 Änderungsdatum: 26.06.12 Autor: Manuel Ginesta Kontakt: m.ginesta@ncag.ch Versionsliste Version Datum

Mehr

HTML5. W3C-Tag 2009 Felix Sasaki FH-Potsdam / W3C deutsch-österr. Büro felix.sasaki@fh-potsdam.de

HTML5. W3C-Tag 2009 Felix Sasaki FH-Potsdam / W3C deutsch-österr. Büro felix.sasaki@fh-potsdam.de HTML5 W3C-Tag 2009 Felix Sasaki FH-Potsdam / W3C deutsch-österr. Büro felix.sasaki@fh-potsdam.de Hinweis "Teaching the Web" Event 15.10.2009, FH Potsdam Homepage http://www.w3c.de/events/2009/office-opening

Mehr

4. Februar 2008 Klausur EWA

4. Februar 2008 Klausur EWA Hochschule Darmstadt fbi Fachbereich Informatik Klausur Entwicklung webbasierter Anwendungen (EWA), WS 07/08 4. Februar 2008 Klausur EWA Name Vorname Matrikelnummer Note Aufgabe max. Punkte erreichte Punkte

Mehr

Interaktive Medien 1. Semester Martin Vollenweider. Web Entwicklung 1 Kapitel «Struktur»

Interaktive Medien 1. Semester Martin Vollenweider. Web Entwicklung 1 Kapitel «Struktur» Interaktive Medien 1. Semester Martin Vollenweider Web Entwicklung 1 Kapitel «Struktur» Adobe Dreamweaver CC 2014; CC; CS6; CS5 2 Einstellungen 3 Detaillierte Theorie 4 Validierung Oft Probleme mit Browsern,

Mehr

Java Webentwicklung (mit JSP)

Java Webentwicklung (mit JSP) Java Webentwicklung (mit JSP) SEW(3.Jg) Unterlagen zu Java Server-Pages Teil 1 Inhalt 1 Zielsetzung... 1 2 Webprojekt mit Netbeans... 2 2.1 Webprojekt erstellen... 2 2.1.1 Neues Projekt... 2 2.2 Aufbau

Mehr

CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes

CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes CSS - Formatierung CSS Formatdefinition außerhalb des style-attributes Definition von Formatierungen im Dokumenten-Kopf...... oder externer Datei Festlegung von CSS-Eigenschaften für HTML-Elemente Syntax:

Mehr

Visual Basic Script Einführung zum Erstellen von Stationeries. Mein Briefpapier

Visual Basic Script Einführung zum Erstellen von Stationeries. Mein Briefpapier EINFÜHRUNG IN DAS ERSTELLEN VON SCRIPTEN FÜR OUTLOOK-EXPRESS STATIONERIES Visual Basic Script Einführung zum Erstellen von Stationeries Mein Briefpapier 2005 Werner Jakob Inhaltsverzeichnis Einleitung...

Mehr

Das HTML-Element