AttrTween for a progress meter

109 views
Skip to first unread message

Helen Gibson

unread,
Aug 4, 2013, 6:26:21 PM8/4/13
to d3...@googlegroups.com
Hi 

I'm just getting to grips with d3 and I want to create a circular progress meter. 

I've spent time looking at these two examples and others
but I just can't quite make the leap from those examples to what i want to do. Which is more simple I think. 

I can display this statically but I want to transition from 0 to the amount of progress made 
which is defined by two values progress and total. 

I've got this far http://jsfiddle.net/CupyX/

Thanks 

Helen

al lin

unread,
Aug 14, 2013, 3:32:29 AM8/14/13
to d3...@googlegroups.com
Hi Helen,

Hopefully this reply isn't a moot point by now.

I've modified your code so that the initial progress is displayed:

You'll still need to work on the transitions and tween. Looking at it, in attrTween, d, i, a are passed to functions. Data, index, attributes. The data will new, so you can't use it for interpolation. Mike Bostock stores the old values on the DOM element for this reason (look for this._current).

If you haven't already, I would look at the General Update Patterns to get a better understanding of how data is bound to DOM elements.

And as a shameless self-plug, I just recently wrote up some examples on arc tweening. Hopefully you find my examples helpful:

Please let us know if you need any more help!

CHeers,
al

Rex X

unread,
Jul 15, 2015, 4:42:56 PM7/15/15
to d3...@googlegroups.com
Hi Al,

I am also following this progress bar animation started by Mike,
http://bl.ocks.org/mbostock/3750941

but I want to show the loading progress for multiple files using [Queue.js](https://github.com/mbostock/queue)

Can we add a progress loading bar computed by the number of files loaded divided by the total number of files?
The native "progress" of d3.csv is only for one file loading.


 var finalData = {};
 var q = queue(), // create the queue
    dataSources = [ // the data sources
        'myData_key1.csv',
        'myData_key2.csv',
        'myData_key3.csv',
        ...,
        'myData_key30.csv'
    ];

// Go through each data source and add it to the queue: dataSources.forEach(function (source) { q.defer(function (callback) { d3.csv(source, callback); }); }); // Wait for all requests to be completed: q.awaitAll(function (error, results) { console.log(results); })


al lin

unread,
Jul 21, 2015, 1:54:37 AM7/21/15
to d3...@googlegroups.com
Hey Rex,

I don't see why not! If you know the number of files, then you have your `total` for the progress. Then each time you get a `success` callback, just increment the count by one, and update the interpolater, specifically:

var i = d3.interpolate(progress, d3.event.loaded / total);

But instead of d3.event.loaded, it'd be fileCount or whatever. I took the time to create a Gist to show this and also to show the async events happening:


Be sure to open up your Chrome console because I put some logging in there to simulate download requests. You can set total = dataSources.length in your case.

Also, I updated Helen's original jsFiddle as well to include some transitions (and because I needed a refresher on D3 tweening):

Hope this helps!

Rex

unread,
Jul 22, 2015, 2:50:45 AM7/22/15
to d3...@googlegroups.com
Hey Al,

Very nice. How to implement it with Mike's queueJS and awaitAll function?

Best,
Rex


--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/njGyajVJyTs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages