Time scrobber in Javascript

[Stian Håklev]

Hi guys, I'm quite clueless when it comes to javascript libraries and frameworks, but for a current project, it would be really useful - and I'd really appreciate your ideas.

I am trying to visualize the growth of a discussion forum with lot's of subforums. Currently I have already implemented extracting the tree of subforums, and looking up essential stats (number of posts, number of authors, length of posts, length of threads, etc) per subforum. However, I'm interested in visualizing this over time. Basically I'd like a slider which starts at the beginning of the course, and goes through the six weeks day by day (where you can either "play" it through as an animation, or manually slide it). I'm thinking that there would be some kind of js function that takes day as an argument, and returns the relevant numbers for that day, which would be called by the slider... 

I'm also thinking of doing some kind of heatmap, plotting every single post, by forum and time, and perhaps different colors for instructors and students, because one of the thing I'm interested in is whether people "move along" from one subforum to another week by week, or whether discussions continue in earlier forums.

Anyway, any ideas of libraries/frameworks I can use to do this? Or even the right search term to use - when I searched for javascript timeline, I got things like http://timeline.knightlab.com/, which is totally now what I mean. Then I searched for javascript time scrubber, and still couldn't find anything obvious. 

Basically my idea is to have a list of forums

Forums

--week 1

----week 1 problems

----week 1 chichat

--week 2

--software issues

etc. Each subforum would change color once they are made available by the instructor. After each subforum is a list of dots, representing the number of threads, so that you can see how they are growing over time, and each time someone writes to a thread, the dot lights up (so that you can see which threads are active when, but also if people still post replies to early threads, or just move on to the latest threads)... This would have to be some kind of aggregate heatmap stuff, we're talking 20,000 threads in total.

Anyway, suggestions highly welcome.

thank you
Stian

--

http://reganmian.net/blog -- Random Stuff that Matters

[Anthony Perritano]

Hi Stian,

I would check out D3 http://d3js.org.I’m using it at the moment for a couple of visualization projects,  its pretty flexible.  It has a bunch of clustering algorithms. 

HTH

-Tony

--
You received this message because you are subscribed to the Google Groups "Educoder" group.
To unsubscribe from this group and stop receiving emails from it, send an email to educoder+u...@googlegroups.com.
To post to this group, send email to educ...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/educoder/CAEKz3tjSzVf-QORLNuTDMGZyvKbBQfaUVkVP9S6XDcj9-qdt5w%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Jonathan Lim-Breitbart]

Yes, I second Tony's D3 recommendation.  Great library for all sorts of data vis formats.

For the second display, you could use something like a force layout to show the forums, subforums, and threads: http://mbostock.github.io/d3/talk/20111116/force-collapsible.html.  You could use size of dot to represent activity levels (number of posts in a thread for example), combine with color to show activity, as you suggested, etc.  Force layouts can also be collapsible, so that might be a nice accessible way to allow folks to explore the tens of thousands of threads by drilling down, with a nice top-level view to start with.

To view this discussion on the web visit https://groups.google.com/d/msgid/educoder/67DC0A12DB74441C834E73C5CB7F3AFA%40gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Jonathan Lim-Breitbart

Feature Developer and Lead Designer

Web-based Integrated Science Environment (WISE)

http://wise.berkeley.edu

[mike tissenbaum]

You might want to try c3.js or rickshaw.js both are extension libraries to D3 that make doing time series really easy and customizable (rickshaw has a scrubber built into it) so they might get you what you need out of the box with less grinding through D3 itself

To view this discussion on the web visit https://groups.google.com/d/msgid/educoder/CAJMqY999y91vT9A5yUbq2Rd-qcPzzpp%3DPveD4HoYcEcsiXt_VA%40mail.gmail.com.