more upload

README-HF.md

@@ -0,0 +1,34 @@
+# Confidence Intervals Interactive App
+
+This interactive application uses OJS (Observable JavaScript) and D3.js to demonstrate confidence intervals concepts including:
+
+- Single sample confidence intervals
+- Multiple samples visualization
+- Bootstrapping methods
+
+## Features
+
+- Interactive visualizations
+- Real-time calculations
+- Educational guiding questions
+- Responsive design
+
+## About
+
+This application was originally created by Keefe Reuther and converted to OJS/D3 format for broader accessibility.
+
+## Usage
+
+Simply interact with the sliders, input fields, and buttons to see how different parameters affect confidence intervals.
+
+## Setup
+
+If you want to run this locally:
+
+1. Clone the repository
+2. Run `npm install` (if you've downloaded the full repo with package.json)
+3. Run `npm start` or use any static file server
+
+## License
+
+MIT 

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "confidence-intervals-ojs",
+  "version": "1.0.0",
+  "description": "Confidence Intervals interactive app using OJS and D3",
+  "main": "index.html",
+  "scripts": {
+    "start": "npx http-server -o",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  }
+} 

script.js

@@ -0,0 +1,222 @@
+// Observable JS module
+export default function define(runtime, observer) {
+  const main = runtime.module();
+  
+  // Define inputs and reactive values
+  main.variable(observer("viewof singleSampleSD")).define("viewof singleSampleSD", ["html"], html => {
+    return html`<div class="control-panel">
+      <h3><strong>The Population</strong></h3>
+      <h4><strong>Population Mean: 0</strong></h4>
+      <div class="input-group">
+        <label for="normalSD">Population SD:</label>
+        <input id="normalSD" type="number" min="0.01" step="0.1" value="1">
+      </div>
+      
+      <hr>
+      
+      <h3><strong>Your Single Sample</strong></h3>
+      <div class="input-group">
+        <label for="sampleSize">Sample Size:</label>
+        <input id="sampleSize" type="number" min="1" value="50">
+      </div>
+      
+      <div class="input-group">
+        <label for="confidenceLevel">Confidence Level (%):</label>
+        <input id="confidenceLevel" type="range" min="1" max="99" value="95" step="1">
+        <span id="confidenceLevelValue">95%</span>
+      </div>
+      
+      <button id="generateBtn">Generate New Sample</button>
+      
+      <hr>
+      
+      <h4><strong>Guiding Questions:</strong></h4>
+      <h5>1. How does increasing _______ affect the certainty that your sample mean is close to the population mean?</h5>
+      <ul>
+        <li>Sample size</li>
+        <li>Standard deviation</li>
+      </ul>
+      <h5>2. If the standard deviation is 4, what is the minimum sample size you should consider collecting if you want your sample mean to be likely within 1 of the population mean?</h5>
+    </div>`;
+  });
+
+  // Extract input values
+  main.variable(observer("singleSampleSD")).define("singleSampleSD", ["viewof singleSampleSD"], view => {
+    return {
+      sd: parseFloat(view.querySelector("#normalSD").value),
+      sampleSize: parseInt(view.querySelector("#sampleSize").value),
+      confidenceLevel: parseInt(view.querySelector("#confidenceLevel").value)
+    };
+  });
+
+  // Generate random sample
+  main.variable(observer("singleSample")).define("singleSample", ["singleSampleSD", "normrnd"], (params, normrnd) => {
+    return normrnd(0, params.sd, params.sampleSize);
+  });
+
+  // Define the plot
+  main.variable(observer("singleSamplePlot")).define("singleSamplePlot", ["d3", "singleSample", "singleSampleSD"], (d3, sample, params) => {
+    const width = 800;
+    const height = 400;
+    const margin = {top: 30, right: 30, bottom: 50, left: 50};
+    
+    // Calculate statistics
+    const mean = d3.mean(sample);
+    const sd = d3.deviation(sample);
+    const se = sd / Math.sqrt(sample.length);
+    
+    // Calculate CI
+    const alpha = 1 - (params.confidenceLevel / 100);
+    const zCrit = -d3.quantileNormal(alpha / 2);
+    const halfwidth = zCrit * se;
+    const ciLower = mean - halfwidth;
+    const ciUpper = mean + halfwidth;
+    
+    // Create SVG
+    const svg = d3.create("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("viewBox", [0, 0, width, height])
+      .attr("style", "max-width: 100%; height: auto;");
+    
+    // Create scales
+    const x = d3.scaleLinear()
+      .domain([-7, 7])
+      .range([margin.left, width - margin.right]);
+      
+    const y = d3.scaleLinear()
+      .domain([0, 0.5])
+      .range([height - margin.bottom, margin.top]);
+    
+    // Generate histogram
+    const bins = d3.bin()
+      .domain(x.domain())
+      .thresholds(20)
+      (sample);
+    
+    // Normalize bin heights
+    const binMax = d3.max(bins, d => d.length) / sample.length;
+    const yScale = d3.scaleLinear()
+      .domain([0, binMax])
+      .range([height - margin.bottom, margin.top]);
+    
+    // Draw histogram
+    svg.append("g")
+      .selectAll("rect")
+      .data(bins)
+      .join("rect")
+        .attr("x", d => x(d.x0))
+        .attr("y", d => yScale(d.length / sample.length))
+        .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1))
+        .attr("height", d => yScale(0) - yScale(d.length / sample.length))
+        .attr("fill", "lightblue");
+    
+    // Draw normal curve (population)
+    const curve = d3.line()
+      .x(d => x(d))
+      .y(d => y(d3.randomNormal.pdf(d, 0, params.sd)));
+    
+    const points = d3.range(-7, 7, 0.1);
+    
+    svg.append("path")
+      .attr("d", curve(points))
+      .attr("stroke", "red")
+      .attr("stroke-width", 2)
+      .attr("fill", "none");
+    
+    // Draw axes
+    svg.append("g")
+      .attr("transform", `translate(0,${height - margin.bottom})`)
+      .call(d3.axisBottom(x));
+    
+    // Add vertical lines for population and sample means
+    svg.append("line")
+      .attr("x1", x(0))
+      .attr("x2", x(0))
+      .attr("y1", margin.top)
+      .attr("y2", height - margin.bottom)
+      .attr("stroke", "red")
+      .attr("stroke-width", 2)
+      .attr("stroke-dasharray", "5,5");
+      
+    svg.append("line")
+      .attr("x1", x(mean))
+      .attr("x2", x(mean))
+      .attr("y1", margin.top)
+      .attr("y2", height - margin.bottom)
+      .attr("stroke", "blue")
+      .attr("stroke-width", 2)
+      .attr("stroke-dasharray", "5,5");
+    
+    // Add CI line
+    svg.append("line")
+      .attr("x1", x(ciLower))
+      .attr("x2", x(ciUpper))
+      .attr("y1", y(0.5))
+      .attr("y2", y(0.5))
+      .attr("stroke", "black")
+      .attr("stroke-width", 3);
+      
+    // Add CI endpoints
+    svg.append("line")
+      .attr("x1", x(ciLower))
+      .attr("x2", x(ciLower))
+      .attr("y1", y(0.48))
+      .attr("y2", y(0.52))
+      .attr("stroke", "black")
+      .attr("stroke-width", 3);
+      
+    svg.append("line")
+      .attr("x1", x(ciUpper))
+      .attr("x2", x(ciUpper))
+      .attr("y1", y(0.48))
+      .attr("y2", y(0.52))
+      .attr("stroke", "black")
+      .attr("stroke-width", 3);
+    
+    // Add legend
+    const legend = svg.append("g")
+      .attr("transform", `translate(${width - margin.right - 200}, ${margin.top + 20})`);
+      
+    const legendItems = [
+      { label: "Population distribution", color: "red", type: "line" },
+      { label: "Population mean", color: "red", type: "dashed" },
+      { label: "Sample mean", color: "blue", type: "dashed" },
+      { label: "95% CI", color: "black", type: "line" }
+    ];
+    
+    legendItems.forEach((item, i) => {
+      legend.append("line")
+        .attr("x1", 0)
+        .attr("x2", 30)
+        .attr("y1", i * 25)
+        .attr("y2", i * 25)
+        .attr("stroke", item.color)
+        .attr("stroke-width", 2)
+        .attr("stroke-dasharray", item.type === "dashed" ? "5,5" : null);
+        
+      legend.append("text")
+        .attr("x", 40)
+        .attr("y", i * 25 + 5)
+        .text(item.label);
+    });
+    
+    return svg.node();
+  });
+
+  // Helper function for normal random numbers
+  main.variable(observer("normrnd")).define("normrnd", ["d3"], d3 => {
+    return (mean, sd, n) => {
+      const normal = d3.randomNormal(mean, sd);
+      return Array.from({length: n}, normal);
+    };
+  });
+  
+  // Add normal PDF calculation
+  d3.randomNormal.pdf = (x, mean, sd) => {
+    return (1 / (sd * Math.sqrt(2 * Math.PI))) * 
+           Math.exp(-0.5 * Math.pow((x - mean) / sd, 2));
+  };
+  
+  return main;
+} 

