box plot fixes

[tiffanyfrance]

Hi Salma! Here are a few things for the box plot.

1. I noticed that this box plot calculated the ranges a bit differently. I added some new calculations for the median, min, max. Replace your calculations on lines 82-89 with:

   // Compute summary statistics used for the box:
   var data_sorted = data.sort(d3.ascending);
   var q1 = d3.quantile(data_sorted, .25);
   var median = d3.quantile(data_sorted, .5);
   var q3 = d3.quantile(data_sorted, .75);
   var interQuantileRange = q3 - q1;
   var min = data_sorted[0];
   var max = data_sorted[data_sorted.length - 1];
   var r0 = Math.max(min, q1 - 1.5 * interQuantileRange);
   var r1 = Math.min(max, q1 + 1.5 * interQuantileRange);

2. Above the y scale, also include an x scale using scale band to get the sherpa/nonsherpa labels:

   var x = d3.scaleBand()
   .domain(["Sherpa","Non-sherpa"])
   .range([0,width]);

   svg.append("g")
   .attr("class","x")
   .attr("transform", `translate(0,${height - margin.bottom})`)
   .call(d3.axisBottom(x));

3. Create a reusable function with params. Move the data, the content from #1 above, and all the appending of rectangles/text into that function. Then, move the function below (outside of) the d3.csv() function. Something like: function buildBoxPlot(results, Sher, svg, x, y) {...}

4. Then, at the bottom of d3.csv(), below where you set your scales and axis, you will want to call your function twice. Something like:

   buildBoxPlot(results, "Sherpa", svg, x, y);
   buildBoxPlot(results, "Non-sherpa", svg, x, y);

To recap you will have two functions: d3.csv and buildBoxPlot(). The d3.csv function will have the margin, width, height, svg declaration, x scale, x axis call, y scale, y axis call, and the two buildBoxPlot functions mentioned in #4. Everything else will live inside function buildBoxPlot(...){....}.

Let me know if you get stuck.

[salma-zahra]

Thank you so much for taking out time over the holidays to look at this.

I followed the instructions but I'm getting this error: climb_box.js:49 Uncaught (in promise) ReferenceError: data is not defined

I've committed my code and moved the script to climb_box.js. The html is still box.html https://github.com/salma-zahra/CAPP30239_FA22/tree/main/data

Also, in the first d3.csv function we set results as: let data = []; for (let d of results) { if (d.Sher === "Sherpa") data.push(+d.PKNAME) }

I was wondering if maybe that was hardcoding results to Sherpa and causing issues as well.

Thanks!