On Mon, Oct 14, 2013 at 8:06 PM, jeph <jephpaul@gmail.com> wrote:
Hi,I've made some changes to the slider.I'm thinking of adding a hover to better explain the gaps (time between edits) in the zoomed in graph.
- Made the thickness of the bars to 2px, restricted the slider to 50 units, cleaned the color etc.(Minor changes)
- The gaps in the zoomed in graph are proportional to time between the edits.
- A tooltip in the zoomed in graph giving the user name & date.
I haven't yet added any axis or legend for the graphs.I'm thinking of spinning off the slider with a bunch of other article related data (I have a very basic idea of what to do , will share as soon as I have something working).Slider http://bl.ocks.org/cosmiclattes/6976316 (It loads the edit from George W Bush 45,263 edits ). Also the left most edits are the latest and edits/ bars are loaded as the slider is moved to the right. ( I did this as I felt most people would be interested in the current edits versus older ones.)
Looking forward to comments & ideas :-)ThanksJephOn Wed, Oct 9, 2013 at 1:36 AM, jeph <jephpaul@gmail.com> wrote:
Hi Jared,
- Added & deleted bars
- Every bar in the graph represents a unique edit, that happened at a specific point in time, they are shifted to show the sequence of the edits.
- Thickness of bars
- 1 px works fine, will make them 1px.
- Temporal Scaling
- I agree on accurately showing the time between the edits but how do we do that while not showing a lot of blank space. For example if there is a 21 day gap between edits we will have a 21*x px gap and the user may have to go through many such blank areas depending on the article. (Actually I dont have any data on the "time between edits" distribution across articles, I just guessing).Are there other ways we could represent this ? or do we go ahead with the blank spaces ?
- Vertical Scaling
- The vertical heights are being scaled using a power scale (Is that a good idea ?) .Linear scales don't work as the difference between the edit size are too far apart.
- Secondary Graph
- It is to follow the same color pattern as the primary graph, it is to be an enlarged version of the selection on the primary graph
- A handle on the secondary graph should let the user go through the edits manually, like in a video editing tool.
- Selecting
- The primary Idea of selecting is to decide which edits should be part of the playback. And also as a zoom, both in terms of bigger bars showing more data and a more accurate representation of the timeline. I'm not sure how to represent the timeline while not showing a lot of blank areas though.
If you have any other Idea to represent the timeline with/without a bargraph I'd be more than happy to try it out :-)ThanksJephOn Tue, Oct 8, 2013 at 4:21 AM, Jared Zimmerman <jared.zimmerman@wikimedia.org> wrote:Jeph,This is coming along really well I think. That abstract about adjusting time scale is interesting, although might be overkill for what we need here.
- Alignment of added and deleted
- Why are the added and deleted bars always shifted from each other? if each horizontal instance is an "edit" wouldn't they be aligned?
- Thickness of bars
- Have you explored much thinner bars? 1px could even work i think.
- Temporal scaling
- I feel pretty strongly that we should include the gaps for time that edits are not happening, e.g. if by default each day was 1px, if "zoomed" that scale could change to hourly, etc.
- User changes
- For consecutive edits for the same user you could use the same vibrancy of blue, for the initial edit, and a significantly lighter, or more transparent for subsequent edits by the same user.
- Vertical scaling
- For the given view bounds you could scale the vertical height so that it stays within the bounds of the control.
- Secondary graph?
- I don't quite understand what the secondary single color graph below the main one is?
- Selecting?
- Its possible to select parts of the graph, but unclear what selecting it does, or if it has any purpose.
- Would you use selection as a means of "zooming in" to see different time scales, if not what is your plan for this. When/if zoomed in, how will you show your relative position in the whole time-scale?
Great work,JaredJared Zimmerman \\ Director of User Experience \\ Wikimedia FoundationM : +1 415 609 4043 |: @JaredZimmerman
On Sun, Oct 6, 2013 at 8:18 AM, jeph <jephpaul@gmail.com> wrote:I have a built a prototype of the slider. It has a few basic features. I have not yet added it to the tool but you can play with it.On moving the slider to the left corner more data gets progressively added. Additions are blue bars in the positive direction and deletions are red bars downwards.I'm using a power scale to scale down the edit sizes ( The size of the bar is proportional to the edit size). It works much like the google finance chart slider.In the prototype above the selected portion is show below with in the same proportions (It will be enlarged , have a tooltip on hover showing the details related to the edit etc & have a handle to select the edit to begin the animation from).I tried showing the temporal distance between the edits by coloring the bars based on the time difference between consecutive edits (The data that you see in the slider is the edits from the page JSON). This isn't working, in the prototype a user can hardly make out the time difference between the edits. Another approach to show the time difference between two edits that I came across was showing the time difference between each edits with a separate scale.I'll be adding the basic slider to the viz tool in the coming week. Looking forward to ideas and comments.I'm a complete newbie to design, I haven't yet gotten around to read Tufte :-). I've been looking at a lot of vizualisation by Ben Fry & Mike Bostock.I've attached a screen shot of the prototype.ThanksJeph_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design