Updates as per Team meeting 28 Aug 2025

drawbar.js

@@ -1,7 +1,8 @@
 
 
-function drawBar(id) {
 
+function drawBar(id,data) {
+//console.log(id);
 const svg = d3.select(`${id}`);
 const backgroundwidth = +svg.attr("width");
 const backgroundradius = 10;
@@ -23,8 +24,9 @@ svg.append("rect")
  // .attr("stroke-width", 2);
 
 
-
-const data = {
+//const data = {
+/* 
+data = {
   "-3": 0,
   "-2": 1,
   "-1": 3,
@@ -33,6 +35,9 @@ const data = {
    "2": 0,
    "3": 10
 };
+*/
+//console.log(data);
+
 
 const dataArray = Object.entries(data).map(([key, count]) => ({
   key: +key,
@@ -72,10 +77,6 @@ svg.append("g")
   .selectAll("text")
   .style("visibility", "hidden"); // This hides the labels
 
-
-
-
-
 // Y Axis
 //svg.append("g")
 //  .attr("transform", `translate(${margin.left},0)`)
@@ -110,15 +111,14 @@ svg.selectAll(".label")
 const format = d3.format(".2f");
 const totalCount = d3.sum(dataArray, d => d.count);
 const weightedSum = d3.sum(dataArray, d => d.key * d.count);
-const average = totalCount > 0 ? format(weightedSum / totalCount) : 0;
+average = totalCount > 0 ? weightedSum / totalCount : 0;
 
 const xLinear = d3.scaleLinear()
   .domain([-3, 3])
   .range([margin.left + x.bandwidth() / 2, width - margin.right - x.bandwidth() / 2]);
 
-
-// const avgX = xLinear(average);
-const avgX = xLinear(2.7);      // Temporary for testing
+const avgX = xLinear(average);
+//const avgX = xLinear(-0.50);      // Temporary for testing
 
 svg.append("line")
   .attr("x1", avgX)
@@ -127,7 +127,7 @@ svg.append("line")
   .attr("y2", y(d3.max(dataArray, d => d.count)) - 20)
   .attr("stroke", "#e40074")    // From brand guidelines
   .attr("stroke-width", 4)
-  .attr("stroke-dasharray", "6,2");
+  .attr("stroke-dasharray", "10,4");
 
 /*
 svg.append("text")
@@ -140,6 +140,7 @@ svg.append("text")
 */
 
 // Title beneath the graph
+/*
 svg.append("text")
   .attr("x", width / 2)
   .attr("y", height - 10)  // Just below the x-axis
@@ -147,13 +148,14 @@ svg.append("text")
   .attr("font-size", "14px")
   .attr("fill", "black")
   .text("Demo bar graph");
+*/
 
 
-// Add infor to right of bar chart
+// Add info to right of bar chart
 // Oblong settings
-const boxx = 620;
+const boxx = 610;
 const boxy = 60;
-const boxwidth = 150;
+const boxwidth = 170;
 const boxheight = 80;
 const cornerRadius = 10;
 
@@ -185,9 +187,40 @@ svg.append("text")
   .attr("text-anchor", "middle")
   .attr("dominant-baseline", "middle")
   .attr("font-size", "20px")
-  .attr("font-weight", "900")      // 400 is normal, 700 is bold, 900 is extra-bold
+  .attr("font-weight", "400")      // 400 is normal, 700 is bold, 900 is extra-bold
   .attr("font-family", "sans-serif")
-  .text("Average : 1.69");
+  .text("Average: ")
+  .append(function() {
+    return document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+  })
+    .text(average.toFixed(1))
+    .attr("class", "average")
+    .attr("fill", "#e40074")
+    .attr("font-weight", "900");
+
+
+//  .text("Average : "+average.toFixed(2));
+
+// Get the score gap:
+
+let maxKey = null;
+let minKey = null;
+
+for (const [key, value] of Object.entries(data)) {
+  if (value > 0) {
+    const numKey = Number(key);
+    //console.log(numkey);
+    if (maxKey === null || numKey > maxKey) {
+      maxKey = numKey;
+    }
+    if (minKey === null || numKey < minKey) {
+      minKey = numKey;
+    }
+  }
+}
+
+
+scoregap = maxKey - minKey+1;
 
 // Add text to the bottom half
 svg.append("text")
@@ -196,8 +229,58 @@ svg.append("text")
   .attr("text-anchor", "middle")
   .attr("dominant-baseline", "middle")
   .attr("font-size", "20px")
-  .attr("font-weight", "900")      // 400 is normal, 700 is bold, 900 is extra-bold
+  .attr("font-weight", "400")      // 400 is normal, 700 is bold, 900 is extra-bold
   .attr("font-family", "sans-serif")
-  .text("Score Gap : 6");
+  .text("Score gap: ")
+  .append(function() {
+    return document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+  })
+    .text(scoregap)
+    .attr("font-weight", "900");
 
-}
+
+
+
+//  .text("Score Gap : "+scoregap);
+
+
+return average;   //Needed for the next layer up in the analysis
+
+}
+
+
+
+function doBarData(id,qid) {
+  return fetch('get_qid_counts.php', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: new URLSearchParams({ qid })
+  })
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not OK');
+    }
+    return response.json();
+  })
+  .then(data => {
+    if (data.error) {
+      throw new Error(data.error);
+    }
+//    console.log(data);
+//    console.log(data[0][Object.keys(data[0])[0]]);
+/* */
+	bardata = {
+	  "-3": data[0][Object.keys(data[0])[0]],
+	  "-2": data[1][Object.keys(data[1])[0]],
+	  "-1": data[2][Object.keys(data[2])[0]],
+	   "0": data[3][Object.keys(data[3])[0]],
+	   "1": data[4][Object.keys(data[4])[0]],
+	   "2": data[5][Object.keys(data[5])[0]],
+	   "3": data[6][Object.keys(data[6])[0]],
+	};
+
+    //console.log(bardata);
+    drawBar(id,bardata);
+    // return data; // Should be an array like [{ value: -3, count: 2 }, ..., { value: 3, count: 5 }]
+  });
+}