31:T8c8,{ const svg = d3.create("svg").attr("width", width).attr("height", height); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // diese for-Schleife brauchen wir nur, damit der Bar Chart Race vom Jahr 2000 bis ins Jahr 2019 läuft for (let index = 2000; index < 2020; ++index) { console.log(companiesByYear(index)); // add circles g.selectAll("rect") .data(companiesByYear(index), (d) => d.name) .join( (enter) => enter .append("rect") .attr("width", (d) => xScale(d.value)) .attr("height", 20) .attr("x", 0) // styling to have one line for each title // .attr( // "transform", // (d, i) => `translate(10, ${margin.top + i * 30})`) string literal .attr("transform", (d, i) => "translate(0," + i * 30 + ")") .style("fill", "green"), // Code für rect bei der Enter-Selection // Breite // Höhe // Farbe // Position (update) => update .transition() .duration(1000) .attr("width", (d) => xScale(d.value)) .attr("transform", (d, i) => "translate(0," + i * 30 + ")") .style("fill", "red"), // Code für rect bei der Update-Selection // Breite anpassen // Position aktualisieren // neue Farbe (exit) => exit .style("fill", "yellow") .transition() .duration(500) .attr("transform", "translate(0, 300)") .remove() // Code für rect bei der Exit-Selection // nochmal neue Farbe // Position ganz nach unten // .remove() ); // zusätzlicher Code für ein Jahreslabel const uniqueYear = companiesByYear(index) .map((d) => d.date) .filter((v, i, a) => a.indexOf(v) == i); svg .selectAll("text.yearLabel") .data(uniqueYear) .join("text") .attr("class", "yearLabel") .text((d) => d) .attr("x", 500) .attr("y", 300); // Funktionalität für Loop yield svg.node(); await Promises.tick(1500); } }32:[{"id":"d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","href":"https://static.observableusercontent.com/files/d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","name":"category-brands@1.csv","type":"text/csv","lastModified":1650876473475.872,"size":57971},{"id":"7de966fcd01e0f8e1d3b406269f6e33ca8563ed62e6dfd4ccc0695dbee01e5a333239f257aa992c1ed3298c9c56351cc39b931a3465cd5903f50bccb72bfc9cc","href":"https://static.observableusercontent.com/files/7de966fcd01e0f8e1d3b406269f6e33ca8563ed62e6dfd4ccc0695dbee01e5a333239f257aa992c1ed3298c9c56351cc39b931a3465cd5903f50bccb72bfc9cc","name":"bar chart race@1.gif","type":"image/gif","lastModified":1650884327337.794,"size":143711}] 2f:{"title":"Bar Chart Race – Übung","cells":[{"id":0,"value":"# Bar Chart Race – Übung","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1391,"value":"Als Daten habe ich den Wert unterschiedlicher Unternehmen in Milliarden Dollar hochgeladen.","pinned":false,"hidden":false,"mode":"md"},{"id":1650,"value":"FileAttachment(\"bar chart race@1.gif\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1147,"value":"data = FileAttachment(\"category-brands@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"viewof table = Inputs.table(data, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"### Chart Dimensionen","pinned":false,"hidden":false,"mode":"md"},{"id":1396,"value":"Hier findet ihr ein paar Variablen, die einfach die Chart Dimensionen definieren.","pinned":false,"hidden":false,"mode":"md"},{"id":1156,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":1160,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":1158,"value":"margin = ({ top: 25, right: 25, bottom: 25, left: 0 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1163,"value":"boundedWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":1165,"value":"boundedHeight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":1236,"value":"labelPadding = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1413,"value":"years = d3.range(2000, 2020)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1167,"value":"### Skalen","pinned":false,"hidden":false,"mode":"md"},{"id":1440,"value":"// Berechne die Domain für die X-Skala\nxDomain = d3.extent(data, (d) => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1190,"value":"// Erstelle eine lineare Skala für die Breite der Balken\nxScale = d3.scaleLinear().domain(xDomain).range([margin.left, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1672,"value":"xScale(234241)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1410,"value":"function companiesByYear(year) {\n return data\n .filter((d) => d.date === year)\n .sort((a, b) => b.value - a.value)\n .slice(0, 10);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1467,"value":"companiesByYear(2000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1350,"value":"### Ressourcen\n- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline\n- https://developer.mozilla.org/de/docs/Web/SVG/Element/rect\n- https://developer.mozilla.org/de/docs/Web/SVG/Element/circle\n- https://github.com/d3/d3-scale\n- https://bl.ocks.org/clhenrick/da9301dc7f5304c6b2083ddcbc7e1baf","pinned":false,"hidden":false,"mode":"md"},{"id":1688,"value":"data.map((d, i) => console.log({ d, i }))","pinned":true,"hidden":false,"mode":"ojs"},{"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":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

Lernziel

Appendix