function init() {
  var margin = 50; //equal margins on all sides
  var width = 700 - 2 * margin;
  var height = 500 - 2 * margin;

  var widthb = 800 - 2 * margin;
  var heightb = 250 - 2 * margin;

  var x = d3.scaleLinear().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  var xb = d3.scaleLinear().range([0, widthb]);
  var yb = d3.scaleBand().range([heightb, 0]);

  var svgLineChart = d3
    .select("#line_chart")
    .attr("width", width + 2 * margin)
    .attr("height", height + 2 * margin)
    .attr("transform", "translate(" + margin + "," + margin + ")");

  var g_container = svgLineChart.append("g").attr("id", "container")
  .attr('transform',"translate(50,50)")
  ;
  var g_lines = g_container.append("g").attr("id", "lines");
  var g_circles = g_container.append("g").attr("id", "circles");

  var svgFig = g_container;

  // var svgFig = d3
  //   .select("#container")
  //   .append("svg")
  //   .attr("width", width + 2 * margin)
  //   .attr("height", height + 2 * margin)
  //   .append("g")
  //   .attr("transform", "translate(" + margin + "," + margin + ")");

  // var barPlot = d3
  //   .select("#barplot")
  //   .append("svg")
  //   .attr("width", widthb + 2 * margin)
  //   .attr("height", heightb + 2 * margin)
  //   .append("g")
  //   .attr("transform", "translate(" + 2 * margin + "," + margin + ")")
  //   .attr("id", "barsvg");

  var barPlot = d3
    .select("#bar_chart")
    .attr("width", widthb + 2 * margin)
    .attr("height", heightb + 2 * margin)
    .append("g")
    .attr("id", "container_2")
    .attr("transform", "translate(" + 2 * margin + "," + margin + ")");

  d3.dsv(",", "average-rating.csv", (d) => d)
    .then(function (data) {
      var yearwiseData = {};
      var max = Number.NEGATIVE_INFINITY;
      var min = Number.POSITIVE_INFINITY;
      data.forEach(function (d) {
        var yearData = yearwiseData[d.year] || {};
        yearData.count = yearData.count || {};
        var rating = Math.floor(+d.average_rating);
        yearData.count[rating] = (yearData.count[rating] || 0) + 1;
        if (yearData.count[rating] > max) max = yearData.count[rating];
        if (yearData.count[rating] < min) min = yearData.count[rating];
        yearwiseData[d.year] = yearData;
      });
      x.domain([0, 9]);
      y.domain([0, max]);
      var i = 0;
      var years = [];
      var colors = [];
      for (var year in yearwiseData) {
        if (+year < 2015 || +year > 2019) continue;
        console.log(year);
        var yearData = yearwiseData[year].count;

        var countData = [];
        for (var j = 0; j <= 9; j++) yearData[j] = yearData[j] || 0;

        for (var count in yearData)
          countData.push({
            count: +count,
            value: yearData[+count],
          });

        var lg = d3
          .line()
          .x((d) => x(d.count))
          .y((d) => y(d.value));

        g_lines
          .append("path")
          .data([countData])
          .attr("class", "line")
          .attr("d", lg)
          .style("stroke", d3.schemeCategory10[i]);

        g_circles
          .selectAll("circles")
          .data(countData)
          .enter()
          .append("circle")
          .attr("fill", d3.schemeCategory10[i])
          .attr("cx", function (d) {
            return x(d.count);
          })
          .attr("data-year", year)
          .attr("data-count", (d) => d.value)
          .attr("cy", function (d) {
            return y(d.value);
          })
          .attr("r", 4)

          .on("mouseover", function (d) {
            d3.select(this).attr("r", 8);
            var year = d3.select(this).attr("data-year");
            if (+d.value > 0) {
              var ccol = d3.select(this).attr("fill");

              plotHorizontalBarChart(year, d.count, data, ccol);
              console.log({year, count:d.count, data, ccol})
              document.querySelector('#bar_chart').style.display="block"
              document.querySelector('#bar_chart_title').style.display="block"
            }else{
              console.log({year, count:d.count, data, ccol})
              if (ccol == undefined){
                document.querySelector('#bar_chart').style.display="none"
                document.querySelector('#bar_chart_title').style.display="none"
              }
            }
          })
          .on("mouseout", function (d) {
            d3.select(this).attr("r", 4);
            d3.select("#container_2").html("");
          });

        years.push(year);
        colors.push(d3.schemeCategory10[i]);
        i++;

        // console.log({
        //   year: 2019,
        //   d: { count: 6 },
        //   data,
        //   ccol: "#d62728",
        // });

        // if (year == 2019) {
        //   plotHorizontalBarChart(year, 6, data, "#d62728");
        // }
      }

      svgFig
        .append("g")
        .attr("id", "x-axis-lines")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

      svgFig.append("g").attr("id", "y-axis-lines").call(d3.axisLeft(y));

      var color = d3.scaleOrdinal().domain(years).range(colors);
      var legend = d3.legendColor().scale(color);

      // var legSvg = d3
      //   .selectAll("#legend")
      //   .append("svg")
      //   .attr("transform", "translate(20, 10)");

      // <g id=”legend”> element for legend
      console.log({ years });
      console.log({ colors });
      var g_legend = g_container
        .append("g")
        .attr("id", "legend")
        .attr("transform", "translate(600, 30)")
        .attr("class", "legend");

      years.forEach((year, idx) => {
        console.log(year);
        g_legend
          .append("text")
          .attr("transform", "translate(10, " + idx * 20 + ")")
          .text(year);

        g_legend
          .append("circle")
          .attr("fill", colors[idx])
          .attr("r", 6)
          .attr("cy", idx * 20 - 5)
          // .attr("transform", "translate(1, " + idx * 20 + ")")
          .text(year);
      });

      // <text id=”line_chart_title”> element for line chart title
      g_container
        .append("text")
        .attr("id", "line_chart_title")
        .attr("x", width / 2)
        .attr("y", -40)
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .text("Board games by Rating 2015-2019")
        .attr("transform", "translate(10, 10)");

      // <text id=”credit”> element for GT username
      g_container
        .append("text")
        .attr("id", "credit")
        .attr("x", width / 2)
        .attr("y", -25)
        .attr("text-anchor", "middle")
        .style("font-size", "13px")
        .text("tlou31")
        .attr("fill", "blue");

      // <text> element for x axis label
      g_container
        .append("text")
        .attr("data-mark", "<text> element for x axis label")
        .attr(
          "transform",
          "translate(" + width / 2 + " ," + (height + 30) + ")"
        )
        .style("text-anchor", "middle")
        .text("Rating");

      // <text> element for y axis label
      g_container
        .append("text")
        .attr("data-mark", "<text> element for y axis label")
        .attr("y", -30)
        .attr("x", -height / 2)
        .attr("transform", "rotate(-90)")
        .style("text-anchor", "middle")
        .text("Count");
    })
    .catch((error) => console.log(error));

  function plotHorizontalBarChart(year, average_rating, data, ccol) {
    var gameData = [];
    var max = Number.NEGATIVE_INFINITY;

    data.forEach(function (d) {
      if (d.year === year && Math.floor(+d.average_rating) == average_rating) {
        gameData.push({
          name: d.name.substring(0, 10),
          count: +d.users_rated,
        });
        if (+d.users_rated > max) max = +d.users_rated;
      }
    });

    gameData = gameData.sort((a, b) => {
      return d3.ascending(+a.count, +b.count);
    });

    gameData = gameData.slice(gameData.length - 5, gameData.length);
    console.log(gameData);
    xb.domain([0, max]);
    yb.domain(gameData.map((d) => d.name)).padding(0.2);

    barPlot
      .append("g")
      .attr("id", "bars")
      .selectAll("myRect")
      .data(gameData)
      .enter()
      .append("rect")
      .attr("x", xb(0))
      .attr("y", (d) => yb(d.name))
      .attr("width", (d) => xb(d.count))
      .attr("height", yb.bandwidth())
      .attr("fill", ccol);

    // y-axis-bars
    barPlot.append("g").attr("id", "y-axis-bars").call(d3.axisLeft(yb));
    
    // x-axis-bars
    barPlot
      .append("g")
      .attr("id", "x-axis-bars")
      .attr("transform", "translate(0," + heightb + ")")
      .call(d3.axisBottom(xb));

    d3.select("#bar_chart_title")
      .attr("x", widthb / 2)
      .attr("y", -15)
      .attr("text-anchor", "middle")
      .style("font-size", "16px")
      .text("top 5 most rated Games of " + year + " with rating " + average_rating);

    // <text id=”bar_x_axis_label”> element for x axis label
    barPlot
      .append("text")
      .attr("id", "bar_x_axis_label")
      .attr("dm", "<text id=”bar_x_axis_label”> element for x axis label")
      .attr(
        "transform",
        "translate(" + widthb / 2 + " ," + (heightb + 30) + ")"
      )
      .style("text-anchor", "middle")
      .text("Number of Users");

    barPlot
      .append("text")
      .attr("id", "bar_y_axis_label")
      .attr("dm", "<text id=”bar_y_axis_label”> element for x axis label")
      .attr("y", -80)
      .attr("x", -heightb / 2)
      .attr("transform", "rotate(-90)")
      .style("text-anchor", "middle")
      .text("Games");
  }
}