index.html

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<body>
  <div style="text-align:center;">
    <button onclick="Year(2017);" style="text-align:center;">2017</button>
    <button onclick="Year(2018);" style="text-align:center;">2018</button>
    <button onclick="Year(2019);" style="text-align:center;">2019</button>
    <button onclick="Year(2020);" style="text-align:center;">2020</button>
    <button onclick="Year(2021);" style="text-align:center;">2021</button>
    <button onclick="Year(2022);" style="text-align:center;">2022</button>
  </div>

  <!-- Create a div where the graph will take place -->
  <div id="myStackBar" style="text-align:center;"></div>

  <script>

    // set the dimensions and margins of the graph
    const margin = {top: 10, right: 30, bottom: 20, left: 50};
    const width = 750 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    const svg = d3.select("#myStackBar")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height*1.5 + margin.top + margin.bottom )
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

    // Add X axis
    const x = d3.scaleBand()
      .range([0, width])
      .padding([0.2])
    const X_axis = svg.append("g")

    // Add Y axis
    const y = d3.scaleLinear()
      .range([height, 0]);
    const Y_axis = svg.append("g")  

    // Add data into a container
    const container = svg.append("g")

    // Create tooltip
    const tooltip = d3.select("body")
      .append("div")
      .attr("class", "tooltip")
      .style("opacity", 0)
      .style("background-color", "#ECFFFF")
      .style("border", "solid")
      .style("border-width", "2px")
      .style("border-radius", "5px")
      .style("padding", "10px")
      .style("position", "absolute")
      .style("font-family", "Microsoft JhengHei");

    function RSOutput(score){
      if(score == 100)
        return ("Very High");
      else if(score == 75)
        return ("High");
      else if(score == 50)
        return ("Medium");
      else
        return ("Low");
    }

    function MergeSort(array){
      if (array.length <= 1){
        return array;
      };
      const middle = Math.floor(array.length / 2);
      //console.log("Hi MergeSort");
      return Merge(MergeSort(array.slice(0, middle)), MergeSort(array.slice(middle)));
    }
      
    function Merge(left, right){
      let result = [];
      let leftIndex = 0;
      let rightIndex = 0;
      while(leftIndex < left.length && rightIndex < right.length){
        // console.log("Hi Merge");
        let leftValue = Number(left[leftIndex].ResearchOutput) + left[leftIndex].SFRatio + left[leftIndex].InterStu;
        let rightValue = Number(right[rightIndex].ResearchOutput) + right[rightIndex].SFRatio + right[rightIndex].InterStu;
        if(leftValue > rightValue){
          result.push(left[leftIndex]);
          leftIndex++;
          //console.log("Hi Left");
          //console.log(leftValue, rightValue);
        } 
        else{
          result.push(right[rightIndex]);
          rightIndex++;
          //console.log("Hi right");
          //console.log(leftValue, rightValue);
        }
      }
      return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
    }

    // Parse the Data
    function Year(EnterYear){
      Promise.all([
        d3.json("https://raw.githubusercontent.com/ShallyLai/IVFinalProject/main/Continents.json"),
        d3.csv("https://raw.githubusercontent.com/ShallyLai/IVFinalProject/main/QS.csv")
      ]).then(function(initialize){

        let dataGeo = initialize[0]; // Continent map
        let data = initialize[1]; // QS data
        let NowYear = EnterYear; // select year
        let ThisYear = [];
        const ResOpt = new Map();
        const SFRatio = new Map();
        const IntStu = new Map();

        // Seperate data with year
        data.forEach(function(row){
          if (row.year == NowYear) {
            topush = {University: row.university, ResearchOutput: row.research_output, SFRatio: row.SFRatio_Nor * 100, InterStu:row.IntStu_Nor * 100};
            ThisYear.push(topush);
            ResOpt.set(row.university, row.research_output);
            SFRatio.set(row.university, row.student_faculty_ratio);
            IntStu.set(row.university, row.international_students);
          }
        });
        //console.log(data)
        //console.log(ThisYear);

        ThisYear = MergeSort(ThisYear);
        //console.log(ThisYear);

        // List of subgroups is the header of ThisYear array  
        const subgroups = Object.keys(ThisYear[0]).slice(1);
        //console.log(subgroups)

        // Value of the first column called group
        // 拿掉slice
        const groups = ThisYear.slice(0, 50).map(d => d.University)

        x.domain(groups)
        X_axis.attr("transform", `translate(0, ${height})`)
          .call(d3.axisBottom(x).tickSizeOuter(0))
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".10em")
          .attr("transform", "rotate(-78)");
          
        y.domain([0, 300]);
        Y_axis.call(d3.axisLeft(y));

        // color palette shows one color per subgroup
        const color = d3.scaleOrdinal()
          .domain(subgroups)
          .range(d3.schemeSet2);

        //stack the data? --> stack per subgroup
        const stackedData = d3.stack()
          .keys(subgroups)
          // 拿掉slice
          (ThisYear.slice(0, 50));
        //console.log(ThisYear)
        //console.log(stackedData)


        // Show the bars
        // Highlight a specific subgroup when hovered        
        container
          .selectAll("g")
          // Enter in the stack data = loop key per key = group per group
          .data(stackedData)
          .join("g")
            .attr("fill", d => color(d.key))
            .attr("class", d => "myRect " + d.key) // Add a class to each subgroup: their name
            .selectAll("rect")
            // enter a second time = loop subgroup per subgroup to add all rectangles
            .data(d => d)
            .join("rect")
              .attr("x", function(d){
                return x(d.data.University)
              })
              .attr("y", d => y(d[1]))
              .attr("height", d => y(d[0]) - y(d[1]))
              .attr("width",x.bandwidth())
              .attr("stroke", "grey")
            .on("mouseover", function (event, d){
              //const subGroupName = d3.select(this.parentNode).datum().key
              //d3.selectAll(".myRect").style("opacity", 0.2)
              //d3.selectAll("."+subGroupName).style("opacity",1)
              //console.log(subGroupName);
              tooltip
                .transition()
                .duration(200)
                .style("opacity", 1);
              tooltip
                .style("left", event.pageX + "px")
                .style("top", event.pageY - 150 + "px")
                .html("西元" + NowYear + "  " + d.data.University + "<br>學術產出：" + RSOutput(ResOpt.get(d.data.University)) + "<br>師生比：1:" + SFRatio.get(d.data.University) + "<br>國際學生：" + IntStu.get(d.data.University) + "人");
              //console.log(d);
            })
            .on("mouseleave", function (event, d){ // When user do not hover anymore
              d3.selectAll(".myRect")
              .style("opacity",1)
              tooltip.style("opacity", 0);
            })
            .on("mouseout", function(event, d) {
              tooltip.style("opacity", 0);
            });
      })
    }
    
    // Initialize the plot
    Year(2017);

  </script>
</body>