31:T4eb,Plot.plot({ height: 640, width: 1200, x: {domain: [0, 10000]}, r: { range: [0, 16], legend: true, }, color: { range: ["#559BD5", "#72BB6F", "#DDEBF7", "#F3D039", "#C3423F"], legend: true, // legend: "ramp", columns: 7, }, marks: [ Plot.dot( dataS .filter(d => d.Einkommensstufen == selector) .filter(d => d.Jahr == radio), Plot.dodgeY({ x: "Einkommenshöhe", fill: "Haushaltstyp", anchor: "bottom", r: d => d.n / 2 * Math.PI, title: d => `Perzentil: ${d.quantile} \n Beobachtungen im Perzentil: ${d.n}`, stroke: "black", strokeWidth: 1, symbol: "circle", // symbol: "square" }) ), Plot.text( dataS .filter(d => d.Einkommensstufen == selector) .filter(d => d.Jahr == radio), Plot.dodgeY({ x: "Einkommenshöhe", fill: "Haushaltstyp", r: d => d.n / 2 * Math.PI, // filter: (d) => d.n > 1500, anchor: "bottom", text: "quantile", stroke: "black", fill: "black", strokeWidth: 0.1, fontSize: d => Math.sqrt(d.n)/4, pointerEvents: "none" }) ), ], tooltip: { opacity: 0.5, } })32:Tc0d,display = { const items1 = [...new Set(data.map(d => d["Einkommensstufen"]))]; const items2 = [...new Set(data.map(d => d["Haushaltstyp"]))]; const items3 = [...new Set(data.map(d => d["Jahr"]))]; const selectFilter = vl.selectPoint("selectFilter") .fields("Einkommensstufen", // "Haushaltstyp", // "Jahr" ) .value({ "Einkommensstufen": items1[1], // "Haushaltstyp": items2[1], // "Jahr": items3[1] }) .bind({ "Einkommensstufen": vl.menu(items1).name("Einkommensstufen: "), // "Haushaltstyp": vl.menu(items2).name("Haushaltstyp: "), // "Jahr": vl.menu(items3).name("Jahr: ") }); const chartHist1 = vl.markBar({ stroke: "black", clip: true }) .params(selectFilter) .data(data) .transform( vl.filter(selectFilter), {filter: "datum.Jahr == 2020"} ) .encode( vl.x() .bin({ step: 250 }) .fieldQ("Einkommenshöhe") .scale({ domain: [0, 10000], }) .axis({ values: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000] }), vl.y({aggregate: "count"}) .axis(null) .scale({ domain: [0, 125], }), vl.color() .fieldN("Haushaltstyp") .scale({ range: ["#559BD5", "#72BB6F", "#DDEBF7", "#F3D039", "#C3423F"], type: "linear", }) .legend({ labelLimit: 1000, orient: "top", direction: "vertical", }), vl.strokeWidth() .value(0.75), // vl.row().fieldN("Jahr") ) .width(720) .height(200) const chartHist2 = vl.markBar({ stroke: "black", clip: true }) .params(selectFilter) .data(data) .transform( vl.filter(selectFilter), {filter: "datum.Jahr == 2006"} ) .encode( vl.x() .bin({ step: 250 }) .fieldQ("Einkommenshöhe") .scale({ domain: [0, 10000], }) .axis({ values: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000] }), vl.y({aggregate: "count"}) .axis(null) .scale({ domain: [0, 125], }), vl.color() .fieldN("Haushaltstyp") .scale({ range: ["#559BD5", "#72BB6F", "#DDEBF7", "#F3D039", "#C3423F"], type: "linear", }) .legend({ labelLimit: 1000 }), vl.strokeWidth() .value(0.75), // vl.row().fieldN("Jahr") ) .width(720) .height(200) return vl.vconcat(chartHist1, chartHist2) // .resolve({ // /legend: {fill: "independent", color: "independent"}, // scale: {fill: "independent", color: "independent"} // }) .config({ view: {stroke: null}, locale: {number: {decimal: ",", thousands: ".", format: ',.6r', grouping: [3]}}, padding: {"left": 5, "top": 5, "right": 5, "bottom": 5}, }) .render({renderer: 'svg'}); }33:T455,34:T11a7,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/beeswarm function BeeswarmChart(data, { value = d => d, // convience alias for x label, // convenience alias for xLabel group, type = d3.scaleLinear, // convenience alias for xType domain, // convenience alias for xDomain x = value, // given d in data, returns the quantitative x value title = null, // given d in data, returns the title radius = 3, // (fixed) radius of the circles padding = 1.5, // (fixed) padding between the circles marginTop = 10, // top margin, in pixels marginRight = 20, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 20, // left margin, in pixels width = 640, // outer width, in pixels height, // outer height, in pixels fill = "#ccc", // a static fill color, if no group channel is specified groups, // array of group names (the domain of the color scale) colors = d3.schemeTableau10, // an array of colors (for groups) xType = type, // type of x-scale, e.g. d3.scaleLinear xLabel = label, // a label for the x-axis xDomain = domain, // [xmin, xmax] xRange = [marginLeft, width - marginRight] // [left, right] } = {}) { // Compute values. const X = d3.map(data, x).map(x => x == null ? NaN : +x); const T = title == null ? null : d3.map(data, title); const G = group == null ? null : d3.map(data, group); console.log(G) // Compute which data points are considered defined. const I = d3.range(X.length).filter(i => !isNaN(X[i])); // Unique the groups. if (G && groups === undefined) groups = I.map(i => G[i]); groups = G && new d3.InternSet(groups); // Construct scales. const color = G && d3.scaleOrdinal(groups, colors); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); // Construct scales and axes. const xScale = xType(xDomain, xRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); // Compute the y-positions. const Y = dodge(I.map(i => xScale(X[i])), radius * 2 + padding); // Compute the default height; if (height === undefined) height = d3.max(Y) + (radius + padding) * 2 + marginTop + marginBottom; // Given an array of x-values and a separation radius, returns an array of y-values. function dodge(X, radius) { const Y = new Float64Array(X.length); const radius2 = radius ** 2; const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { const ai = a.index; if (radius2 - epsilon > (X[ai] - x) ** 2 + (Y[ai] - y) ** 2) return true; a = a.next; } return false; } // Place each circle sequentially. for (const bi of d3.range(X.length).sort((i, j) => X[i] - X[j])) { // Remove circles from the queue that can’t intersect the new circle b. while (head && X[head.index] < X[bi] - radius2) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(X[bi], Y[bi] = 0)) { let a = head; Y[bi] = Infinity; do { const ai = a.index; let y = Y[ai] + Math.sqrt(radius2 - (X[ai] - X[bi]) ** 2); if (y < Y[bi] && !intersects(X[bi], y)) Y[bi] = y; a = a.next; } while (a); } // Add b to the queue. const b = {index: bi, next: null}; if (head === null) head = tail = b; else tail = tail.next = b; } return Y; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel)); const dot = svg.append("g") .selectAll("circle") .data(I) .join("circle") .attr("cx", i => xScale(X[i])) .attr("cy", i => height - marginBottom - radius - padding - Y[i]) .attr("r", radius) .attr("fill", G ? d => color(G[d]) : fill == null ? "none" : fill) .attr("stroke", "black"); if (T) dot.append("title") .text(i => T[i]); return svg.node(); }35:[{"id":"a13aa469be8fada07573dfc49301e341a53941a878e1329414ac44348ae0a7cb79fe884bae3572598ed6e0295b679918b216e3208d19cb975dbe9c5fc89b37ac","href":"https://static.observableusercontent.com/files/a13aa469be8fada07573dfc49301e341a53941a878e1329414ac44348ae0a7cb79fe884bae3572598ed6e0295b679918b216e3208d19cb975dbe9c5fc89b37ac","name":"exportDoubleDeciles@4.csv","type":"text/csv","lastModified":1683906902396.822,"size":241917},{"id":"88b7ef97cb9f9eca42289739642704c8c9778baabcd0f827b05387109089ba774992fec0f742ef8badfd7f5612731576a7fdefc857ebf110e3c96f4cd4bc0575","href":"https://static.observableusercontent.com/files/88b7ef97cb9f9eca42289739642704c8c9778baabcd0f827b05387109089ba774992fec0f742ef8badfd7f5612731576a7fdefc857ebf110e3c96f4cd4bc0575","name":"exportPercentiles@1.csv","type":"text/csv","lastModified":1683907415498.926,"size":1274450}] 2f:{"title":"Decile Distribution","cells":[{"id":0,"value":"\n# Decile Distribution\n\n## Playground\n\nExploring plots for income distributions, careful: test data\n","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"---\n\n\n## Beeswarm\n","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"viewof selector = Inputs.select([...new Set(dataS.map(d => d.Einkommensstufen))], {label: \"Einkommensstufen\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"viewof radio = Inputs.radio([...new Set(dataS.map(d => d.Jahr).toString().split(','))], {label: \"Jahr\", value: \"2020\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"---\n\n\n## Beeswarm D3\n","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"viewof select = Inputs.select([...new Set(dataS.map(d => d.Einkommensstufen))], {label: \"Einkommensstufen\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof radios = Inputs.radio([...new Set(dataS.map(d => d.Jahr).toString().split(','))], {label: \"Jahr\", value: \"2020\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"chart = BeeswarmChart(dataS.filter(d => d.Einkommensstufen == select).filter(d => d.Jahr == radios), {\n x: d => d.Einkommenshöhe,\n label: \"Haushaltseinkommen in € →\",\n group: d => d.Haushaltstyp,\n radius: 7,\n colors: [\"#559BD5\", \"#72BB6F\", \"#DDEBF7\", \"#F3D039\", \"#C3423F\"],\n type: d3.scaleLinear, // try d3.scaleLog\n // title: d => `${d.Name}\\n${d.Weight_in_lbs.toLocaleString(\"en\")} lbs.`,\n width: 740,\n height: 340,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"---\n\n\n## Histogram\n","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"---\n\n\n# Data and Styles\n","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"dataS = FileAttachment(\"exportDoubleDeciles@4.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = FileAttachment(\"exportPercentiles@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":154,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}