D3 Continuous domain term gives spaces on the X axis

Question

I want to build some time series of data that are not continuous (spaces in dates for weekends, holidays, etc.). This is daily data.

The data looks something like this:

date,value 1/2/15,109.33 1/5/15,106.25 1/6/15,106.26 1/7/15,107.75 1/8/15,111.89 1/9/15,112.01 1/12/15,109.25 1/13/15,110.22 ... 

So, I define my x and y scales :

 var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); 

And set the domain from my source data:

 x.domain(d3.extent(data, function(d) { return d.date; })); y.domain(d3.extent(data, function(d) { return d.value; })); 

However, the problem is that my dates have spaces. And now my x axis includes those missing dates ( d3.time.scale() does this automatically, I think, because it displays a continuous range?).

.extent() finds the maximum and minimum values ​​in date , then .domain() returns these max and min values ​​as a range for the x axis. But I'm not sure how to deal with spaces and return the dates of the absence of spaces in the range.

So my question is: how can I use the x-axis range only for dates that are in my dataset? And do not "fill in the blanks." Should I play with d3.time.scale().range() ? or do i need to use a different scale ?

What is the right way to do this? Can someone point me in the right direction or give me an example? Thanks!

Also, please, I want to solve using simple d3 and javascript. I am not interested in using any third-party abstraction libraries.

Answer 1

As Lars Kottoff points out, you can create an ordinal x axis that "looks" like a timeline. Assuming you want to build time series as a string, here is an example of how to do this: http://jsfiddle.net/ee2todev/3Lu46oqg/

If you want to customize the format for dates, for example. To represent the date as day (weeks), day and month, you must first transfer your line to the date. I added one example that formats dates in a common German format. But you can easily customize the code to your needs. http://jsfiddle.net/ee2todev/phLbk0hf/

Last but not least, you can use

 axis.tickValues([values]) 

to select the dates you want to display. See also: https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

Answer 2

The d3fc-disccontinuous-scale component adapts to any other scale (for example, the d3 timeline) and adds the concept of gaps.

These gaps are defined through the "interrupt provider", the built-in discontinuitySkipWeekends allows you to skip the weekend.

Here is an example:

 const skipWeekendScale = fc.scaleDiscontinuous(d3.scaleTime()) .discontinuityProvider(fc.discontinuitySkipWeekends()); 

And here is the full demo: https://bl.ocks.org/ColinEberhardt/0a5cc7ca6c256dcd6ef1e2e7ffa468d4