d3.time.scale domain and range

447 views
Skip to first unread message

toszter

unread,
Dec 1, 2011, 2:10:00 AM12/1/11
to d3-js
Greetings Visualizers,

I am working on a very large scale data modeling project. Just
beginning to familiarize myself with d3. I do enjoy the project, and
appreciate its potential. Thank you.

I understand the convenience of modeling time series over regular
intervals, but in my world, events happen at random, with random UNIX
timestamps, and I am puzzled with how to set up the time scales for x
and y axes in my model. Perhaps by providing an example of what I am
doing, your generosity, and my ongoing tenacity, we'll have this
better understood...

My time series is this, but much larger:

[{ t: 1322523468721, v: 19587 }
{ t: 1322523478911, v: 52425 }
{ t: 1322523795609, v: 14266 }
{ t: 1322523903723, v: 78271 }
{ t: 1322523144777, v: 8372 }
{ t: 1322523226188, v: 93030 }
{ t: 1322523255502, v: 8279 }
{ t: 1322523706449, v: 36722 }
{ t: 1322523966551, v: 13442 }
{ t: 1322523795959, v: 13455 }]

1. I want to create an x time scale from the first date to the last
date, but I don't understand how range factors into the random set of
time values. So, x =
d3.time.scale().domain([min_t,max_t]).range(?)
2. I want to create a y time scale for the v values occurring at time
t. All v are the duration of the event at time t.
3. I want to then draw a vertical rectangle (or line 2px wide) at each
time t along the x time scale.

A. How should I be setting up the time scale functions? for x? for
y?
B. To draw lines, should I create a function of t returning the x-
pixel value between the the pixel values of minimum t and maximum t,
i.e. the chart's full width?
C. Do these timestamps and time deltas need to become Date objects in
order to render properly?

Any foothold is appreciated.


poswald

unread,
Dec 1, 2011, 9:10:36 AM12/1/11
to d3-js
The way to think of the scales is as a function that converts an input
value that lies somewhere in the domain into a value that lies in the
output range. So, given a unix date in the domain, you get back a
value that lies in the range. Usually what you're looking for is a
pixel value so your range is the width of your graph. If you had a
domain that covered a million years and a range of 0-100 pixels, the
scale function would tell you which of those 100 pixels to draw the
date on. The fact that it's linear is just an instruction on how to
map that.

Your y scale is not dates but magnitude of duration so your min is 0
and your max could be the longest one. Your y range is the height of
your chart. When you draw your svg rectangle, you can use the x and y
scales to determine the (x,y) point of the corner of the box.

You would only need to use the Date object to display the x labels if
you care about how they look and you want to report in a human-
friendly way which is likely. The scale function's domain can work on
the unix timestamps themselves.

toszter

unread,
Dec 1, 2011, 1:30:34 PM12/1/11
to d3-js
Thank you.  Makes sense at a high level.  I appreciate your clarity.
 As a twist, how to implement two y axes with two separate logarithmic
scales on the same x axis time scale?

toszter

unread,
Dec 1, 2011, 5:27:32 PM12/1/11
to d3-js
Maybe here I can answer my own question... create two log scales, and
use the function for each on each uniquely scaled data set,
respectively. Reuse the x in both cases.
Reply all
Reply to author
Forward
0 new messages