29:null 2a:["$","title",null,{"children":"Welch's unequal variances T-Test Box Plot | ARussell-23 | Observable"}] 2f:Tdd1,// Creates a variable named 'summaryStats' for other cells to reference // Square brackets [ ] create an array — a list of items // Each item in the list is a group's statistics, wrapped in curly braces { } summaryStats = [ { // ----- GROUP A ----- // 'group' is the name of this column in the output table // "A" is the value — the label that will appear in the table group: "A", // 'n' is the name of this column in the output table // .length counts how many rows are in groupA n: groupA.length, // 'mean' is the name of this column in the output table // d3.mean() is a D3 function that calculates the average // groupA is the array of rows to calculate on // d => d.score tells D3 which column to use — for each row d, look at its score column // .toFixed(2) rounds the result to 2 decimal places for clean display mean: d3.mean(groupA, d => d.score).toFixed(2), // 'standardDeviation' is the name of this column in the output table // d3.deviation() is a D3 function that calculates standard deviation // standard deviation measures how spread out scores are around the mean // a low sd means scores are clustered together, a high sd means they are spread out // d => d.score tells D3 which column to use // .toFixed(2) rounds to 2 decimal places standardDeviation: d3.deviation(groupA, d => d.score).toFixed(2), // 'min' is the name of this column in the output table // d3.min() finds the lowest value in the array // d => d.score tells D3 which column to look at min: d3.min(groupA, d => d.score), // 'firstQuartile' is the name of this column in the output table // d3.quantile() calculates a percentile // groupA.map(d => d.score) pulls just the score numbers out of each row into a plain array // .sort(d3.ascending) sorts them from lowest to highest — required for quantile to work correctly // 0.25 means the 25th percentile — the value below which 25% of scores fall // this becomes the lower edge of the box in the box plot firstQuartile: d3.quantile(groupA.map(d => d.score).sort(d3.ascending), 0.25), // 'median' is the name of this column in the output table // 0.5 means the 50th percentile — the middle value // this becomes the line inside the box in the box plot median: d3.quantile(groupA.map(d => d.score).sort(d3.ascending), 0.5), // 'thirdQuartile' is the name of this column in the output table // 0.75 means the 75th percentile — the value below which 75% of scores fall // this becomes the upper edge of the box in the box plot thirdQuartile: d3.quantile(groupA.map(d => d.score).sort(d3.ascending), 0.75), // 'max' is the name of this column in the output table // d3.max() finds the highest value in the array max: d3.max(groupA, d => d.score) }, { // ----- GROUP B ----- // identical structure to Group A above // only difference is groupA is replaced with groupB throughout // and the group label is "B" group: "B", n: groupB.length, mean: d3.mean(groupB, d => d.score).toFixed(2), standardDeviation: d3.deviation(groupB, d => d.score).toFixed(2), min: d3.min(groupB, d => d.score), firstQuartile: d3.quantile(groupB.map(d => d.score).sort(d3.ascending), 0.25), median: d3.quantile(groupB.map(d => d.score).sort(d3.ascending), 0.5), thirdQuartile: d3.quantile(groupB.map(d => d.score).sort(d3.ascending), 0.75), max: d3.max(groupB, d => d.score) } ]30:T8c1,// Creates a variable named 'tTest' for other cells to reference // This cell calculates Welch's T-Test between Group A and Group B tTest = { // Pull just the score numbers out of each group into plain arrays const scoresA = groupA.map(d => d.score); const scoresB = groupB.map(d => d.score); // Calculate the mean (average) for each group const meanA = d3.mean(scoresA); const meanB = d3.mean(scoresB); // Calculate the variance for each group // variance measures how spread out scores are around the mean // d3.variance() is D3's built-in variance function const varA = d3.variance(scoresA); const varB = d3.variance(scoresB); // Count the number of participants in each group const nA = scoresA.length; const nB = scoresB.length; // Calculate the standard error // standard error combines the variance and sample size of both groups // Math.sqrt() calculates the square root const se = Math.sqrt(varA / nA + varB / nB); // Calculate the t-statistic // this is the difference between means divided by the standard error // a larger t-statistic means a more significant difference between groups const t = (meanA - meanB) / se; // Calculate degrees of freedom using the Welch-Satterthwaite equation // degrees of freedom roughly reflects the total sample size minus constraints // this is the formula that makes Welch's T-Test work with unequal variances const df = Math.pow(varA / nA + varB / nB, 2) / (Math.pow(varA / nA, 2) / (nA - 1) + Math.pow(varB / nB, 2) / (nB - 1)); // Calculate the p-value using jStat // jStat is a statistics library that handles complex probability calculations // Math.abs() takes the absolute value of t so the calculation works for both directions // multiplying by 2 makes it a two-tailed test — checking for difference in either direction const p = 2 * jStat.ttest(Math.abs(t), df); // Return all results as a single object for other cells to use return { tStatistic: t.toFixed(3), degreesOfFreedom: df.toFixed(1), pValue: p.toFixed(4), // If p is less than 0.05 the result is significant, otherwise it is not significant: p < 0.05 ? "Significant (p < 0.05)" : "Not Significant (p ≥ 0.05)" }; }31:T2fb7,chart = { // ---- STEP 1: SET FIXED DIMENSIONS FOR SVG ---- // Total SVG size in pixels // const creates a constant (not a variable since it doesnt change) for later calculations const svgWidth = 620; const svgHeight = 580; // Margins define the space between the SVG edge and the plot area // marginTop leaves room for the significance bar // marginLeft leaves room for the y axis and its label const marginTop = 80; const marginRight = 30; const marginBottom = 60; const marginLeft = 70; // The plot area is the rectangle inside the margins where data is drawn const plotWidth = svgWidth - marginLeft - marginRight; const plotHeight = svgHeight - marginTop - marginBottom; // ---- STEP 2: FIXED X POSITIONS ---- // Each group has a fixed center x position and a fixed box half-width // Half-width is the distance from the center of the box to its left or right edge // Group A center x position in pixels const xA = marginLeft + plotWidth * 0.25; // Group B center x position in pixels const xB = marginLeft + plotWidth * 0.75; // Half the width of each box in pixels const boxHalfWidth = plotWidth * 0.15; // Whisker cap half-width — 80% of box half-width const capHalfWidth = boxHalfWidth * 0.8; // ---- STEP 3: CALCULATE Y SCALE ---- // The y scale converts a data value (like score 65) to a pixel position on the SVG // y() is a function that converts a score value to a pixel position // higher scores = lower pixel number (SVG y=0 is at the top) // so we flip the scale: (1 - fraction) maps high values to low pixel positions const y = value => marginTop + plotHeight * (1 - (value - yMin) / (yMax - yMin)); // ---- STEP 4: CALCULATE BOX PLOT STATISTICS ---- // We calculate these manually so we control every element of the chart // Helper function that calculates all box plot stats for one group's scores function boxStats(scores) { // sort from lowest to highest — required for quantile to work correctly const sorted = scores.slice().sort(d3.ascending); const q1 = d3.quantile(sorted, 0.25); const median = d3.quantile(sorted, 0.5); const q3 = d3.quantile(sorted, 0.75); // IQR = interquartile range = distance between Q1 and Q3 const iqr = q3 - q1; // whisker ends stop at the furthest real data point within 1.5x IQR // filter keeps only values within the whisker range, then min/max finds the endpoint const lowerWhisker = d3.min(sorted.filter(v => v >= q1 - 1.5 * iqr)); const upperWhisker = d3.max(sorted.filter(v => v <= q3 + 1.5 * iqr)); const mean = d3.mean(sorted); return { q1, median, q3, lowerWhisker, upperWhisker, mean }; } const scoresA = groupA.map(d => d.score); const scoresB = groupB.map(d => d.score); const statsA = boxStats(scoresA); const statsB = boxStats(scoresB); // ---- STEP 5: CREATE THE SVG ELEMENT ---- // d3.create() creates a new SVG element we can draw into //.attr sets and attribute (attribute name, attribute value) - attirbutes are for SVG properties like X, Y, Width, and stroke //.style sets a CSS style property (style name, style value) - styles are for CSS properties like font-family, font-size, background, display // All drawing happens by appending child elements to this SVG const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) // white background so the chart looks clean when exported .style("background", "white") // font settings inherited by all text elements inside the SVG .style("font-family", "sans-serif") .style("font-size", "12px"); // ---- STEP 6: DRAW GRID LINES ---- // Grid lines are drawn first so everything else sits on top of them // d3.ticks() generates evenly spaced tick values across the y range // the second argument (8) is a hint for how many ticks to generate d3.ticks(yMin, yMax, 8).forEach(tickValue => { // for each tick value, draw a horizontal line across the full plot width svg.append("line") .attr("x1", marginLeft) .attr("x2", marginLeft + plotWidth) // y() converts the tick value to a pixel position .attr("y1", y(tickValue)) .attr("y2", y(tickValue)) .attr("stroke", "#e0e0e0") .attr("stroke-width", 1); }); // ---- STEP 7: DRAW Y AXIS ---- // The vertical axis line svg.append("line") .attr("x1", marginLeft).attr("y1", marginTop) .attr("x2", marginLeft).attr("y2", marginTop + plotHeight) .attr("stroke", "#333") .attr("stroke-width", 1); // Y axis tick marks and labels d3.ticks(yMin, yMax, 8).forEach(tickValue => { // short horizontal tick mark on the axis svg.append("line") .attr("x1", marginLeft - 5) .attr("x2", marginLeft) .attr("y1", y(tickValue)) .attr("y2", y(tickValue)) .attr("stroke", "#333") .attr("stroke-width", 1); // numeric label to the left of the tick svg.append("text") .attr("x", marginLeft - 8) .attr("y", y(tickValue)) // dominant-baseline centers the text vertically on the tick .attr("dominant-baseline", "middle") // text-anchor right-aligns the label against the axis .attr("text-anchor", "end") .attr("fill", "#333") .text(tickValue); }); // Rotated y axis label // translate moves to the left edge, vertically centered // rotate(-90) turns the text to run bottom-to-top along the axis svg.append("text") .attr("transform", `rotate(-90) translate(${-(marginTop + plotHeight / 2)}, ${marginLeft - 45})`) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") // pulls the label text from the settings cell .text(settings.axisLabel); // ---- STEP 8: DRAW X AXIS ---- // The horizontal axis line svg.append("line") .attr("x1", marginLeft) .attr("x2", marginLeft + plotWidth) .attr("y1", marginTop + plotHeight) .attr("y2", marginTop + plotHeight) .attr("stroke", "#333") .attr("stroke-width", 1); // Group A label below the axis svg.append("text") .attr("x", xA) .attr("y", marginTop + plotHeight + 25) .attr("text-anchor", "middle") .attr("fill", "#333") // pulls the group name from the settings cell .text(settings.groupAName); // Group B label below the axis svg.append("text") .attr("x", xB) .attr("y", marginTop + plotHeight + 25) .attr("text-anchor", "middle") .attr("fill", "#333") .text(settings.groupBName); // X axis title svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", svgHeight - 10) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") .text("Group"); // ---- STEP 9: DRAW BOX PLOTS ---- // We draw each group separately using fixed x positions // This is a helper function so we don't repeat the same code twice function drawGroup(xCenter, stats, color) { // WHISKER LINE — vertical line from lower to upper whisker svg.append("line") .attr("x1", xCenter).attr("x2", xCenter) // y() converts data values to pixel positions .attr("y1", y(stats.lowerWhisker)) .attr("y2", y(stats.upperWhisker)) .attr("stroke", color) // same thickness as the mean line per your specification .attr("stroke-width", 2.5); // LOWER WHISKER CAP — horizontal line at the bottom of the whisker svg.append("line") .attr("x1", xCenter - capHalfWidth) .attr("x2", xCenter + capHalfWidth) .attr("y1", y(stats.lowerWhisker)) .attr("y2", y(stats.lowerWhisker)) .attr("stroke", color) .attr("stroke-width", 2.5); // UPPER WHISKER CAP — horizontal line at the top of the whisker svg.append("line") .attr("x1", xCenter - capHalfWidth) .attr("x2", xCenter + capHalfWidth) .attr("y1", y(stats.upperWhisker)) .attr("y2", y(stats.upperWhisker)) .attr("stroke", color) .attr("stroke-width", 2.5); // BOX — rectangle from Q1 to Q3 // rect draws a rectangle — x and y are the top-left corner // width and height define its size svg.append("rect") // left edge of the box .attr("x", xCenter - boxHalfWidth) // top edge of the box — y(q3) is higher on screen because Q3 is a larger value .attr("y", y(stats.q3)) // total box width = two half-widths .attr("width", boxHalfWidth * 2) // box height in pixels = distance from Q1 pixel to Q3 pixel .attr("height", y(stats.q1) - y(stats.q3)) .attr("fill", color) .attr("fill-opacity", 0.3) .attr("stroke", color) .attr("stroke-width", 1.5); // MEDIAN LINE — horizontal line across the box at the median value svg.append("line") .attr("x1", xCenter - boxHalfWidth) .attr("x2", xCenter + boxHalfWidth) .attr("y1", y(stats.median)) .attr("y2", y(stats.median)) .attr("stroke", color) .attr("stroke-width", 2.5); // MEAN SQUARE — open square at the mean value // We draw it as a rect with no fill, centered on the mean const squareSize = 10; svg.append("rect") // center the square on xCenter by offsetting half the square size .attr("x", xCenter - squareSize / 2) // center the square on the mean y position .attr("y", y(stats.mean) - squareSize / 2) .attr("width", squareSize) .attr("height", squareSize) // fill none makes the square hollow/open .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 2); } // Call the drawGroup function for each group // passing in the x center position, statistics, and color from settings drawGroup(xA, statsA, settings.colorA); drawGroup(xB, statsB, settings.colorB); // ---- STEP 10: DRAW DATA POINTS ---- // Drawn after the boxes so dots appear on top // All dots are solid black regardless of group data.forEach(d => { // determine which group this row belongs to and use that x center const xCenter = d.group === "A" ? xA : xB; // Math.random() generates a number between 0 and 1 // subtracting 0.5 centers the jitter (shifts both left and right) // multiplying by 24 sets the total jitter range to 24 pixels const jitter = (Math.random() - 0.5) * 24; svg.append("circle") // x position = group center + random jitter .attr("cx", xCenter + jitter) // y position = pixel position of this row's score .attr("cy", y(d.score)) // radius of each dot in pixels .attr("r", 3) // solid black, fully opaque .attr("fill", "black") .attr("fill-opacity", 1); }); // ---- STEP 11: DRAW SIGNIFICANCE BAR ---- // Drawn last so it sits on top of everything // x positions use xA and xB which are the exact center of each box // y position of the horizontal bracket line — sits near the top of the SVG const barY = 30; // y position of the small vertical ticks dropping down from the bracket const tickY = 42; // horizontal bracket line connecting the two group centers svg.append("line") .attr("x1", xA).attr("y1", barY) .attr("x2", xB).attr("y2", barY) .attr("stroke", "black") .attr("stroke-width", 1.5); // left vertical tick svg.append("line") .attr("x1", xA).attr("y1", barY) .attr("x2", xA).attr("y2", tickY) .attr("stroke", "black") .attr("stroke-width", 1.5); // right vertical tick svg.append("line") .attr("x1", xB).attr("y1", barY) .attr("x2", xB).attr("y2", tickY) .attr("stroke", "black") .attr("stroke-width", 1.5); // p-value label centered above the bracket line svg.append("text") // horizontal center between the two group x positions .attr("x", (xA + xB) / 2) // sits just above the bracket line .attr("y", barY - 6) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("fill", "black") // pulls p value and significance label from the tTest cell .text(`p = ${tTest.pValue} — ${tTest.significant}`); // ---- STEP 12: RETURN THE SVG ---- // .node() extracts the raw SVG element from the D3 wrapper so Observable can display it return svg.node(); }32:T59c,// ---- CAPTION GENERATOR ---- // Builds a formatted caption from the chart settings and t-test results // Updates automatically whenever settings or data change caption = { // Determine whether the groups show a significant difference // parseFloat() converts the p-value string back to a number so we can compare it const significant = parseFloat(tTest.pValue) < 0.05; // Build the significance phrase for the bold opening sentence // the ternary operator returns one of two values depending on the condition const showPhrase = significant ? "show" : "do not show"; // Bold opening sentence const boldSentence = `${settings.groupAName} and ${settings.groupBName} groups ${showPhrase} a significant difference when assessed based on ${settings.axisLabel}.`; // Regular body sentence const regularSentence = `Box plot of ${settings.axisLabel} scores across ${settings.groupAName} and ${settings.groupBName} groups. Box indicates first through third quartile with median line, whiskers are 1.5 IQR, open square represents mean. Analysis of statistical significance at the 0.05 level was determined through a Welch's t-test.`; // Render the caption with the bold sentence followed by the regular sentence return html`

