31:T4c8,{ const svg = d3.create("svg").attr("width", 500).attr("height", 350); while (true) { svg .selectAll("text") .data(randomMovies(), (d) => d.titel) .join( (enter) => enter .append("text") .style("opacity", 0) // styling to have one line for each title .attr("transform", (d, i) => `translate(${10}, ${30 + i * 30})`) // give the title a color to play around afterwards .style("fill", "blue") // content of the titel .text((d) => d.rang + " " + d.titel) .transition() .duration(3000) .style("opacity", 1) .selection(), (update) => update .transition() .duration(3000) .attr("transform", (d, i) => `translate(${10}, ${30 + i * 30})`) .style("fill", "black") .selection(), (exit) => exit .style("fill", "red") .transition() .duration(3000) .attr("transform", (d, i) => `translate(${300},${30 + i * 30})`) .remove() ); yield svg.node(); await Promises.tick(4500); } }32:T4c7,Jede dieser Funktionen hat einen Parameter: - bei der `enter`-Funktion ist der Paramenter *enter* die **enter selection** und repräsentiert die Elemente, die erstellt werden müssen. Das entspricht dem Funktionsaufruf, den wir bisher kennen: `.join('circle')`. - die Update-Funktion hat als Parameter *update* und ist eine Selection, die alle bereits vorhandenen Elemente umfasst. - die Exit-Funktion nimmt als Parameter die **exit selection** und beinhaltet Elemente, die entfernt werden. Wir schauen uns die Funktionen und ihre Syntax nun im Detail an. ### Enter-Funktion Die Enter-Funktion muss Elemente hinzufügen und greift daher auf die D3-Methode `.append` zurück. Diese Methode führt zu unseren bestehenden Elmenten (zum Beispiel einer SVG-Gruppe) weitere Elemente hinzu. Versuchen wir das alles mal zusammen mit Daten. Wir nehmen die Daten, die wir bereits aus der Filmübung haben. Wir wollen zuerst mal alle Text-Elemente erstellen, also mit `.append`-Funtion hinzufügen, aber noch ausblenden. Für das Ausblenden verwenden wir ein `.style`-Attribut und die Eigenschaft `opacity`, die wir auf 0 setzen. Die Funktion `randomMovies()` gibt uns aus unseren 10 Filmen einfach zufällig ein paar Filme zurück.33:T486,{ const svg = d3.create("svg").attr("width", 500).attr("height", 350); while (true) { svg .selectAll("text") .data(randomMovies(), (d) => d.titel) .join( (enter) => enter .append("text") .style("opacity", 0) // styling to have one line for each title .attr("transform", (d, i) => `translate(${10}, ${30 + i * 30})`) // give the title a color to play around afterwards .style("fill", "blue") // content of the titel .text((d) => d.rang + " " + d.titel) .transition() .duration(1000) .style("opacity", 1) .selection(), (update) => update .transition() .duration(1000) .attr("transform", (d, i) => `translate(${10}, ${30 + i * 30})`) .style("fill", "black") .selection(), (exit) => exit .attr("transform", (d, i) => `translate(${300}, ${30 + i * 30})`) .remove() // code hier ); yield svg.node(); await Promises.tick(2500); } }34:[{"id":"79168570f1a8e64ae14b05b1b997d8482c0627a4118588b143aece0ca7b2746124fc8e91603e2e395bb498a30a693f56e08bf22c9a4d97bb7ec7f397855b9d88","href":"https://static.observableusercontent.com/files/79168570f1a8e64ae14b05b1b997d8482c0627a4118588b143aece0ca7b2746124fc8e91603e2e395bb498a30a693f56e08bf22c9a4d97bb7ec7f397855b9d88","name":"film@1.csv","type":"text/csv","lastModified":1650635268234.97,"size":529}] 2f:{"title":"Enter, update und exit – Theorieblock","cells":[{"id":0,"value":"# Enter, update und exit – Theorieblock","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1147,"value":"data = FileAttachment(\"film@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"Wir können mit D3 auch Animationen machen, die auf Veränderungen in den Daten reagieren. Also nehmen wir an, in unserem Datensatz kommen neue Daten hinzu oder es fallen Daten aus der Visualisierung weg. Mit D3 können wir Animationen erstellen, die genau auf diese Datenveränderungen hören und entsprechend unterschiedliche Animationen ausführen.\n\n**Warum ist das interessant?**\n\nWeil wir dadurch für das Erstellen von Elementen andere Animationen machen können, als wenn die Elemente bereits vorhanden sind. Schauen wir uns mal die Animation an, die wir am Ende diese Theorieblocks erstellen können, um ein besseres Verständnis für den Inhalt dieses Blocks zu bekommen.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1529,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"Möglich ist das, wenn wir in der `.join`-Aufruf drei Funktionen einfügen:","pinned":true,"hidden":false,"mode":"md"},{"id":1384,"value":".join(\n enter => enter, // neue Daten kommen rein\n update => update, // bestehende Daten werden aktualisiert\n exit => exit // Daten fallen raus\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1387,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1395,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", 500).attr(\"height\", 350);\n\n const moviesData = randomMovies();\n svg\n .selectAll(\"text\")\n .data(moviesData, (d) => d.titel)\n .join((enter) =>\n enter\n .append(\"text\")\n // styling to have one line for each title\n .attr(\"transform\", (d, i) => `translate(${10}, ${30 + i * 30})`)\n // give the title a color to play around afterwards\n .style(\"fill\", \"blue\")\n // content of the titel\n .text((d) => d.titel)\n .style(\"opacity\", 0)\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"Schauen wir uns das Resultat in der Konsole an. Dafür rechts klicken und `Untersuchen` auswählen. Wir haben nun einige Text-Elemente mit einer Opacity, die auf 0 gesetzt ist, hinzugefügt. Dann wechseln wir jetzt zur Update-Funktion und sorgen dafür, dass diese Elemente eingeblendet werden.\n\n### Update-Funktion\nDie Update-Funktion ist optional. Und wir können sie jetzt in unserem Beispiel dafür verwenden, um die bereits erstellten Elemente einzublenden. Erweitern wir also unseren Code. Wir fügen hier noch eine Eigenheit hinzu, damit wir im Observable einen dauerhaften Loop machen können `while(true)` und dann auch noch das `yield`, um nach jeder Schleife einen Rückgabewert zu erhalten. Aber schauen wir uns einfach an, was jetzt passiert.\n ","pinned":false,"hidden":false,"mode":"md"},{"id":1426,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", 500).attr(\"height\", 350);\n\n while (true) {\n const moviesData = randomMovies();\n console.log(moviesData);\n svg\n .selectAll(\"text\")\n .data(moviesData)\n .join(\n (enter) =>\n enter\n .append(\"text\")\n // styling to have one line for each title\n .attr(\"transform\", (d, i) => `translate(0, ${30 + i * 30})`)\n // give the title a color to play around afterwards\n .style(\"fill\", \"blue\")\n // content of the titel\n .text((d) => d.titel),\n (update) => update.transition().style(\"fill\", \"red\")\n );\n\n yield svg.node();\n await Promises.tick(5000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1464,"value":"Das ist jetzt noch nicht wirklich spektakulär. Nun können wir gewisse Effekte reinmachen. Verändern wir nochmal den Code der `enter`-Funktion und fügen eine `transition()` ein. Die Transition soll von `opacity: 0` auf `opacity: 1` gehen. Dann ändern wir die Update-Funktion, nehmen die `opacity` raus und ändern die Farbe der Texte.","pinned":false,"hidden":false,"mode":"md"},{"id":1469,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", 500).attr(\"height\", 350);\n\n while (true) {\n const moviesData = randomMovies();\n console.log(moviesData);\n svg\n .selectAll(\"text\")\n .data(moviesData, (d) => d.titel)\n .join(\n (enter) =>\n enter\n .append(\"text\")\n .style(\"opacity\", 0)\n // styling to have one line for each title\n .attr(\"transform\", (d, i) => `translate(${10}, ${30 + i * 30})`)\n // give the title a color to play around afterwards\n .style(\"fill\", \"blue\")\n // content of the titel\n .text((d) => d.rang + \" \" + d.titel)\n // code hier,\n (update) => update // code hier\n );\n\n yield svg.node();\n await Promises.tick(2500);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1473,"value":"**Was passiert jetzt?**\n\nNeue Elemente werden mit einer Transition eingefügt (enter-Selection, Auswahl der frisch hinzugefügten Elemente). Bei bestehenden Elementen wird der Text rot gefärbt. Das sieht aber leider noch etwas kaputt aus. Das können wir lösen, indem wir die Position der Elemente verschieben.\n\nKommen wir zum nächsten Schritt: Elemente, die aus den Daten fallen, mit einem Effekt verschwinden lassen. Also die `exit`-Funktion.\n\n### Exit-Funktion\nWenn ein Element nicht mehr in den Daten vorhanden ist, soll es nach rechts geschoben werden und dann ausgeblendet werden. Wie könnten wir das machen?","pinned":false,"hidden":false,"mode":"md"},{"id":1554,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1556,"value":"### Zusammenfassung\nMit den drei Funktionen `enter`, `update` und `exit`, können wir beeinflussen, wie das Erscheinen, Aktualsisieren und Verschwinden von Elementen im DOM aussehen soll. Wir können dieses Pattern zum Beispiel für einen Bar Chart Race verwenden.","pinned":false,"hidden":false,"mode":"md"},{"id":1350,"value":"### Ressourcen\n- https://observablehq.com/@d3/selection-join\n- https://www.d3indepth.com/transitions/","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html"},{"id":245,"value":"import {style} from \"@cas-datenvisualisierung/style\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1422,"value":"function randomMovies() {\n return d3\n .shuffle(data)\n .slice(0, Math.floor(0 + Math.random() * 10))\n .sort((a, b) => a.rang - b.rang);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}

Lernziel

Appendix