32:T9b2,{ 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); 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", "black") .style("stroke-width", (d) => d.name === selectedDataPoint.name && d.date === selectedDataPoint.date ? 2 : 0 ) .style("opacity", (d) => topTen2019.includes(d.name) || (d.name === selectedDataPoint.name && d.date === selectedDataPoint.date) ? 1 : 0.3 ) .attr("transform", (d) => `translate(${d.x},${d.y})`) ) .on("click", (event, datum) => { mutable selectedDataPoint = 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":1651994523574.789,"size":57971}] 30:{"title":"Blasen-Balkendiagramm mit mehr Infos nach einem Klick – Lösung","cells":[{"id":0,"value":"# Blasen-Balkendiagramm mit mehr Infos nach einem Klick – Lösung","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1957,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"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":1446,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1857,"value":"

${selectedDataPoint.name}

${selectedDataPoint.category}

Wert in ${selectedDataPoint.date}: ${formatValue(selectedDataPoint.value)}

","pinned":false,"hidden":false,"mode":"html"},{"id":1892,"value":"Plot.plot({\n width: 300,\n height: 200,\n marginLeft: 50,\n x: {\n tickFormat: (x) => x,\n domain: d3.extent(data, (d) => d.date)\n },\n y: {\n tickFormat: (x) => x.toLocaleString(\"de-CH\"),\n domain: d3.extent(data, (d) => d.value),\n ticks: 5\n },\n marks: [\n Plot.ruleX([selectedDataPoint], { x: \"date\", stroke: \"#ccc\" }),\n Plot.lineX(\n data.filter((d) => topTen2019.includes(d.name)),\n { x: \"date\", y: \"value\", z: \"name\", opacity: 0.1 }\n ),\n Plot.lineX(\n data.filter((d) => d.name === selectedDataPoint.name),\n { x: \"date\", y: \"value\", strokeWidth: 2 }\n ),\n Plot.dot(\n data.filter(\n (d) =>\n d.name === selectedDataPoint.name && d.date === selectedDataPoint.date\n ),\n { x: \"date\", y: \"value\", fill: \"red\", r: 5 }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1847,"value":"mutable selectedDataPoint = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1863,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1872,"value":"formatValue = new Intl.NumberFormat(\"de-CH\", {\n style: \"currency\",\n currency: \"USD\",\n currencyDisplay: \"name\",\n useGrouping: \"min2\",\n trailingZeroDisplay: \"stripIfInteger\"\n}).format","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