25:null 26:["$","title",null,{"children":"Bar Chart Race – Übung | CAS Datenvisualisierung | Observable"}] 2b: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); } }2c:[{"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}] 29:{"id":"c9f8a5f9aa74b548","slug":"bar-chart-race-ubung","title":"Bar Chart Race – Übung","thumbnail":"3e868e8528d6654101d82006ed1fcf245db50150482a8467b6d1e654b2c68fd6","access_level":"public","create_time":"$D2022-04-25T08:47:53.475Z","update_time":"$D2022-04-27T08:42:30.682Z","view_time":null,"first_public_time":"$D2022-04-26T14:40:54.312Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024"},"version":1710,"publish_version":1710,"role":null,"authored":false,"authors":[{"type":"individual","id":"1398cb39f3ba00bf","login":"felixmichel","name":"Felix Michel","avatar_url":"https://avatars-next.observableusercontent.com/4b9f6f61d9c7481c763892b1fd34b3686fc68bf0d5bfe1c8e4068123a2a8ac5e","tier":null}],"members":[{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","role":"editor"},{"type":"individual","id":"1398cb39f3ba00bf","login":"felixmichel","name":"Felix Michel","avatar_url":"https://avatars-next.observableusercontent.com/4b9f6f61d9c7481c763892b1fd34b3686fc68bf0d5bfe1c8e4068123a2a8ac5e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":9,"collection":{"id":"841439741e443d5a","slug":"5c-animierte-grafiken","title":"5b Animierte Grafiken","owner":{"id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung"}},"type":"notebook","body":{"title":"Bar Chart Race – Übung","cells":[{"id":0,"value":"# Bar Chart Race – Übung","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1391,"value":"Als Daten habe ich den Wert unterschiedlicher Unternehmen in Milliarden Dollar hochgeladen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1650,"value":"FileAttachment(\"bar chart race@1.gif\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"data = FileAttachment(\"category-brands@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"viewof table = Inputs.table(data, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"### Chart Dimensionen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1396,"value":"Hier findet ihr ein paar Variablen, die einfach die Chart Dimensionen definieren.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1156,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"margin = ({ top: 25, right: 25, bottom: 25, left: 0 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"boundedWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"boundedHeight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"labelPadding = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"years = d3.range(2000, 2020)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"### Skalen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1440,"value":"// Berechne die Domain für die X-Skala\nxDomain = d3.extent(data, (d) => d.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"xScale(234241)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1467,"value":"companiesByYear(2000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1688,"value":"data.map((d, i) => console.log({ d, i }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"import {style} from \"@cas-datenvisualisierung/style\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"

Lernziel

Appendix