towards slippy timeline
486 views
Skip to first unread message
Benjamin West
Dec 10, 2012, 2:18:16 PM12/10/12
to d3...@googlegroups.com
Over the weekend I took a break from my "data access" issues, and reading d3 code to take another stab at a basic visualization with great success:
While that was fun, what I really want is this: http://www.glucosurfer.org/SMOsuite.dll?gotodiagram&language=en&user=4260&share=4916690016f5f69
Notice, it's like a timeline-slippy map. I don't suppose anyone has recipes to organize things similar to how map layers work, with the zoom level controlling the unit of time being iterated over? I've taken a few stabs at a few of the zoom and drag examples, but they always end in disaster. In the meantime, I can still focus one feature at a time on each useful metric. <3 git, gist, bl.ocks.org, d3.
-bewest
Benjamin West
Dec 10, 2012, 2:23:18 PM12/10/12
to d3...@googlegroups.com
Oops, this is a better example of what I want.
http://www.glucosurfer.org/SMOsuite.dll?gotodiagram&language=en&user=2460&share=60991eff75badb6
Notice the ability to contrast different metrics, namely appearance of insulin versus glucose readings and carb intake.
Eventually hope to integrate with crossfilter to select time of day, etc.
-bewest
Eventually hope to integrate with crossfilter to select time of day, etc.
-bewest
Ian Johnson
Dec 10, 2012, 3:04:43 PM12/10/12
to d3...@googlegroups.com
others may be able to point you to some good zoom/time examples, but i just wanted to say that this is an awesome application of d3. using your tools to improve your understanding of data that is very personal, and very important.
keep up the great work!
Ziggy Jonsson
Dec 11, 2012, 12:48:27 PM12/11/12
to d3...@googlegroups.com
I added the basic zoom/pan to a fork of your gist:
The key thing here is to separate between the initiation of the objects (i.e. where you selectAll(..).data(..).append()) and the placement (where you set the attrs based on current scale). I put the placement into a render() function that is called by .on("zoom") in the d3.behaviour.zoom. A demo on how to further set a clip-path (to ensure your plot renders only within the viewing-area) is here http://bl.ocks.org/4015254
Good luck,
Z
Benjamin West
Dec 11, 2012, 4:19:13 PM12/11/12
to d3...@googlegroups.com
Wow, thanks so much Z. This is a very clear intermediate step towards what I want, and helps me understand what I've been reading in some of the pan/zoom examples (eg, when to use drag vs zoom). I think next step is to mash this up with something similar to the geo tile plugin, so that my svg rendering function gets data unique for the tile and renders only within it's tile?
This is awesome, can't wait to play with this more over holidays.
This is awesome, can't wait to play with this more over holidays.
-bewest
Ian Johnson
Dec 11, 2012, 4:25:59 PM12/11/12
to d3...@googlegroups.com
you could probably hook up crossfilter to filter out data that's within the range you select. I don't know that geo tiling is the best model for what you actually want to implement here since that's based mostly off of rasterizing data. I think you could get the same effect by just filtering your data live with the extent of your zoom.
looking forward to seeing what comes out of this!
Benjamin West
Dec 12, 2012, 1:06:16 PM12/12/12
to d3...@googlegroups.com
I see. I've had my eye on crossfilter for some time now.
I will take your advice on geo tiling... I will just need fetch
slightly more data than needed for the entire viewport.
In the meantime, I can't emphasize how cool Ziggy's patch was. I've
been playing with the x-axis trying to better understand how to adjust
number and spacing between ticks. Somehow d3's default time
formatting does a nice job of interpolating month and day names when
appropriate to keep things concise. However, at different zoom
levels, I think I'd like have better defined zoom levels some zoom
levels change the spacing between ticks. To do this, do I try
changing the x scale's range when render happens on zoom?
Hmmm, I suppose I could also change tick formatting and other things too.
http://bl.ocks.org/4265100
(Not suggesting these spacings, just trying to exercise the concept...)
At one point I tried experimenting with creating a scale based on the
unit of time I was interested in... eg, use this one for day, this one
for week, this one for 90 hour, etc, instead of deriving it from the
data, but it didn't have the effects I predicted.
-bewest
I will take your advice on geo tiling... I will just need fetch
slightly more data than needed for the entire viewport.
In the meantime, I can't emphasize how cool Ziggy's patch was. I've
been playing with the x-axis trying to better understand how to adjust
number and spacing between ticks. Somehow d3's default time
formatting does a nice job of interpolating month and day names when
appropriate to keep things concise. However, at different zoom
levels, I think I'd like have better defined zoom levels some zoom
levels change the spacing between ticks. To do this, do I try
changing the x scale's range when render happens on zoom?
Hmmm, I suppose I could also change tick formatting and other things too.
http://bl.ocks.org/4265100
(Not suggesting these spacings, just trying to exercise the concept...)
At one point I tried experimenting with creating a scale based on the
unit of time I was interested in... eg, use this one for day, this one
for week, this one for 90 hour, etc, instead of deriving it from the
data, but it didn't have the effects I predicted.
-bewest
nick
Dec 13, 2012, 8:23:47 AM12/13/12
to d3...@googlegroups.com
your timeline looks very cool! i'll probably steal some of it right away.
@ziggy: thanks for reminding me about clip. i have always used it a lot in inkscape (my primary svg entry point), but hadn't considered the evil it could do when wielded in a data driven way.
regarding your time scale customization... this is pretty deep in d3, and 99% of the time is really good: while you can use different scales, it will eventually cause a lot of pain... i like to keep as few as possible around.
however, I have found I sometimes want weird things, like fiscal years and quarters (Q1 FY2013 is 1 Oct 2012!), that really don't have a place in d3. In these cases, I usually end up having to mostly implement axes myself, and then do some work on the ticks that come off the scale. luckily, throw a + in front of a date, and now it's milliseconds, and you can do math on it, etc.
Here's a fiddle with the simplest example i can think of: http://jsfiddle.net/5gLUC/
Hope this helps: It Works but I hope someone swoops in and tells me the right way to do this, as it feels a little odd.
@ziggy: thanks for reminding me about clip. i have always used it a lot in inkscape (my primary svg entry point), but hadn't considered the evil it could do when wielded in a data driven way.
regarding your time scale customization... this is pretty deep in d3, and 99% of the time is really good: while you can use different scales, it will eventually cause a lot of pain... i like to keep as few as possible around.
however, I have found I sometimes want weird things, like fiscal years and quarters (Q1 FY2013 is 1 Oct 2012!), that really don't have a place in d3. In these cases, I usually end up having to mostly implement axes myself, and then do some work on the ticks that come off the scale. luckily, throw a + in front of a date, and now it's milliseconds, and you can do math on it, etc.
Here's a fiddle with the simplest example i can think of: http://jsfiddle.net/5gLUC/
Hope this helps: It Works but I hope someone swoops in and tells me the right way to do this, as it feels a little odd.
Ian Johnson
Dec 13, 2012, 1:42:14 PM12/13/12
to d3...@googlegroups.com
re time intervals:
you can do stuff like d3.time.day.offset(new Date(), -1) to get yesterday.
it's waaaay nicer than trying to do millisecond math :)
nick
Dec 13, 2012, 2:25:20 PM12/13/12
to d3...@googlegroups.com
Ah, seems nice: i had looked at that page, but I didn't parse the meta nature of the doc there.
In the fiddle example, this isn't tremendously helpful in cleaning up, as there is no d3.time.milliseconds and i had chosen to only do special formatting under the smallest granularity. However, this certainly solves some of the problems i've had, though the weirdness of fiscal years would still require some hackery. also, any insight on special formatting that doesn't require knowing the tick interval in advance? i'd love to set axis.tickFormat and be done with it.
In the fiddle example, this isn't tremendously helpful in cleaning up, as there is no d3.time.milliseconds and i had chosen to only do special formatting under the smallest granularity. However, this certainly solves some of the problems i've had, though the weirdness of fiscal years would still require some hackery. also, any insight on special formatting that doesn't require knowing the tick interval in advance? i'd love to set axis.tickFormat and be done with it.
Reply all
Reply to author
Forward
0 new messages