// this function creates an SVG line chart
var lineChart = function(data){

var margin = {top: 56, right: 600, bottom: 14, left: 250};
var width = 3000 - margin.left - margin.right;
var height = 1500 - margin.top - margin.bottom;




  var color = d3.scaleOrdinal(d3.schemeCategory10)
    .domain(data.map(function(d) {
        return d.country
    }));

  var div = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);


    var legendOrdinal = d3.legendColor()
      //d3 symbol creates a path-string, for example
      //"M0,-8.059274488676564L9.306048591020996,
      //8.059274488676564 -9.306048591020996,8.059274488676564Z"
      .shape("path", d3.symbol().type(d3.symbolCircle).size(150)())
      .shapePadding(10)
      //use cellFilter to hide the "e" cell
      .cellFilter(function(d){ return d.label !== "e" })
      .scale(color);


  var yScale
   = d3.scaleBand()
    .padding(0.5)
    .rangeRound([margin.top, height - margin.bottom]);



  var xScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
        return d.scores
    }) * 1.1])
    .range([0,0 + height]);

  yScale = yScale.domain(data.map(function(d) {
  return d.indicators;
  }));



  //add a new svg to hold the chart
  var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");






    // adding axes is also simpler now, just translate x-axis to (0,height) and it's alread defined to be a bottom axis. 
    svg.append('g')
      .attr('transform', "translate(0," + (height-margin.bottom) + ")")
      .attr('class', 'x axis')
      .call(d3.axisBottom(xScale));


            // y-axis.
    svg.append("g")
        .attr("class", "axis-label")
        .attr("transform", "translate(" + top+margin.left + ")")
        .call(d3.axisLeft(yScale))
        .style("fill");

    svg.append("g")
      .attr("class", "legendOrdinal")
      .attr("transform",  "translate("+ (margin.right) +  ")")
      .call(legendOrdinal);

    // titling
     svg.append("text")
         .attr("class", "title")
         .attr("x", -31)
         .attr("y", -31)
         .style("fill","#333")
         .text("Global Innovation Index 2017");
     
     svg.append("text")
         .attr("class", "credit")
         .attr("x",-31)
         .attr("y",-10)
         .style("fill","#444")
               .attr("text-anchor","start")
         .text("by Zoe Meers.");

     svg.append("text")
         .attr("class", "text")
         .attr("x",-31)
         .attr("y",10)
         .text("An analysis of indicator scores (out of 100).");

      svg.append("text")
         .attr("class", "credit")
         .attr("x",-31)
         .attr("y",30)
         .text("Scores are calculated as the average of innovation inputs and innovation outputs.");

    



  // Add a container for the circles
  var circles = svg.append('g')
    .attr('id', 'circles');
  
  // Add the line path
  circles.selectAll("circle")
    .data(data)
    .enter().append('circle')
    .style("opacity", .9)
    .attr('r', 4)
    .attr('cx', function(d) {
        return xScale(d.scores)
    })
    .attr('cy',  function(d) {
        return yScale(d.indicators)
    })
    .attr("fill", function(d) {
        return color(d.country)
    })
    .on("mouseover", function (d) {
                    div.transition()
                        .duration(200)
                        .style("opacity", .7);
                    div.html( "Country: " + d.country + "</br>" + "Indicator: " + d.indicators + "</br>" + "Score: " + d.scores)
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
                });

  
  
};