ui.js

@@ -0,0 +1,40 @@
+// Wait for the DOM to be fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+  // Get all tab buttons
+  const tabButtons = document.querySelectorAll('.tab-btn');
+  
+  // Add click event to each tab button
+  tabButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      // Remove active class from all buttons
+      tabButtons.forEach(btn => btn.classList.remove('active'));
+      
+      // Add active class to clicked button
+      button.classList.add('active');
+      
+      // Get the tab to show based on data-tab attribute
+      const tabToShow = button.getAttribute('data-tab');
+      
+      // Logic to show/hide content based on selected tab
+      // This would be expanded as we develop the full application
+      console.log(`Tab ${tabToShow} selected`);
+      
+      // For now, we'll just update some visibility (to be expanded)
+      if (tabToShow === 'single-sample') {
+        document.getElementById('tab1').style.display = 'block';
+        document.getElementById('singleSamplePlot').style.display = 'block';
+        // Hide other tabs' content when implemented
+      }
+    });
+  });
+  
+  // Update confidence level display when slider changes
+  const confidenceLevelInput = document.querySelector('#confidenceLevel');
+  const confidenceLevelValue = document.querySelector('#confidenceLevelValue');
+  
+  if (confidenceLevelInput && confidenceLevelValue) {
+    confidenceLevelInput.addEventListener('input', () => {
+      confidenceLevelValue.textContent = `${confidenceLevelInput.value}%`;
+    });
+  }
+});