[D3] Convert Dates to Numeric Values with Time Scales in D3 v4

Posted 2020-08-21 Answer1215

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. This is usually done using pretty straightforward algorithms, but nothing is straightforward when you’re working with Date objects in javascript. If you’re plotting temporal data, you need to use a time scale.

 

function scaleTime(){
    var timeScale = d3.scaleTime()
        .domain([new Date(2016,0,1), new Date()])
        .range([0,100]);

    console.log(timeScale(new Date(2016,0,15)));
    console.log(timeScale(new Date(2016,3,15)));
    console.log(timeScale(new Date()));

    console.log(timeScale.invert(50));
}