D3 Examples - Line_Chart

xxxxxxxxxx
 
<!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]);
​
                    var line = d3.line()
                        .x(function (d) {
                            return x(d.leads_created_date_month_year);
                        })
                        .y(function (d) {
                            return y(d.total);
                        });
   
    
    // gridlines in x axis function
function make_x_gridlines() {       
    return d3.axisBottom(x)
        .ticks(12)
};
​
// 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>
​
    