34:["$","title",null,{"children":"Eine kurze Einführung in Datenvisualisierung und d3.js (3) | thekili | Observable"}] 3c:[] 38:{"id":"a21688d4af55303f","slug":"eine-kurze-einfuhrung-in-datenvisualisierung-und-d3-js-3","title":"Eine kurze Einführung in Datenvisualisierung und d3.js (3)","thumbnail":"ff24570c10705460946163b75e0aabf9e11d7df9fe3cabd48a9d2b9dc5ee3de2","access_level":"public","create_time":"$D2021-05-02T16:12:14.468Z","update_time":"$D2022-08-10T21:08:31.198Z","view_time":null,"first_public_time":"$D2021-05-02T22:08:01.468Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b46e41aa5bd38092","login":"thekili","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9c835e0699b052090ece67c5bbee75821a6b279d50196190b4984cd601ef6a33","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":236,"publish_version":236,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc2f450e62cd257f","login":"thekili","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9c835e0699b052090ece67c5bbee75821a6b279d50196190b4984cd601ef6a33","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"bc2f450e62cd257f","login":"thekili","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9c835e0699b052090ece67c5bbee75821a6b279d50196190b4984cd601ef6a33","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"34ddb551df34c612","slug":"einfuhrung-in-d3-js","title":"Einführung in Datenvisualisierung und d3.js","owner":{"id":"b46e41aa5bd38092","login":"thekili","name":""}},"type":"notebook","body":{"titling":"auto","title":"Eine kurze Einführung in Datenvisualisierung und d3.js (3)","cells":[{"id":0,"value":"md`# Eine kurze Einführung in Datenvisualisierung und d3.js (3)\nIn den vorherigen Teil ging es darum, wie Datensätze in JavaScript dargestellt und auch manipuliert werden können. Das ist eine wichtige Voraussetzung für eine gute Visualisierung: eine gute Aufbereitung der Daten. In einer Visualisierung wird letztlich nur das dargestellt, was durch die Daten ausgesagt werden kann. Jetzt soll es darum gehen, wie Daten letztlich dargestellt werden können, also welche \"Zeichenfläche\" uns zur Verfügung steht. Dafür wird das Format \"svg\" genutzt werden und was es damit auf sich hat, das kommt im Folgendem.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## SVG \nSVG steht für Scalable Vector Graphics. Die Idee ist, dass ähnlich nach dem Prinzip von Malen nach Zahlen bestimmte Punkte angegeben werden, die dann durch Linien verbunden werden sollen. Das geht natürlich nicht für Fotographien, wo jeder Pixel etwas anderes zeigt, aber gut für abstrake Visualisieriungen. SVG ist also ein Format, dass es erlaubt Daten einfach und automatisiert darzustellen. SVG kann sowohl ein eigenständiges Format sein mit der Endung .svg und ist zum Beispiel die Grundlage für einige Graphikdesign-Programme. SVG kann aber auch direkt in HTML-Code hingeschrieben werden. In der folgenden Zeile muss alles, was zwischen *html\\`\\`* steht ein Element-HTML sein - im unteren Fall ist als erstes Element eine SVG-Zeichenfläche eingesetzt. (Achtung: die Schreibweise html\\`\\` ist etwas spezifisches von observablehq.com). ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`Jetzt gibt es eine weiße Fläche mit der Breite von 400 und einer Höhe von 100. Dazu kommt die Spezifikation namens viewBox. Was es damit aufsich hat wird später relevant. Doch bisher ist diese Fläche noch leer. In dieser können nun Elemente \"hineingezeichnet\" werden. Dafür gibt es bereits mehrere [Tutorials](https://observablehq.com/@ianarawjo/svg-html-tag-tutorial) und [Dokumentationen](https://developer.mozilla.org/en-US/docs/Web/SVG/Element). Dabei gibt es unterschiedliche Formen, die jeweils leicht variierende Eigenschaften haben. Der [Datensatz aus dem vorherigen Tutorial](https://observablehq.com/@thekili/eine-kurze-einfuhrung-in-datenvisualisierung-und-d3-js-2) kann in einem einfachen Scatterplot dargestellt werden, etwa mit der Zeit auf der x-Achse und der totalen Emission auf der y-Achse. Die Datenpunkte wiederum werden als Punkte dargestellt. Das Element, was dafür gebraucht wird sind Kreise.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`## Circle\nKreise haben drei spezifische Attribute: eine x-Koordinate (*cx*), eine y-Koordinate (*cy*) und den Radius (*r*). Dazu kommen noch Attribute, wie stroke, stroke-width und fill, die für die meisten Elemente verfügbar sind. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`Auch dieser Code ist wieder editierbar. Im Moment ist der Kreis noch rot, wobei Farben auf unterschiedliche Weisen spezifiziert werden können. Wie vielleicht schon erkennbar ist, so ist der Nullpunkt des Koordinatensystems oben-links. Das heißt, dass der Mittelpunkt des Kreises jeweils 40 Pixel von oberen linken Ecke entfernt ist. Damit können die einzelnen Datenpunkte dargestellt werden. Was im nächsten Schritt noch fehlen, sind x- und y-Axen.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`## Line\n\nFür die Darstellung von Linien gibt es ebenso ein eigenes Element. Diesmal müssen vier Koordinatenpunkte spezifiziert werden. Abgesehen davon gelten nur die allgemeinen Attribute.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`Die x-Achse hat eine länge von (x2 -x1) 370 Pixeln, die y-Achse wiederum eine Länge von (y2-y1) 80 Pixeln. Bis eine vollständige Achse entsteht ist es noch etwas hin. Eine elementare Sache sind die Labels und dafür braucht es Text.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`## Text \nAuch um Text darstellen zu können gibt es ein schlichtes Element - Text. Die Attribute sind sehr einfach, diesmal braucht es nur eine x- und eine y-Koordinate sowie der Textgröße (font-size). Der eigentliche Text wird dann zwischen die einzelnen Tags gesetzt. Also die Tags <> müssen wieder geschlossen werden. Bei den zuvorigen Elementen wurde der Tag selbst wieder geschlossen < />. ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`Damit sind nun alle Elemente zusammen: Datenpunkte, Achsen und Beschriftungen:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`Dieser Graph ist weder besonder hübsch, noch besonders aussagekräftig. Aber er ist da. Es ist weder klar, was womit verglichen wird, noch was eigentlich die Aussage dahinter ist. Die Beschriftung ist mehr als arm und das Verhältnis von Tinte zu Daten nicht besonders hoch. Dahinter stehen viele Überlegungen: Wie sollen die Werte aus dem Datenraum, wie etwa eine Emission von 43854 CO2-Tonnen, auf den Koordinantenraum übertragen werden? Welche Skalierung soll stattfinden? Wie kommt man dazu, dass jeder einzelne Eintrag automatisch als Punkt im Koordinatensystem eingetragegn wird? Schließlich, wie kann dieser Graph interaktiv gestaltet werden? Für alle diese Fragen gibt es einige wenige Lösungen in d3.js, namlich scale() und selection() und worum es da genauer geht ist Thema des nächsten Beitrages. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 33:null