30:T5c6,describe = { const testVars = { treatment: 'nominal', group: 'nominal', response: 'metric' } const stats = new Statistics(data, testVars) const summary = [...group(data, d=>d.treatment)] .reduce((acc, [key, array]) => { acc[`meanTreatment${key}`] = stats.arithmeticMean(array.map(d => d.response)) // mean acc[`stdTreatment${key}`] = stats.standardDeviation(array.map(d => d.response)) // std acc[`medianTreatment${key}`] = stats.median(array.map(d => d.response)) // meadian return acc }, {}) const u = stats.mannWhitneyU('treatment', 'response') return html`

	Control	Treatment
Mean	${summary.meanTreatment1.toFixed(3)}	${summary.meanTreatment2.toFixed(3)}
Median	${summary.medianTreatment1.toFixed(3)}	${summary.medianTreatment2.toFixed(3)}
Standard Deviation	${summary.stdTreatment1.toFixed(3)}	${summary.stdTreatment2.toFixed(3)}
p value	${u.pTwoTailed.toFixed(5)}

` // return html`

p-value = ${u.pTwoTailed} ${m}

` }31:T638,describeMale = { const testVars = { treatment: 'nominal', group: 'nominal', response: 'metric' } const stats = new Statistics(data, testVars) const grp = 'male' const summary = [...group(data.filter(d => d.group==grp), d=>d.treatment)] .reduce((acc, [key, array]) => { acc[`meanTreatment${key}`] = stats.arithmeticMean(array.map(d => d.response)) // mean acc[`stdTreatment${key}`] = stats.standardDeviation(array.map(d => d.response)) // std acc[`medianTreatment${key}`] = stats.median(array.map(d => d.response)) // meadian return acc }, {}) const u = stats.mannWhitneyU('treatment', 'response') return html`

Summary table for the ${capitalize(grp)} subgroup

	Control	Treatment
Mean	${summary.meanTreatment1.toFixed(3)}	${summary.meanTreatment2.toFixed(3)}
Median	${summary.medianTreatment1.toFixed(3)}	${summary.medianTreatment2.toFixed(3)}
Standard Deviation	${summary.stdTreatment1.toFixed(3)}	${summary.stdTreatment2.toFixed(3)}
p value	${u.pTwoTailed.toFixed(5)}

` // return html`

p-value = ${u.pTwoTailed} ${m}

` }32:T63c,describeFemale = { const testVars = { treatment: 'nominal', group: 'nominal', response: 'metric' } const stats = new Statistics(data, testVars) const grp = 'female' const summary = [...group(data.filter(d => d.group==grp), d=>d.treatment)] .reduce((acc, [key, array]) => { acc[`meanTreatment${key}`] = stats.arithmeticMean(array.map(d => d.response)) // mean acc[`stdTreatment${key}`] = stats.standardDeviation(array.map(d => d.response)) // std acc[`medianTreatment${key}`] = stats.median(array.map(d => d.response)) // meadian return acc }, {}) const u = stats.mannWhitneyU('treatment', 'response') return html`

Summary table for the ${capitalize(grp)} subgroup

	Control	Treatment
Mean	${summary.meanTreatment1.toFixed(3)}	${summary.meanTreatment2.toFixed(3)}
Median	${summary.medianTreatment1.toFixed(3)}	${summary.medianTreatment2.toFixed(3)}
Standard Deviation	${summary.stdTreatment1.toFixed(3)}	${summary.stdTreatment2.toFixed(3)}
p value	${u.pTwoTailed.toFixed(5)}

` // return html`

p-value = ${u.pTwoTailed} ${m}

` }33:T648,baseballTable = { const colors = d3.scaleOrdinal(d3.schemePastel2).domain(['1', '2', '3']).range() const data = getBaseballSummaryBy('year') const summaryStats = data.map(([year, playersData]) => { const rows = playersData.map((player, i) => `${player.atBats}${player.hits}${(player.hits/player.atBats).toFixed(3)}`).join('') return `${year}${rows}` }) return html` ${summaryStats}


David Justice			Derek Jeter
At Bats	Hits	Batting Average	At Bats	Hits	Batting Average

` }34:Taa3,baseballBars = { const data = getBaseballSummaryBy() const colors = d3.scaleOrdinal(d3.schemePastel2).domain(data[0][1].map(d => d.name)) const svg = d3.select(DOM.svg(width, 300)) const xScale = d3.scaleBand() .range([0, width/1.5-margin.left-margin.right]) .domain(data.map(([key, d]) => key)) .paddingOuter(0.05) .paddingInner(0.2) const yScale = d3.scaleLinear() .range([height-margin.top-margin.bottom, 0]) .domain([0, 0.35]) const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) const barsGroup = g.selectAll(".barGroup").data(data).enter() .append('g') .attr('class', 'barGroup') .attr('transform', d => `translate(${xScale(d[0])}, ${0})`) const bars = barsGroup.selectAll('.bar').data(([key, d], i) => d.map(playerData => playerData)).enter() bars.append('rect') .attr('x', (d, i) => i* xScale.bandwidth()/2) .attr('y', d => yScale(d.hits/d.atBats)) .attr('width', xScale.bandwidth()/2) .attr('height', d => (height-margin.top-margin.bottom)-yScale(d.hits/d.atBats)) .attr('fill', d => colors(d.name)) bars.append('text') .attr('x', (d, i) => xScale.bandwidth()/4 + i*xScale.bandwidth()/2) .attr('y', d => yScale(d.hits/d.atBats)) .attr('dy', '-0.3em') .attr('text-anchor', 'middle') .text(d => (d.hits/d.atBats).toFixed(3)) const gXaxis = g.append('g') .attr('transform', `translate(${0}, ${height-margin.top-margin.bottom})`) .call(d3.axisBottom(xScale)) gXaxis.selectAll('.tick text').attr('font-size', 14) gXaxis.selectAll('.tick line').remove() const gYaxis = g.append('g') .attr('transform', `translate(${0}, ${0})`) .call(d3.axisLeft(yScale)) gYaxis.selectAll('.tick text').attr('font-size', 14) gYaxis.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text('Batting Average') // legend const legend = g.append('g') .attr('transform', `translate(${width/1.65}, ${height/4})`) legend.append('text') .attr('x', 0) .attr('y', 0) .text('Players:') .style('text-decoration', 'underline') .style('font-weight', 'bold') const legendItems = legend.selectAll('.legendItem').data(colors.domain()).enter().append('g') legendItems.append('rect') .attr('x', 0) .attr('y', (d, i) => 10 + i*20) .attr('width', 15) .attr('height', 15) .attr('fill', d => colors(d)) legendItems.append('text') .attr('x', 20) .attr('y', (d, i) => 10+ i*20 + 13) .attr('fill', 'black') .text(d => d) return svg.node() }35:T96e,plotData = (dataSet, props) => { const {colorScale=null, showBoxPlot=false, groupColor=null, showLegend=false} = props const boxOffset = 30 const svg = d3.select(DOM.svg(width/1.5, height)) let gBoxplot const gAxes = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) if (showBoxPlot) { gBoxplot = svg.append('g') } const gBeeswarm = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) .call(drawBeeswarmFor(dataSet, {colorScale: colorScale, filterAccessor:()=>true, groupColor: groupColor})) gAxes.append('g') .attr('transform', `translate(${0},${innerHeight})`) .call(d3.axisBottom(xScale)) .call(g => g.selectAll(".tick text") .attr('font-size', 15) .attr("font-weight", "bold") .text(d => d == 1 ? 'Control' : `Treatment`)) .selectAll('.tick line').remove() gAxes.append('g') .attr('transform', `translate(${0},${0})`) .call(d3.axisLeft(yScale)) .call(g => g.append('text') .attr('class', 'test') .attr('transform', `translate(${-margin.left/2}, ${innerHeight/2}) rotate(-90)`) .attr("font-weight", "bold") .attr("text-anchor", "middle") .attr('font-size', 15) .attr('fill', 'black') .text('Response')) if (showBoxPlot) { gBoxplot.attr('transform', `translate(${margin.left+boxOffset},${margin.top})`) gBeeswarm.attr('transform', `translate(${margin.left-boxOffset},${margin.top})`) gBoxplot.call(drawBoxplotFor(dataSet, d => d.treatment == 1)) gBoxplot.call(drawBoxplotFor(dataSet, d => d.treatment == 2)) } if (showLegend) { // legend const legend = svg.append('g') .attr('transform', `translate(${width/1.9}, ${height/6})`) legend.append('text') .attr('x', 0) .attr('y', 0) .text('Groups:') .style('text-decoration', 'underline') .style('font-weight', 'bold') const legendItems = legend.selectAll('.legendItem').data(colorScale.domain()).enter().append('g') legendItems.append('rect') .attr('x', 0) .attr('y', (d, i) => 10 + i*20) .attr('width', 15) .attr('height', 15) .attr('fill', d => colorScale(d)) legendItems.append('text') .attr('x', 20) .attr('y', (d, i) => 10+ i*20 + 13) .attr('fill', 'black') .text(d => d) } return svg.node() }36:T678,drawBoxplotFor = (fullDataset, filterAccessor) => g => { // config const boxWidth = 25 const subData = fullDataset.filter(filterAccessor) const values = subData.map(yAccessor).sort((a,b) => a-b) const min = values[0]; const max = values[values.length-1]; const q1 = d3.quantile(values, 0.25); const q2 = d3.quantile(values, 0.50); const q3 = d3.quantile(values, 0.75); const iqr = q3 - q1; const r0 = Math.max(min, q1 - iqr * 1.5); const r1 = Math.min(max, q3 + iqr * 1.5); const range = [r0, r1]; const outliers = subData.filter(v => yAccessor(v) < r0 || yAccessor(v) > r1) const boxplot = g.append('g') .attr('transform', `translate(${xScale(xAccessor(subData[0]))}, ${yScale(q2)})`) // centered on the median boxplot.append('line') .attr('transform', `translate(0, -${yScale(q2)})`) .attr('y1', yScale(r1)) .attr('y2', yScale(r0)) .attr('stroke', 'black') boxplot.append('rect') .attr('transform', `translate(0, -${yScale(q2)})`) .attr('x', -boxWidth/2) .attr('y', yScale(q3)) .attr('width', boxWidth) .attr('height', yScale(q1)-yScale(q3)) .attr("fill", "#ddd") boxplot.append('line') .attr('x1', -boxWidth/2) .attr('x2', boxWidth/2) .attr('stroke-width', 2) .attr('stroke', '#00BFFF') boxplot.selectAll('.outlier').data(outliers).enter() .append('circle') .attr('class', 'outlier') .attr('cx', d=>xScale(xAccessor(d))-xScale(xAccessor(subData[0]))) .attr('cy', d=>d.y-yScale(q2)) .attr('r', 3) .attr('fill', 'none') .attr('stroke', 'black') return boxplot }37:[] 2e:{"title":"Simpson's paradox","cells":[{"id":0,"value":"md`# Simpson's paradox\n\n[Simpson’s paradox](https://en.wikipedia.org/wiki/Simpson%27s_paradox), also called Yule-Simpson effect, refers to a phenomena whereby the association between two categorical variables in the aggregated data (the population as a whole) appears opposite to the association between the same two variables after controlling for one or more other variables (conditional subpopulations).\n\nIn other words, the Simpson's paradox can be the source of confusions and lead to counter-intuitive results, making an association appear, disappear, or even become reversed within the same data set depending on how one chooses to break the population into subgroups. This is an important phenomena to be aware of, especially when dealing with causal inference.\n\n${(navigator.userAgent.match('HeadlessChrome')) ? html`

` : ''}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"md`## Simple example\n\nLet's imagine you developped a new drug to treat a disease, and you got all the necessary approvals to conduct a clinical trial. Great!\n\nYou recruit some patients, randomly divide them into two groups (a group receiving a placebo, *Control*, and a group receiving your drug, *Treatment*), and your measure your metric of interest (*Response*) to quantify the effect of your drug. In your case, let's consider a lower response as being beneficial (e.g.: representing for example a lower reaction to a specific stress).\n\nBelow are the results.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"plotData(data, {showBoxPlot:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"md`You're pretty excited: your drug seems to decrease the response, which means the patients are coping better with stress!\n\nWell, not so fast. Unknown to you (you did your experiment blind), the population you're testing your drug on consists of a mix of male/female patients.\nBelow is how the distribution of male/female ended up being with your random assignment to groups:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"plotData(data, {colorScale: d3.scaleOrdinal(d3.schemePastel2).domain(['male', 'female']), showLegend:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"md`**What if we explore the effets of the drug on those subgroups?**\n\nHere are the results for the **male** subgroup:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"plotData(data.filter(d => d.group =='male'), {showBoxPlot:true, colorScale: d3.scaleOrdinal(d3.schemePastel2).domain(['male', 'female']), groupColor: 'male'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"md`And here are the results for the **female** subgroup:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"plotData(data.filter(d => d.group =='female'), {showBoxPlot:true, colorScale: d3.scaleOrdinal(d3.schemePastel2).domain(['male', 'female']), groupColor:'female'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"md`As you can see, when you consider the subgroups in isolation, the observed effect of the drug ends up being opposite to the observed effect of the same drug when we consider the whole population.\n\nThis is an illustration of the **Simpson's Paradox**!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"md`# Thanks for the theory, care giving a real example?\n\nSure! What about a baseball example?\n\nLet's consider **David Justice** ([data](https://www.baseball-reference.com/players/j/justida01.shtml)) and **Derek Jeter** ([data](https://www.baseball-reference.com/players/j/jeterde01.shtml)) batting average during the 3 seasons spanning the 1995-1997 period:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"md`For each of those three seasons, the batting average of David Justice was always higher than the one of Derek Jeter\n- in 1995, Justice had a higher batting average, 0.253 to 0.250\n- in 1996, Justice had a higher batting average, 0.321 to 0.314\n- in 1997, Justice had a higher batting average (again!), 0.329 to 0.291\n\nSo should we conclude that David Justice is better than Derek Jeter?\n\nNot so fast ... If we consider all three seasons combined, Jeter was, in fact, the one with the higher batting average over the period!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"md`\n**Uh??!!!??**\n\nHow can one player be a worse hitter than the other in 1995, 1996, and 1997 but better over the three-year period? \n\nNotice that the at bats (denominators) are not distributed evenly year to year. \n- Jeter had very few at bats in 1995 (only 48 ... which represents ${(100*48/1284).toFixed(1)}% of the 1284 total at bats he had over the three-year period), so his rather low batting average that year had little effect on his overall average.\n- On the other hand the at bats of Justice's least productive year, 1995, represents ${(100*411/1046).toFixed(1)}% of the total number of at bats he had over the three-year period (411 out of 1046) so that brought his overall batting average down.\n\nOnce you realize that \"better hitter\" is defined not by an actual head-to-head competition but by a weighted average that takes into account how often each player played, the paradox starts to wane.\n\nStill, this is a real example of the **Simpson's paradox** at play.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"baseball = [\n {year: 1995,\n players: [\n {name: 'David Justice', atBats: 411, hits: 104},\n {name: 'Derek Jeter', atBats: 48, hits: 12}\n ]\n },\n {year: 1996,\n players: [\n {name: 'David Justice', atBats: 140, hits: 45},\n {name: 'Derek Jeter', atBats: 582, hits: 183}\n ]\n },\n {year: 1997,\n players: [\n {name: 'David Justice', atBats: 495, hits: 163},\n {name: 'Derek Jeter', atBats: 654, hits: 190}\n ]\n },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"getBaseballSummaryBy = (attribute='year', sumBy='name') => {\n const data = baseball.sort((a,b) => a.year - b.year)\n .reduce((acc, val) => {\n const players = val.players.map(p => ({year: val.year, ...p}))\n return [...acc, ...players]\n }, [])\n \n const groupedBy = [...group(data, d=>d[attribute])]\n const combined = [...group(data, d=>d[sumBy])]\n .map(([key, val]) => \n val.reduce((acc, curr) => {\n acc.atBats += curr.atBats\n acc.hits += curr.hits\n return acc\n }, {year: 'combined', name: key, atBats: 0, hits: 0})\n )\n return [...groupedBy, ['combined', combined]]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"data = getData(200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"checkSignificance = (data, group, metric) => {\n const testVars = {}\n testVars[group] = 'nominal'\n testVars[metric] = 'metric'\n \n const stats = new Statistics(data, testVars)\n \n const u = stats.mannWhitneyU(group, metric)\n \n return u.pTwoTailed\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"getData = n => {\n \n // generate data that'll show significance for Mann-Whitney U test\n let dataSet\n let significant = false\n \n while (!significant) {\n dataSet = [...dataGenerator(n)]\n significant = checkSignificance(dataSet, 'treatment', 'response')<0.01\n }\n \n // mutates data with force layout for beeswarm positioning\n xScale.domain([...new Set(dataSet.map(xAccessor))].sort())\n .padding(0.7)\n yScale.domain(d3.extent(dataSet, yAccessor))\n .nice()\n \n const simulation = d3.forceSimulation()\n .nodes(dataSet)\n .force(\"forceX\", d3.forceX().x(d => xScale(xAccessor(d))).strength(0.2))\n .force(\"forceY\", d3.forceY().y(d => yScale(yAccessor(d))).strength(1))\n .force(\"collide\", d3.forceCollide(radius*1.2).strength(0.7).iterations(1))\n .stop()\n \n for (let i=0; i<200; i++){\n simulation.tick()\n }\n \n return dataSet\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"function* dataGenerator(n) {\n let i = 0\n while (i g => {\n const {colorScale=null, groupColor=null, filterAccessor=()=>true} = props\n \n const subData = fullDataset.filter(filterAccessor)\n \n const beeswarm = g.append('g')\n \n const nodes = beeswarm.selectAll('.dot').data(subData).enter()\n .append('circle').attr('class', 'dot')\n .attr(\"r\", radius)\n .attr(\"fill\", d => colorScale \n ? groupColor \n ? colorScale(groupColor)\n : colorScale(colorAccessor(d))\n : 'lightgray')\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n \n return beeswarm\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"capitalize = (s) => {\n if (typeof s !== 'string') return ''\n return s.charAt(0).toUpperCase() + s.slice(1)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"radius = 3.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"colorAccessor = d => d.group","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"xAccessor = d => d.treatment","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"yAccessor = d => d.response","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"xScale = d3.scalePoint()\n .range([0, width/1.5-margin.left-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"yScale = d3.scaleLinear()\n .range([height-margin.top-margin.bottom, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"innerWidth = width/2-margin.left-margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"innerHeight = height-margin.top-margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"margin = ({top: 10, right: 30, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"Statistics = require('statistics.js@1.0.0/statistics.js').catch(() => window.Statistics)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}