JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="test"><div>

JavaScript

followerLineGraph = function(data)
{    
    var width = 200;

    var x = d3.time.scale()
        .domain([data[0].date, data[data.length - 1].date])
        .range([30, width]);

    var chart = d3.select("#test").append("svg").attr("class", "chart");

    //Date Label
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(2)
        .tickFormat(d3.time.format('%m/%d-%a'))
        .tickSize(1)
        .tickPadding(8);

    var xAxis1 = d3.svg.axis()
        .scale(x)
        .ticks(d3.time.days,8)
        .tickFormat(d3.time.format('%m/%d-%a'))
        .tickSize(0)
        .tickPadding(8);

		var i = 0;
    var xAxis2 = d3.svg.axis()
        .scale(x)
        .tickFormat(
        
       )
        .tickSize(0)
        .tickPadding(8);
    xAxis2.tickValues(data.map(function(d) { return d.date;}));

    
    var xAxis3 = d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%m/%d-%a'))
        .tickSize(1)
        .tickPadding(8);
    xAxis3.ticks(function(start, end) {
        console.log(arguments);
        var mid = new Date((start.getTime() + end.getTime()) / 3);
        var mid2 = new Date((start.getTime() + end.getTime()) * 2 / 3);

        return [start, mid, end];
    });
    
    chart.append('g')
        .attr('fill', '#1ff')
        .attr('transform','translate(0,0)')
        .call(xAxis);

    chart.append('g')
        .attr('fill', '#1f1')
        .attr('transform','translate(0,30)')
        .call(xAxis1);

    chart.append('g')
        .attr('fill', '#f1f')
        .attr('transform','translate(0,60)')
        .call(xAxis2);

    chart.append('g')
        .attr('fill', '#11f')
        .attr('transform','translate(0,90)')
        .call(xAxis3);
}

    var data = [
      { date: new Date(2013, 1, 28), TotalLikes: 18 },
      { date: new Date(2013, 2, 14), TotalLikes: 15 }
];

followerLineGraph(data);