line-chart.js

const dataSet = [
  { timepoint: '2016-06-08T12:00:00Z', temperature: 15.2 },
  { timepoint: '2016-06-08T13:00:00Z', temperature: 16.1 },
  { timepoint: '2016-06-08T14:00:00Z', temperature: 19.2 },
  { timepoint: '2016-06-08T15:00:00Z', temperature: 21.5 },
  { timepoint: '2016-06-08T16:00:00Z', temperature: 12.8 },
  { timepoint: '2016-06-08T17:00:00Z', temperature: 15.3 },
  { timepoint: '2016-06-08T18:00:00Z', temperature: 15.0 },
  { timepoint: '2016-06-08T19:00:00Z', temperature: 15.1 },
  { timepoint: '2016-06-08T20:00:00Z', temperature: 14.1 },
  { timepoint: '2016-06-08T21:00:00Z', temperature: 12.3 },
];

const w = 900;
const h = 400;
const padding = 20;

const svg = d3.select('#main')
              .append('svg')
              .attr('width', w)
              .attr('height', h);

// Scale for Date
const scaleX = d3.scaleUtc()
                 .domain(d3.extent(dataSet, d => new Date(d.timepoint)))
                 .range([2 * padding, w - 3 * padding]);

const scaleY = d3.scaleLinear()
                 .domain([0, 35])
                 .range([h - padding, padding]);

// Axis for Date
const axisX = svg.append('g')
                 .attr('class', 'x-axis')
                 .attr('transform', `translate(0, ${h - padding})`)
                 .call(d3.axisBottom()
                         .scale(scaleX)
                         .ticks(d3.timeHour, 2)
                         .tickFormat(d3.timeFormat('%Y-%m-%d %H:%M')));
                 //.selectAll('text')
                 //.attr('transform', 'translate(0, 40) rotate(-90)');

const axisY = svg.append('g')
                 .attr('class', 'y-axis')
                 .attr('transform', `translate(${2 * padding}, 0)`)
                 .call(d3.axisLeft()
                         .scale(scaleY));

// Append circles
svg.selectAll('circle')
   .data(dataSet)
   .enter()
   .append('circle')
   .attr('cx', d => scaleX(new Date(d.timepoint)))
   .attr('cy', d => scaleY(d.temperature))
   .attr('r', '5');

const line = d3.line().x(d => scaleX(new Date(d.timepoint)))
                      .y(d => scaleY(d.temperature));

// Append lines
svg.append('path')
   .datum(dataSet)
   .attr('class', 'line')
   .attr('d', line);

Reference

• http://dev.classmethod.jp/client-side/javascript/d3-js_linechart_and_barchart/
• http://blog.mitsuruog.info/2015/07/my-opinion-that-did-create-a-timechart-in-d3-dot-js.html