32:Tbbf,chart = { const svg = d3.create("svg").attr("width", width).attr("height", height); // add color legend svg .append("g") .selectAll("g.colorLegend") .data(topTen2019) .join("g") .attr("class", "colorLegend") .call((g) => g .append("circle") .attr("r", (d) => 5) .style("fill", (d) => colorScale(d)) .attr("transform", (d, i) => i <= 4 ? `translate(${5 + i * 150},${10})` : `translate(${5 + (i - 5) * 150},${40})` ) .append("text") ) .call((g) => g .append("text") .text((d) => d) .attr("transform", (d, i) => i <= 4 ? `translate(${15 + i * 150},${15})` : `translate(${15 + (i - 5) * 150},${45})` ) ); function updateChart(data) { const simulation = d3 .forceSimulation(data) .force( "charge", d3 .forceCollide() .radius((d) => circleScale(d.value) + 2) .strength(0.5) ) .force( "x", d3 .forceX() .strength(0.1) .x((d) => labelPadding + linearScale(d.value)) ) .force( "y", d3 .forceY() .strength(1) .y(colorLegend + bandScale(1)) ) .stop() .tick(300); const g = svg .selectAll("g.node") .data(simulation.nodes(), (d) => d.name) .join( (enter) => { return enter .append("g") .attr("class", "node") .call((g) => g .append("circle") .attr("r", (d) => circleScale(d.value)) .style("fill", (d) => colorScale(d.name)) .style("opacity", (d) => topTen2019.includes(d.name) ? 1 : 0.3 ) ) .attr( "transform", (d) => `translate(${d.x},${colorLegend + bandScale(1)})` ) .style("opacity", 0); }, (update) => update, (exit) => exit .transition() .duration(3000) .attr( "transform", (d) => `translate(${d.x},${colorLegend + bandScale(1)})` ) .style("fill", "red") .style("opacity", 0) .remove() ) .transition() .duration(2000) .attr("transform", (d) => `translate(${d.x},${d.y})`) .call((g) => g.select("circle").attr("r", (d) => circleScale(d.value))) .style("opacity", 1); svg.select("text.year").text(data[0].date); } svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(${labelPadding},${height - margin.bottom})`) .call(xAxis); svg .append("text") .attr("class", "year") .attr("y", colorLegend + bandScale(1)) .attr("dominant-baseline", "central"); return Object.assign(svg.node(), { updateChart }); }33:[{"id":"d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","href":"https://static.observableusercontent.com/files/d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","name":"category-brands@1.csv","type":"text/csv","lastModified":1651918445847.108,"size":57971}] 30:{"title":"Blasen-Balkendiagramm mit Kategorienauswahl und Animation – Lösung","cells":[{"id":0,"value":"# Blasen-Balkendiagramm mit Kategorienauswahl und Animation – Lösung","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":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":false,"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 = 200","pinned":false,"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 = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":1746,"value":"colorLegend = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":1413,"value":"years = Array.from(new Set(data.map((d) => d.date)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1167,"value":"### Skalen","pinned":false,"hidden":false,"mode":"md"},{"id":1556,"value":"circleScale = d3.scaleSqrt().domain(valueExtent).range([2, 12])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1179,"value":"// Erstelle eine scaleBand für die Reihenfolge\nbandScale = d3\n .scaleBand()\n .domain([1])\n .range([margin.top, boundedHeight - colorLegend])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1440,"value":"// Berechne die Domain für die Skala die X-Skala\nvalueExtent = d3.extent(data, (d) => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1190,"value":"// Erstelle eine lineare Skala für die Position der Kreise auf der X-Achse\n// Erstelle eine lineare Skala für die Position der Kreise auf der X-Achse\nlinearScale = d3\n .scaleLinear()\n .domain(valueExtent)\n .range([10, boundedWidth - labelPadding])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1632,"value":"colorScale = d3\n .scaleOrdinal(d3.schemeCategory10)\n .domain(topTen2019)\n .unknown(\"gray\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1851,"value":"viewof selectedYear = Inputs.select(years, { label: \"Jahr auswählen\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1853,"value":"filteredData = data.filter((d) => d.date === selectedYear)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1865,"value":"chart.updateChart(filteredData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1655,"value":"topTen2019 = data\n .filter((d) => d.date == 2019)\n .sort((a, b) => b.value - a.value)\n .slice(0, 10)\n .map((d) => d.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1699,"value":"xAxis = d3\n .axisBottom(linearScale)\n .ticks(4)\n .tickFormat((x) => x.toLocaleString(\"de-CH\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1805,"value":"forceData2019 = companiesByYear(2019)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1789,"value":"function companiesByYear(year) {\n return data.filter((d) => d.date === year).sort((a, b) => b.value - a.value);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1769,"value":"### Ressourcen\n- https://observablehq.com/@d3/bar-chart-race","pinned":true,"hidden":false,"mode":"md"},{"id":809,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html"},{"id":245,"value":"import {style} from \"@cas-datenvisualisierung/style\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}

Lernziel

Appendix