31:T9e8,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})` ) ); 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); function updateChart(searchResult) { const g = svg .selectAll("g.node") .data(simulation.nodes()) .join( (enter) => enter .append("g") .attr("class", "node") .call((g) => g .append("circle") .attr("r", (d) => circleScale(d.value)) .style("fill", (d) => colorScale(d.name)) ), (update) => update, (exit) => exit.remove() ) .call((g) => g .style("opacity", (d) => topTen2019.includes(d.name) || d.name === searchResult ? 1 : 0.3 ) .style("stroke", "black") .style("stroke-width", (d) => (d.name === searchResult ? 3 : 0)) .attr("transform", (d) => `translate(${d.x},${d.y})`) ); } 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 Object.assign(svg.node(), { updateChart }); }32:[{"id":"d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","href":"https://static.observableusercontent.com/files/d272c7ecf74746dee12ec29553f026cf29dcbf76f7d5a4c8d9f0671b77e523650d45180ea12a372f6f01163e00954d78da0179dd61ac4d1ae00020ffb199b32c","name":"category-brands@1.csv","type":"text/csv","lastModified":1652009066499.24,"size":57971}] 2f:{"title":"Blasen-Balkendiagramm mit Suche – Lösung","cells":[{"id":0,"value":"# Blasen-Balkendiagramm mit Suche – 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 = 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":1853,"value":"allCompanies = Array.from(new Set(data.map((d) => d.name))).sort(englishSorter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1850,"value":"## The Observable Way","pinned":true,"hidden":false,"mode":"md"},{"id":1846,"value":"viewof observableSearchResults = Inputs.search(allCompanies, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1848,"value":"observableSearchResult = observableSearchResults[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1871,"value":"## The JavaScript Way","pinned":true,"hidden":false,"mode":"md"},{"id":1874,"value":"{\n let input = document.createElement(\"input\");\n input.type = \"search\";\n input.addEventListener(\"input\", searchInputHandler);\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1878,"value":"function searchInputHandler(event) {\n let textToSearchFor = event.currentTarget.value;\n let potentialMatch = allCompanies.find(\n (d) => englishComparison(d, textToSearchFor) === 0\n );\n if (potentialMatch) {\n mutable lookUpResult = potentialMatch;\n return;\n }\n\n potentialMatch = allCompanies.find((d) =>\n d\n .toLocaleLowerCase(\"en\")\n .startsWith(textToSearchFor.toLocaleLowerCase(\"en\"))\n );\n if (potentialMatch) {\n mutable lookUpResult = potentialMatch;\n return;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1918,"value":"mutable lookUpResult = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1894,"value":"englishComparison = new Intl.Collator(\"en\", {\n usage: \"search\",\n ignorePunctuation: true,\n sensitivity: \"base\"\n}).compare","pinned":false,"hidden":false,"mode":"ojs"},{"id":1935,"value":"englishSorter = new Intl.Collator(\"en\", {\n ignorePunctuation: true\n}).compare","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"searchResult = lookUpResult","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1945,"value":"chart.updateChart(searchResult)","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":"$W32","stdlib":"1","titling":"auto"}

Lernziel

Appendix