32:Tbd6,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})` ) ); // Y-Achse svg .append("text") .attr("class", "yAxis") .attr("y", (text) => colorLegend + bandScale(1)) .attr("dominant-baseline", "central"); // X-Achse svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(${labelPadding},${height - margin.bottom})`) .call(xAxis); function updateChart(year) { // Y-Achse mit dem auswewählten Jahr aktualisieren svg .select("text.yAxis") .transition() .duration(500) .style("opacity", 0) .text(year) .transition() .duration(500) .style("opacity", 1); // Nur Daten eines Jahres auswählen const filteredData = data.filter((d) => d.date == year); const simulation = d3 .forceSimulation(filteredData) .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(1)) ) .stop() .tick(300); const g = svg .selectAll("g.node") .data(simulation.nodes(), (d) => d.name) .join( (enter) => enter.append("g").call((g) => g .append("circle") .attr("r", (d) => circleScale(d.value)) .style("fill", (d) => colorScale(d.name)) .style("opacity", 0) .attr("transform", (d) => `translate(${d.x},${d.y})`) ), (update) => update, (exit) => exit.transition().duration(3000).style("opacity", 0).remove() ) .attr("class", "node") .attr("title", (d) => d.name) .call((g) => g .select("circle") .transition() .duration(3000) .attr("transform", (d) => `translate(${d.x},${d.y})`) .attr("r", (d) => circleScale(d.value)) .style("opacity", (d) => (topTen2019.includes(d.name) ? 1 : 0.3)) ); } 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":1652710132344.425,"size":57971}] 30:{"title":"Blasen-Balkendiagramm mit Select – Lösung aus dem Unterricht","cells":[{"id":0,"value":"# Blasen-Balkendiagramm mit Select – 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 = 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 = 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([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":1869,"value":"viewof select = Inputs.select(years, { label: \"Select one\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1852,"value":"chart.updateChart(select)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"$32","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