${boldSentence} ${regularSentence}

`; }33:Td63,// ---- ALT TEXT GENERATOR ---- // Builds detailed alt text following a consistent formula // Updates automatically whenever settings, data, or test results change altText = { // y axis range and increment // d3.ticks() generates the same tick values that appear on the y axis const ticks = d3.ticks(yMin, yMax, 8); // the lowest tick value shown on the y axis const yAxisMin = ticks[0]; // the highest tick value shown on the y axis const yAxisMax = ticks[ticks.length - 1]; // the increment between ticks — subtract first tick from second to get the step size const yAxisIncrement = ticks[1] - ticks[0]; // handle p value that rounds to 0.0000 — show < 0.0001 instead const pDisplay = tTest.pValue === "0.0000" ? "< 0.0001" : tTest.pValue; // build outlier phrase for each group // filter keeps only points that fall outside the whisker range // .toFixed(1) rounds outlier values to 1 decimal place for clean reading const outliersA = groupA.filter(d => d.score < statsA.lowerWhisker || d.score > statsA.upperWhisker ); const outliersB = groupB.filter(d => d.score < statsB.lowerWhisker || d.score > statsB.upperWhisker ); // build the outlier phrase for each group // if there are no outliers the sentence says so // if there are outliers, report how many and at what values rounded to 1 decimal place const outlierPhraseA = outliersA.length === 0 ? "No outliers are present." : `${outliersA.length} outlier${outliersA.length > 1 ? "s are" : " is"} present at ${outliersA.map(d => d.score.toFixed(1)).join(", ")}.`; const outlierPhraseB = outliersB.length === 0 ? "No outliers are present." : `${outliersB.length} outlier${outliersB.length > 1 ? "s are" : " is"} present at ${outliersB.map(d => d.score.toFixed(1)).join(", ")}.`; // build the full alt text string // template literals with backticks allow multi-line strings and variable insertion // .toFixed(1) rounds each stat to 1 decimal place for clean reading const text = `Box plot showing ${settings.axisLabel} scores across two groups with associated p value between them. The two groups are: ${settings.groupAName} and ${settings.groupBName}. The y-axis is labelled ${settings.axisLabel} and ranges from ${yAxisMin} to ${yAxisMax} in increments of ${yAxisIncrement}. ${settings.groupAName} has a box indicating first through third quartile spanning from ${statsA.q1.toFixed(1)} to ${statsA.q3.toFixed(1)}, with a median line at ${statsA.median.toFixed(1)}. The whiskers, representing 1.5 IQR, span from ${statsA.lowerWhisker.toFixed(1)} to ${statsA.upperWhisker.toFixed(1)}. ${outlierPhraseA} ${settings.groupBName} has a box indicating first through third quartile spanning from ${statsB.q1.toFixed(1)} to ${statsB.q3.toFixed(1)}, with a median line at ${statsB.median.toFixed(1)}. The whiskers, representing 1.5 IQR, span from ${statsB.lowerWhisker.toFixed(1)} to ${statsB.upperWhisker.toFixed(1)}. ${outlierPhraseB} The p-value equals ${pDisplay}.`; // render the alt text in a textarea so it is easy to select and copy // into a presentation or document return html`

