D3.js Quick Start Guide

Creating a time scale

Let's position the circles horizontally, based on the date that their associated run happened. First, create a time scale. This is like a linear scale, but instead of mapping numeric values to visual points, it maps dates to visual points. Add the following to the bottom of app.js:

//scaleTime maps date values with numeric visual pointsvar xScale = d3.scaleTime();xScale.range([0,WIDTH]); xScale.domain([new Date('2017-10-1'), new Date('2017-10-31')]); console.log(xScale(new Date('2017-10-28'))); console.log(xScale.invert(400));

Here's what our console should look like:

You can now remove the two console.log() statements. ...