9

I want to plot some time series data that is not continuous (gaps in the dates for weekends, holidays, etc..). It's daily data.

The data looks something like:

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; }));

The problem however, is that my dates have gaps in them. And my x-axis now includes those missing dates (d3.time.scale() does this automatically I guess because it maps to a continuous range?).

.extent() finds the max and min values in date then .domain() returns those max and min values as the range for the x-axis. But im not sure how to handle gaps and return the non gap dates to the range.

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

What is the correct way to do this? Can someone please point me in the right direction or give some example? Thank you!

Also please, I want to solve with with just plain d3 and javascript. I am not interested in using any 3rd party abstraction libraries.

1
  • 4
    You could use an ordinal scale. Jan 24, 2015 at 20:39

2 Answers 2

6

As Lars Kotthof points out, you can create an ordinal x axis, which "looks" like a time scale. Assuming you want to plot your time series as a line, here is an example how to do it: http://jsfiddle.net/ee2todev/3Lu46oqg/

If you want to customize your format for the dates, e.g. respresent the date as day (of the week), day and month you have to convert your string to a date first. I added one example which formats the dates in a common German format. But you can easily adjust the code to your needs. http://jsfiddle.net/ee2todev/phLbk0hf/

Last, but not least, you can use

axis.tickValues([values])

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

1

The d3fc-discontinuous-scale component adapts any other scale (for example a d3 time scale) and adding the concept of discontinuities.

These discontinuities are determined via a 'discontinuity provider' the built in discontinuitySkipWeekends allows you to skip weekends.

Here's an example:

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

And here's a complete demo: https://bl.ocks.org/ColinEberhardt/0a5cc7ca6c256dcd6ef1e2e7ffa468d4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.