D3 Examples - Line_Chart_Months

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;
}
    
.overlay {
  fill: none;
  pointer-events: all;
}
​
.focus circle {
  fill: none;
  stroke: steelblue;
}
  </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 x = d3.scaleTime()
                        .rangeRound([0, width]);
​
                    var y = d3.scaleLinear()
                        .rangeRound([height, 0]);
    
                                    bisectDate = d3.bisector(function(d) { return d.date; }).left;
​
                    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_month": 1, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 2, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 3, "leads_created_date_year": 2016, "total": 0.5}, {"leads_created_date_month": 4, "leads_created_date_year": 2016, "total": 0.1667}, {"leads_created_date_month": 5, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 6, "leads_created_date_year": 2016, "total": 0.0}, {"leads_created_date_month": 7, "leads_created_date_year": 2016, "total": 0.125}, {"leads_created_date_month": 8, "leads_created_date_year": 2016, "total": 0.125}, {"leads_created_date_month": 9, "leads_created_date_year": 2016, "total": 0.3}, {"leads_created_date_month": 10, "leads_created_date_year": 2016, "total": 0.1786}, {"leads_created_date_month": 11, "leads_created_date_year": 2016, "total": 0.2609}, {"leads_created_date_month": 12, "leads_created_date_year": 2016, "total": 0.2778}, {"leads_created_date_month": 1, "leads_created_date_year": 2017, "total": 0.0}, {"leads_created_date_month": 2, "leads_created_date_year": 2017, "total": 0.1111}, {"leads_created_date_month": 3, "leads_created_date_year": 2017, "total": 0.2593}, {"leads_created_date_month": 4, "leads_created_date_year": 2017, "total": 0.1765}, {"leads_created_date_month": 5, "leads_created_date_year": 2017, "total": 0.2593}, {"leads_created_date_month": 6, "leads_created_date_year": 2017, "total": 0.2414}, {"leads_created_date_month": 7, "leads_created_date_year": 2017, "total": 0.1842}, {"leads_created_date_month": 8, "leads_created_date_year": 2017, "total": 0.1724}, {"leads_created_date_month": 9, "leads_created_date_year": 2017, "total": 0.2222}, {"leads_created_date_month": 10, "leads_created_date_year": 2017, "total": 0.1818}, {"leads_created_date_month": 11, "leads_created_date_year": 2017, "total": 0.2593}, {"leads_created_date_month": 12, "leads_created_date_year": 2017, "total": 0.1905}, {"leads_created_date_month": 1, "leads_created_date_year": 2018, "total": 0.2}, {"leads_created_date_month": 2, "leads_created_date_year": 2018, "total": 0.1818}, {"leads_created_date_month": 3, "leads_created_date_year": 2018, "total": 0.1667}] ;
​
                        data.forEach(function (d) {
                            d.leads_created_date_month_year = parseTime(d.leads_created_date_month + "-" + 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;
                        }));
​
                        g.append("g")
                            .attr("transform", "translate(0," + height + ")")
                            .call(d3.axisBottom(x).ticks(6).tickFormat(d3.timeFormat("%-m-%Y")))
                            .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("")
      );
                      
    var focus = g.append("g")
      .attr("class", "focus")
      .style("display", "none");
​
  focus.append("circle")
      .attr("r", 4.5);
​
  focus.append("text")
      .attr("x", 9)
      .attr("dy", ".35em");
​
  g.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
     .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);
​
  function mousemove() { 
    var x0 = x.invert(d3.mouse(this)[0]);
    i = bisectDate(data, x0,1),
    d0 = data[i - 1],
    d1 = data[i],
    //  d = data[i];
     d = x0 - d0.leads_created_date_month_year > d1.leads_created_date_month_year - x0 ? d1 : d0;
   focus.attr("transform", "translate(" + x(d.leads_created_date_month_year) + "," + y(d.total) + ")");
   focus.select("text").text((d.leads_created_date_month_year.getMonth()+1) + "-" + d.leads_created_date_month_year.getFullYear());              
                    };
                      
                    };
​
                    draw();
​
  </script>
</body>
​
    