Ein Dashboard aufbauen (1. Teil)¶
★☆☆ Anfänger - Dauer: 30 Minuten
In diesem Tutorial erfahren Sie, wie Sie ein Dashboard mit 3 Visualisierungen aus einem Datensatz erstellen, der auf einem Opendatasoft-Portal veröffentlicht wurde.
Dieses Tutorial vermittelt Ihnen Folgendes:
Was ein Widget ist
Was ein Iframe ist
Der Unterschied zwischen einem Widget und einem Iframe
Wie Sie ein Widget in einer mit Opendatasoft erstellten Inhaltsseite verwenden
VORRAUSSETZUNGEN
Um ein Dashboard zu erstellen, benötigen Sie Zugriff auf das Backoffice eines Opendatasoft-Portals und die Berechtigung “Alle Seiten bearbeiten”.
Wir empfehlen Ihnen, für dieses Tutorial den Datensatz “World Heritage List” (Liste der Weltkulturerbe) zu verwenden, der in unserem Datennetzwerk veröffentlicht wurde <https://data.opendatasoft.com/explore/dataset/world-heritage-list%40public-us/map/?location=2,18.46273,-0.44037&basemap=mapbox.streets>`_. Diesen Datensatz verwenden wir als Beispiel im gesamten Tutorial. Wenn Sie das Tutorial mit einem anderen Datensatz fortsetzen möchten, so sollte dieser über eine Tabellenansicht, eine Kartenansicht sowie eine Analyseansicht verfügen. Sie müssen außerdem Ihren eigenen Seitencode an den von Ihnen gewählten Datensatz anpassen.
Erstellen Sie Ihre Inhaltsseite
1 + Öffnen Sie den Seitenbereich des Backoffice.
2 + Klicken Sie auf den Button + Neue Seite, um eine neue Inhaltsseite zu erstellen.
3 + Standardmäßig gelangen Sie zur Registerkarte Eigenschaften. Diese enthält verschiedene Informationen über die Seite. Einige hiervon müssen ausgefüllt werden, da Sie die Seite sonst nicht speichern können. Geben Sie einen URL-Suffix sowie einen Titel der Seite an. Sie können auch eine Beschreibung und Tags hinzufügen.
4 + Klicken Sie auf den Button Speichern, um die neu erstellte Inhaltsseite zu speichern.
5 + Öffnen Sie die Registerkarte Inhalt.
6 + Klicken Sie auf Im Expertenmodus bearbeiten, um auf den HTML-/CSS-Code der Seite zuzugreifen. Es erscheint ein Popup-Fenster. Klicken Sie zur Bestätigung auf Ja, in den Expertenmodus wechseln.
Im Bereich des HTML-/CSS-Codes sollten Sie den folgenden Code sehen:
<div class="container-fluid">
<div class="ods-box" ></div>
</div>
Wichtig
In der HTML-Sprache wird jedes Element durch ein Tag dargestellt. Dieses Tag wird zwischen den Zeichen <
und >
geschrieben und besteht meist aus zwei Teilen, einem einleitenden Tag und einem abschließenden Tag. Z. b. <p></p>
für Absätze, <h1></h1>
für die Titelzeile, <div></div>
für einen Abschnitt/Unterabschnitt usw.
Die Tags <div class="container-fluid">
und <div class="ods-box" >
helfen Ihnen, Ihre Seite richtig zu formatieren, damit sich alle Elemente Ihrer Inhaltsseite in einem vordefinierten Fenster mit Rändern befinden. Alle neuen Elemente, die Sie später hinzufügen, sollten zwischen diese 2 Tags eingefügt werden.
<div class="container-fluid">
<div class="ods-box">
This is where you will put your code
</div>
</div>
7 + Speichern Sie Ihre Seite.
8 + Klicken Sie auf Vorschau, um die aktuelle Darstellung Ihrer Seite zu sehen. Klicken Sie erneut auf Vorschau, um das Vorschaufenster auszublenden und zum Code zurückzukehren.
Versehen Sie Ihre Seite mit Inhalten: Datenvisualisierungen
Rufen Sie den Widget-Code einer Visualisierung ab
Wichtig
Ein Widget ist ein Code, der es jedem ermöglicht, ein interaktives Element direkt auf einer Webseite zu integrieren. Opendatasoft bietet unterschiedliche Widgets, die in der Widget-Dokumentation aufgelistet und erläutert werden. Einige der häufigsten Opendatasoft-Widgets - die wir in diesem Tutorial verwenden - sind die Visualisierungs-Widgets. Jede Datenvisualisierung eines veröffentlichten Datensatzes ist als Widget verfügbar. Dessen Code wird unterhalb der Visualisierung angezeigt und kann kopiert werden.
9 + Öffnen Sie den Datenbereich, wo unser Datensatz veröffentlicht wird. Stellen Sie sicher, dass Sie sich auf der Seite des Datensatzes befinden, auf der Sie die verfügbaren Datenvisualisierungen sehen können.
10 + Beginnen wir mit der Tabellenansicht. Klicken Sie auf die Registerkarte Tabelle.
11 + Scrollen Sie in der Tabelle nach unten. 3 Registerkarten sollten zu sehen sein: Teilen, Einbettung und Widget. Unter Teilen wird die direkte URL der Visualisierung angezeigt. Unter Einbettung wird der Iframe-Code der Visualisierung angezeigt. Unter Widget wird der Widget-Code der Visualisierungen angezeigt. Ob Code oder URL: jedes Element kann kopiert und dann eingefügt werden. Für dieses Tutorial verwenden wir die Widget-Codes der Tabellen-,Karten- und Analyse-Visualisierungen unseres Datensatzes.
Wichtig
Ein Iframe bietet die Möglichkeit, Opendatasoft-Inhalte einfach und sicher in einen isolierten Bereich zu integrieren, unabhängig vom Rest der Seite. Iframes eignen sich ideal, wenn Sie Opendatasoft-Inhalte außerhalb der Opendatasoft-Umgebung integrieren möchten, wobei wahrscheinlich einige Interaktions- und Anpassungsmaßnahmen erforderlich sind. Widgets können auch in eine Seite außerhalb der Opendatasoft-Umgebung integriert werden, doch würde dies einen erheblichen Aufwand mit sich bringen.
Da wir ein Dashboard direkt auf einer Opendatasoft-Seite erstellen, ist die Verwendung von Opendatasoft-Widgets die beste Option. In der Opendatasoft-Umgebung sind sie leicht anpassbar und sehr interaktiv mit anderen Widgets.
12 + Klicken Sie in der Registerkarte Tabelle unseres Datensatzes (wo der Widget-Code angezeigt wird) auf den Button KOPIEREN, um den Widget-Code der Tabellenvisualisierung zu kopieren.
Fügen Sie Ihrer Seite ein Visualisierungs-Widget hinzu
13 + Wechseln Sie erneut zum Backoffice, um Ihre Opendatasoft-Inhaltsseite weiter zu bearbeiten.
14 + Fügen Sie Ihren Widget-Code der Tabellenvisualisierung an der richtigen Stelle ein, d. h. zwischen den Tag ods-box
(siehe 6. Schritt).
<div class="container-fluid">
<div class="ods-box">
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
</ods-dataset-context>
</div>
</div>
15 + Speichern Sie Ihre Seite und klicken Sie auf Vorschau: unsere Seite verfügt nun über eine Tabellenvisualisierung!
Fügen Sie Ihrer Seite weitere Widgets hinzu: Karte und Diagramm
16 + Fügen wir unserer Seite jetzt eine Karte hinzu! Rufen Sie wie eben den Widget-Code aus der Kartenansicht unseres Datensatzes ab (siehe Schritte 9 bis 12, jedoch unter Verwendung der Registerkarte Karte).
17 + Fügen Sie Ihren Widget-Code der Kartenvisualisierung unter dem Widget-Code der Tabellenvisualisierung ein (siehe “Fügen Sie Ihrer Seite ein Widget hinzu”).
<div class="container-fluid">
<div class="ods-box">
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
</ods-dataset-context>
</div>
</div>
18 + Fügen wir noch etwas hinzu: ein Diagramm! Rufen Sie den Widget-Code aus der Analyseansicht unseres Datensatzes ab.
19 + Fügen Sie Ihren Widget-Code der Analysevisualisierung unter dem Widget-Code der Kartenvisualisierung ein.
<div class="container-fluid">
<div class="ods-box">
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-table context="worldheritagelistpublicus"></ods-table>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-chart align-month="true">
<ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
<ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</ods-dataset-context>
</div>
</div>
20 + Speichern Sie Ihre Seite und klicken Sie auf Vorschau: Wir haben jetzt 3 Visualisierungen auf unserer Seite!
Fügen Sie Ihrer Inhaltsseite einen Titel hinzu
21 + In HTML werden Titel (Header genannt) im Allgemeinen durch h1
-Tags definiert. Das h ist unveränderlich, es steht für “header”. Die Zahl (hier 1) kann jedoch durch eine beliebige Zahl von 1 bis 6 ersetzt werden, wobei h1
die Hauptüberschrift und h6
die letzte Zwischenüberschrift ist. Fügen Sie über allen der Seite hinzugefügten Widget-Codes der Visualisierung und direkt unter dem Tag ods-box
eine Hauptüberschrift für Ihre Inhaltsseite hinzu.
<div class="container-fluid">
<div class="ods-box">
<h1>Write your title here</h1>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-table context="worldheritagelistpublicus"></ods-table>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-chart align-month="true">
<ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
<ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</ods-dataset-context>
</div>
</div>
22 + Speichern Sie Ihre Seite und klicken Sie auf:tutorial-keycap:Vorschau: unser Dashboard hat jetzt einen Titel!
23 + Klicken Sie auf den Button Seite öffnen, um das Endergebnis Ihrer Seite im Portal zu sehen.
HERZLICHEN GLÜCKWUNSCH!
Sie haben dieses Tutorial abgeschlossen und wissen jetzt, wie man ein einfaches Dashboard mit 3 Datensatz-Visualisierungen erstellt!
Wenn Sie Ihr Dashboard noch mehr anpassen möchten, können Sie sich den zweiten Teil dieses Tutorials ansehen: “Ein Dashboard aufbauen (2. Teil)”. Hier erfahren Sie, wie Sie Ihre Widgets miteinander verknüpfen, erweiterte Widgets hinzufügen und Ihr Dashboard besser organisieren und gestalten können.