32:T8eb,{ 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})` ) ); 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((d) => colorLegend + bandScale(d.date)) ) .stop() .tick(300); // Zeichnen der Bubbles const g = svg .selectAll("g.node") .data(simulation.nodes()) .join("g") .attr("class", "node") .call((g) => g .append("circle") .attr("r", (d) => circleScale(d.value)) .style("fill", (d) => colorScale(d.name)) .style("stroke-width", (d) => (d.name === selectedDatum.name ? 2 : 0)) .style("stroke", "black") .style("opacity", (d) => (topTen2019.includes(d.name) ? 1 : 0.3)) .attr("transform", (d) => `translate(${d.x},${d.y})`) ) .on("click", (event, datum) => { mutable selectedDatum = datum; }); svg .append("g") .selectAll("text") .data(years) .join("text") .attr("y", (text) => colorLegend + bandScale(text)) .text((text) => text) .attr("dominant-baseline", "central"); svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(${labelPadding},${height - margin.bottom})`) .call(xAxis); return svg.node(); }33:[{"id":"d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","href":"https://static.observableusercontent.com/files/d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","name":"category-brands@1.csv","type":"text/csv","lastModified":1652702082095.786,"size":57971}] 30:{"title":"Blasen-Balkendiagramm mit Klick – Lösung aus dem Unterricht","cells":[{"id":0,"value":"# Blasen-Balkendiagramm mit Klick – Lösung aus dem Unterricht","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 = 1800","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 = d3.range(2000, 2020)","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(years)\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":1852,"value":"Ausgewählte Firma: **${selectedDatum.name}**
\n${selectedDatum.category}
\nWert im Jahr ${selectedDatum.date}: rund ${numberFormatter.format(selectedDatum.value)} Millionen","pinned":true,"hidden":false,"mode":"md"},{"id":1860,"value":"Wert im Jahr 2019: ${data.find(d => d.name === selectedDatum.name && d.date == 2018).value}","pinned":true,"hidden":false,"mode":"md"},{"id":1866,"value":"numberFormatter = new Intl.NumberFormat(\"de-CH\", {\n currency: \"USD\",\n style: \"currency\",\n useGrouping: \"min2\",\n trailingZeroDisplay: \"stripIfInteger\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1896,"value":"frenchNumberFormatter = new Intl.NumberFormat(\"fr-CH\", {\n currency: \"USD\",\n style: \"currency\",\n useGrouping: \"min2\",\n trailingZeroDisplay: \"stripIfInteger\",\n maximumSignificantDigits: 3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1847,"value":"mutable selectedDatum = ({})","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(\"ch-DE\"))","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