Line_Chart_Quarters

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
    }
    .grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}
  </style>
</head>

<body>
  <svg width="450" height="450" id="svg2"></svg>
  <script>
    var svg = d3.select("#svg2"),
                        margin = {top: 20, right: 20, bottom: 30, left: 50},
                        width = +svg.attr("width") - margin.left - margin.right,
                        height = +svg.attr("height") - margin.top - margin.bottom,
                        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%-m-%Y");
    
                    var labels  =["Q1 2016","Q2 2016","Q3 2016","Q1 2017","Q2 2017","Q3 2017","Q4 2017","Q1 2018","Q2 2018"];
										
    								
                    var x = d3.scaleTime()
                      .rangeRound([0, width]);
                    
                    
    							//var x = d3.scaleordinal()
                    //    .domain(labels)

var y = d3.scaleLinear()
                        .rangeRound([height, 0]);

// gridlines in y axis function
function make_y_gridlines() {		
    return d3.axisLeft(y)
        .ticks(12)
};

function draw() {
                        var data = [{"leads_created_date_year": 2016, "leads_created_date_season": 3, "total": 0.15}, {"leads_created_date_year": 2016, "leads_created_date_season": 6, "total": 0.1111}, {"leads_created_date_year": 2016, "leads_created_date_season": 9, "total": 0.1364}, {"leads_created_date_year": 2016, "leads_created_date_season": 12, "total": 0.2143}, {"leads_created_date_year": 2017, "leads_created_date_season": 3, "total": 0.2075}, {"leads_created_date_year": 2017, "leads_created_date_season": 6, "total": 0.2212}, {"leads_created_date_year": 2017, "leads_created_date_season": 9, "total": 0.1739}, {"leads_created_date_year": 2017, "leads_created_date_season": 12, "total": 0.125}, {"leads_created_date_year": 2018, "leads_created_date_season": 3, "total": 0.129}, {"leads_created_date_year": 2018, "leads_created_date_season": 6, "total": 0.1667}] ;

data.forEach(function (d) {
                            d.leads_created_date_month_year = parseTime(d.leads_created_date_season + "-" + d.leads_created_date_year);
                        });

x.domain(d3.extent(data, function (d) {
                            return d.leads_created_date_month_year;
                        }));
                        y.domain(d3.extent(data, function (d) {
                            return d.total;
                        }));
                      
                          var quarter = function(date, i){
      												if(i > 0){
        										var date2 = new Date();
        											date2.setMonth(date.getMonth() - 1);
        										q = Math.ceil(( date2.getMonth()) / 3 );
                            y = date2.getYear();    
        										return "Q" + q + " " + y;  }
																		};

g.append("g")
                            .attr("transform", "translate(0," + height + ")")                            .call(d3.axisBottom(x).ticks(3).tickFormat(quarter))
                            .select(".domain")
                            .remove();

g.append("g")
                            .call(d3.axisLeft(y))
                            .append("text")
                            .attr("fill", "#000")
                            .attr("transform", "rotate(-90)")
                            .attr("y", 6)
                            .attr("dy", "0.71em")
                            .attr("text-anchor", "end")
                            .text("Conversion Rate");

g.append("path")
                            .datum(data)
                            .attr("fill", "none")
                            .attr("stroke", "steelblue")
                            .attr("stroke-linejoin", "round")
                            .attr("stroke-linecap", "round")
                            .attr("stroke-width", 1.5)
                            .attr("d", line);
                      
                        // add the X gridlines
  g.append("g")			
      .attr("class", "grid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_gridlines()
          .tickSize(-height)
          .tickFormat("")
      )

// add the Y gridlines
  g.append("g")			
      .attr("class", "grid")
      .call(make_y_gridlines()
          .tickSize(-width)
          .tickFormat("")
      )
                    };

draw();

</script>
</body>

https://d3js.org/d3.v4.min.js