[Solved]-Create a padding for the first and last data points using a time scale-d3.js

since you have a time scale, you cannot simply multiply the domain values by a given number, as the answer linked in the comments correctly does (which is the most common solution for a linear scale).

in a time scale, you can add or subtract time using interval.offset.

for instance, in your case, i'll subtract 10 seconds from the first date and add 10 seconds in the last date:

var x = d3.scaletime()
    .domain([d3.timesecond.offset(d3.min(data[0], function(d) {
            return d.inspected_at;
        }), -10),
        d3.timesecond.offset(d3.max(data[0], function(d) {
            return d.inspected_at;
        }), +10)
    ])
    .range([0, width - 100]);

that should be enough, but you can change that magic number the way you want.

also, it's worth mentioning that interval.offset is way easier and handier than the js alternatives, since you can use d3.timesecond for seconds, d3.timeminute for minutes, d3.timeday for days and so on, adding or subtracting the necessary amount of seconds, minutes, days, weeks etc you want.

here is the updated codepen: https://codepen.io/anon/pen/nbeyrn?editors=0010