31:T57b,(() => { let width = 400; let height = 300; let x_scale = d3s.scaleLinear().domain([0, Math.max(...data.map(row => row.value))]).range([0, width]); let h = height / data.length; let rows = []; data.forEach((row,idx) => { if (idx !== 0) { let w_top = x_scale(data[idx - 1].value); let w_bottom = x_scale(row.value); rows.push(` `); rows.push(`${Math.round(w_bottom / w_top * 100)}%`); } rows.push(` `); rows.push(`${row.value}`); }); return html``; })()32:T559,(() => { let width = 400; let height = 300; let x_scale = d3s.scaleLog().domain([1, Math.max(...data.map(row => row.value))]).range([0, width]); let h = height / data.length; let rows = []; data.forEach((row,idx) => { if (idx !== 0) { let w_top = x_scale(data[idx - 1].value); let w_bottom = x_scale(row.value); rows.push(` `); rows.push(`${Math.round(row.value / data[idx-1].value * 100)}%`); } rows.push(``); rows.push(`${row.value}`); }); return html``; })()33:T6dd,(() => { let width = 400; let height = 300; let x_scale = d3s.scaleLinear().domain([0, Math.max(...data.map(row => row.value))]).range([0, width]); let ratio = bar_height / 100; let n = (data.length - 1) * (1 - ratio) + data.length * ratio; let h = height / n * ratio; let th = height / n * (1-ratio); let rows = data.map((row, i, arr) => { let w = x_scale(row.value); let res = ``; if (ratio > 0.2) { res += `${row.value}`; } if (i === 0) return res; let gradient_id = DOM.uid('gradient'); let prev_w = x_scale(arr[i-1].value); res += ` ` ; if (ratio < 0.8) { res += `${Math.round(row.value / arr[i-1].value * 100)}%`; } return res; }); return html``; })()34:T521,(() => { let width = 400; let height = 300; let narrowing = narrow / 100; let partial_sums = data.reduce( (acc, curr) => acc.concat( (acc.length ? acc[acc.length - 1] : 0) + curr.value ), []); let sum = partial_sums[partial_sums.length - 1]; let width_scale = d3s.scaleLinear().domain([0, height]).range([width, width * narrowing]); let height_scale = d3s.scaleLinear().domain([0, sum]).range([0, height]); let rows = data.map((row, idx) => { let prev = height_scale(idx ? partial_sums[idx - 1] : 0); let h = height_scale(row.value); let top_width = width_scale(prev); let bottom_width = width_scale(prev + h); return ` ${row.value}` }); return html` `; })()35:T5ff,(() => { let width = 400; let height = 300; let a_narrowing = side_a / 100; let b_narrowing = side_b / 100; let partial_sums = data.reduce( (acc, curr) => acc.concat( (acc.length ? acc[acc.length - 1] : 0) + curr.value ), []); let sum = partial_sums[partial_sums.length - 1]; let width_scale = d3s.scaleLinear().domain([0, height]).range([width * a_narrowing, width * b_narrowing]); let height_scale = d3s.scaleLinear().domain([0, sum]).range([0, height]); let rows = data.map((row, idx) => { let h = height_fn(partial_sums[idx] / sum, width * a_narrowing, width * b_narrowing, height); let w = width_fn(width * a_narrowing, width * b_narrowing, height, h); let prev_h = height_fn(idx === 0 ? 0 : partial_sums[idx - 1] / sum, width * a_narrowing, width * b_narrowing, height); let prev_w = width_fn(width * a_narrowing, width * b_narrowing, height, prev_h); return ` ${row.value}` }); return html` `; })()36:[] 2f:{"title":"How Even Do Funnel Charts Work","cells":[{"id":0,"value":"md`# How Even Do Funnel Charts Work`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`__The data__ starts from a total of 10,000, with only 20% pass-through at each stage:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = [\n { label: 'Sent emails', value: 10000, color: '#d7191c' },\n { label: 'Received', value: 2000, color: '#fdae61' },\n { label: 'Opened', value: 400, color: '#abdda4' },\n { label: 'Clicked CTA', value: 80, color: '#2b83ba' }\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`## Funnel chart à la Excel\n\n\n[Excel considers](https://support.office.com/en-us/article/Create-a-funnel-chart-ba21bcba-f325-4d9f-93df-97074589a70e) a _Funnel chart_ to simply be a bar chart with the bars aligned to the middle, so that — assuming the values always decrease — the chart resembles a funnel.\n\n__The widths of the bars__ correspond to the data point values. \n\nThe linear scale makes it a bit hard to visualize things that fall off considerably from stage to stage.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"svg_style = ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"(() => {\n \n let width = 400;\n let height = 300;\n \n let x_scale = d3s.scaleLinear().domain([0, Math.max(...data.map(row => row.value))]).range([0, width]);\n let h = height / data.length;\n \n let rows = data.map((row, i) => (`${row.value}`));\n \n return html``;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`### Let's try a log scale?\n\nA logarithmic scale (base 10) shows that the funnel decreases at a steady rate (20% at each stage), but the visual scale of the stages is confusing.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"(() => {\n \n let width = 400;\n let height = 300;\n \n let x_scale = d3s.scaleLog().domain([1, Math.max(...data.map(row => row.value))]).range([0, width]);\n let h = height / data.length;\n \n let rows = data.map((row, i) => (`${row.value}`));\n \n return html``;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`## Lines as data\n\nIf we make the data points instead be the lines (_with the line width corresponding to the value_), and draw trapezoid shapes between the lines, this happens.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`With a _log scale_, the constant rate becomes more obvious, but again: pretty confusing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`\nNow, a problem with this setup is that the data set does not name the _processes_ that cause the numbers to fall off. Therefore, we can't assign colors / legends to the slices in the funnel... it's only the lines that are labeled (and potentially a color assigned to them).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`## Why not both?\n\nLet's try to combine the two. The slider below dictates how thick the bars corresponding to data points are. We add in trapezoids to connect the bars, and color them in gradients interpolating the data point colors.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof bar_height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`## Pyramid charts\n\nPyramid charts show parts of the whole (like a pie chart), while also setting a particular order of the stages. They may be shaped as inverted pyramids, funnels or, at the extreme (when the tip is as thick as the base), as a stacked column chart. \n\nWe can pick either the _height_ or the _area_ of the slice as our data points.\n\n### Height as data\n\nMapping values to heights of slices is easier to compute:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"viewof narrow = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`...but the visual proportions are not accurate. Let's try making the slice areas proporitional to the data point values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`### Area as data\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`Intuitively, if we map the data point values to the _areas_ rather than the heights of the trapezoids, we might get a more accurate visual representation. But to do this, we need to figure out the math. Given a trapezoid:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"md`We know that its area is ${tex`\\frac{a+b}{2} × h`}, that is the average of its bases times its height. We also notice that lines parallel to the bases vary in length, from ${tex`a`} to ${tex`b`}, as we descend from the top of the trapezoid, as ${tex`h_i`} goes from ${tex`0`} to ${tex`h`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`We can write the length ${tex`x`} of our line as a function of the base lengths and the fraction of the height:\n\n${tex`\nx_i = a + \\frac{h_i}{h} (b - a),\\quad h > 0\n`}\n\nThe area of the gray trapezoid is:\n\n${tex`\n A_i = \\frac{a + x_i}{2} h_i \n`}\n\nAnd replacing ${tex`x`} with the formula above we ultimately get:\n\n${tex`\n A_i = h_i^2 \\cdot \\frac{b - a}{2h} + h_i \\cdot a,\\quad h > 0\n`}\n\nBack to our problems, we want our ${tex`A_i`} areas to be proportions of the whole trapezoid area, i.e.: \n\n${tex`A_i = \\frac{a + b}{2}h \\cdot t_i, \\quad t_i \\in [0,1], \\quad t_0 + t_1 + ... + t_n = 1`}\n\nSo, for each slice in our diagram we can compute the height ${tex`h_i`}:\n\n${tex`\n h_i^2 \\cdot \\frac{b - a}{2h} + h_i \\cdot a - \\frac{a + b}{2}h \\cdot t_i = 0,\\quad h > 0\n`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`\n\nThis is a [quadratic equation](https://en.wikipedia.org/wiki/Quadratic_equation) when ${tex`a \\not = b`}. The equation has two solutions, and after simplification they look like this:\n\n${tex`\n\nh_i = \\Large\\frac{-a \\pm \\sqrt{a^2 + t_i (b^2 - a^2)}}{b-a} \\normalsize \\cdot h\n\n`}\n\nOut of which we pick the positive one \\[n.b. is this _always_ the positive one?\\]:\n\n${tex`\n\n\\boxed{h_i = \\frac{-a + \\sqrt{a^2 + t_i (b^2 - a^2)}}{b-a} \\cdot h}\n\n`}\n\nIn the particular case of equal base lengths (${tex`a = b`}), the trapezoid becomes a parallelogram, and the equation above is instead linear, since we get rid of the ${tex`h_1^2`} term:\n\n${tex`\n\nh_i = \\frac{a + b}{2a} t_i \\cdot h\n\n`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"viewof side_a = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"viewof side_b = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"width_fn = (a, b, h, y) => a + y/h * (b - a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"height_fn = (t, a, b, h) => {\n if (a === 0 && b === 0) {\n throw new Error(\"The trapezoid can't have both bases be zero-length.\");\n }\n if (a === b) {\n return (a + b) / 2 * h * t / a;\n }\n return (-a + Math.sqrt(a * a + (b*b - a*a) * t)) * h / (b - a);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3s = require('d3-scale')","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"shape = require('d3-shape');","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"culori = require('culori')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}