Alt text:

`; }34:[{"id":"6693c05c212de87fb9b5cfcb6a699d0681f55f92f40037db01e37aad04b3ca61b12da97df8495145b8676143f1ba37a5fd8c1ef380f83d2448920892862f8bd1","href":"https://static.observableusercontent.com/files/6693c05c212de87fb9b5cfcb6a699d0681f55f92f40037db01e37aad04b3ca61b12da97df8495145b8676143f1ba37a5fd8c1ef380f83d2448920892862f8bd1","name":"ttest_data.csv","type":"text/csv","lastModified":1782444507378.956,"size":679}] 2d:{"id":"b13ba99f6a926f32","slug":null,"title":"Welch's unequal variances T-Test Box Plot","thumbnail":"09838e7ac5edcfbd231fcbf9b9bce3b47a63252e787f4a214ef1bd50ff85aece","access_level":"public","create_time":"$D2026-06-26T02:37:14.070Z","update_time":"$D2026-06-26T17:07:42.708Z","view_time":null,"first_public_time":"$D2026-06-26T02:37:14.070Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024"},"version":121,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null}],"members":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null,"role":"editor"},{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Welch's unequal variances T-Test Box Plot","cells":[{"id":0,"value":"# Welch's unequal variances T-Test Box Plot\n## 2 Group Comparison\n\nThis test is used to test the (null) hypothesis that 2 populations have equal means – in other words you can use it to tell if your populations have a statistically significant difference (p-value) in their averages. \n\nIt is an adaptation of the Student's T-Test and is more reliable when the two samples have unequal variances and/or sample sizes.\n\nn=30 is a safe minimum\n\n## How to use this notebook\n\n1. Create your CSV with exactly these three column names:\n - **participant_id** — a unique row identifier\n - **group** — your group label (must be exactly \"A\" or \"B\")\n - **score** — the numeric value you are comparing\n2. Click the Upload CSV button below and select your file\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"viewof csvFile = Inputs.file({ label: \"Upload CSV\", accept: \".csv\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = {\n if (csvFile === null) return [];\n const text = await csvFile.text();\n return d3.csvParse(text, d3.autoType);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"// Shows you the table (not strictly necessary)\nInputs.table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// Creates a variable named 'groupA' containing only rows where group equals \"A\"\ngroupA = data.filter(d => d.group === \"A\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Creates a variable named 'groupB' containing only rows where group equals \"B\"\ngroupB = data.filter(d => d.group === \"B\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### This next part calculates descriptive statistics for each group (mean, standard deviation, median, quartiles, min and max). These feed both the summary table and the box plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// Shows the summaryStats table\nInputs.table(summaryStats)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"### This is where we build the box plot\n\nPlease choose colors that are visually accessible, test your colors against each other for differentiation with the following tool:\n\nhttps://projects.susielu.com/viz-palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"// Creates a group of interactive controls for customizing the chart\n// viewof tells Observable to expose both the input widgets and their current values\n// Inputs.form() groups multiple inputs together into one cell\n\nviewof settings = Inputs.form({\n\n // Text input for the name of Group A\n // value: \"A\" sets the default text\n groupAName: Inputs.text({ label: \"Group A name\", value: \"A\" }),\n\n // Text input for the name of Group B\n groupBName: Inputs.text({ label: \"Group B name\", value: \"B\" }),\n\n // Text input for the vertical axis label\n axisLabel: Inputs.text({ label: \"Vertical axis label\", value: \"Score\" }),\n\n // Color picker for Group A — defaults to blue\n colorA: Inputs.color({ label: \"Group A color\", value: \"#4269d0\" }),\n\n // Color picker for Group B — defaults to red\n colorB: Inputs.color({ label: \"Group B color\", value: \"#d04242\" })\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"// Imports jStat, a statistics library, from the web\n// jStat handles the complex probability math needed to calculate the p-value\njStat = require(\"jstat@1.9.6/dist/jstat.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"// Calculates box plot statistics for Group A\n// Pulled out of the chart cell so other cells can reference these values\nstatsA = {\n const sorted = groupA.map(d => d.score).sort(d3.ascending);\n const q1 = d3.quantile(sorted, 0.25);\n const q3 = d3.quantile(sorted, 0.75);\n const iqr = q3 - q1;\n return {\n q1, q3,\n median: d3.quantile(sorted, 0.5),\n mean: d3.mean(sorted),\n lowerWhisker: d3.min(sorted.filter(v => v >= q1 - 1.5 * iqr)),\n upperWhisker: d3.max(sorted.filter(v => v <= q3 + 1.5 * iqr))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"// Calculates box plot statistics for Group B\nstatsB = {\n const sorted = groupB.map(d => d.score).sort(d3.ascending);\n const q1 = d3.quantile(sorted, 0.25);\n const q3 = d3.quantile(sorted, 0.75);\n const iqr = q3 - q1;\n return {\n q1, q3,\n median: d3.quantile(sorted, 0.5),\n mean: d3.mean(sorted),\n lowerWhisker: d3.min(sorted.filter(v => v >= q1 - 1.5 * iqr)),\n upperWhisker: d3.max(sorted.filter(v => v <= q3 + 1.5 * iqr))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"// Calculates the maximum y axis value with a 10% buffer above the data\n// pulled out of the chart cell so other cells can reference it\nyMax = {\n const allScores = data.map(d => d.score);\n const dataMin = d3.min(allScores);\n const dataMax = d3.max(allScores);\n const buffer = (dataMax - dataMin) * 0.10;\n return dataMax + buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// Calculates the minimum y axis value with a 10% buffer below the data\n// pulled out of the chart cell so other cells can reference it\nyMin = {\n const allScores = data.map(d => d.score);\n const dataMin = d3.min(allScores);\n const dataMax = d3.max(allScores);\n const buffer = (dataMax - dataMin) * 0.10;\n return dataMin - buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"// ---- SVG DOWNLOAD BUTTON ----\n// Creates a button that downloads the chart as an SVG file\n// SVG files can be opened and edited in Illustrator or Figma\n\nDOM.download(\n // DOM.download() takes three arguments:\n // 1. a function that returns the file to download\n // 2. the default filename\n // 3. the label on the button\n\n // argument 1: a function that builds the file\n // new XMLSerializer().serializeToString() converts the SVG element to a text string\n // new Blob() wraps that string into a file the browser can download\n // { type: \"image/svg+xml\" } tells the browser this is an SVG file\n () => new Blob(\n [new XMLSerializer().serializeToString(chart)],\n { type: \"image/svg+xml\" }\n ),\n\n // argument 2: the default filename when saved\n \"ttest_chart.svg\",\n\n // argument 3: the text label on the download button\n \"Download chart as SVG\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"### This section generates captions and alt-text for your box plot\nCaptions help your reader understand what they are looking at, and how the chart is designed. For people who do not know how to interpret the chart (or don't care to interpret it!) the first, bolded, sentence gives them the headline – is there a significant difference\n\nAlt-text is an accessibility feature that helps people using screen readers to interpret images that a screen reader cannot describe. You need to attach it to the image (it's usually viewable when you hover over the image).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"