Hi, I'm building a tool to make it easier for an editor to go through the edits/revisions in an article. The tool shows the changes in html rather than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
- Please checkout the live demohttps://googledrive.com/host/0B1hJO1N6piYFTTVZdW1mU2c0S28/visualise.html . - My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. - Some mock ups. Mock 1https://docs.google.com/file/d/0B1hJO1N6piYFM2FxVlBtakNlRXM/edit?usp=sharing ,Mock 2https://docs.google.com/file/d/0B1hJO1N6piYFMWUzVkpsR2dmUFU/edit?usp=sharing
The demo is bare bones & I'm working on adding the following features .
- Pause/Forward/Rewind buttons - Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the start and end revision , especially when the article has thousands of edits over five or six years.
Thanks Jeph
It is very much like the timeslider in Etherpad. It will be a great external visualization tool, but I'd like personally to see this as MediaWiki extension!
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote:
Hi, I'm building a tool to make it easier for an editor to go through the edits/revisions in an article. The tool shows the changes in html rather than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
Please checkout the live demo. My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. Some mock ups. Mock 1,Mock 2
The demo is bare bones & I'm working on adding the following features .
Pause/Forward/Rewind buttons Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the start and end revision , especially when the article has thousands of edits over five or six years.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote:
Hi, I'm building a tool to make it easier for an editor to go through the edits/revisions in an article. The tool shows the changes in html rather than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
Please checkout the live demo. My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. Some mock ups. Mock 1,Mock 2
The demo is bare bones & I'm working on adding the following features .
Pause/Forward/Rewind buttons Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the start and end revision , especially when the article has thousands of edits over five or six years.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas p.selitskas@gmail.comwrote:
Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote:
Hi, I'm building a tool to make it easier for an editor to go through the edits/revisions in an article. The tool shows the changes in html rather than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
Please checkout the live demo. My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. Some mock ups. Mock 1,Mock 2
The demo is bare bones & I'm working on adding the following features .
Pause/Forward/Rewind buttons Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the
start
and end revision , especially when the article has thousands of edits
over
five or six years.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- З павагай, Павел Селіцкас/Pavel Selitskas Wizardist @ Wikimedia projects
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Jeph,
I like the timeline scrubber idea, it would be great if we could add in another layer of glancable information, instead of a straight timeline, if it was a spark line that went up and down from 0 (no change) to show the velocity of change (in bytes) over time, it could be very interested to show additions and subtractions to the article this way.
As far as where this control is located, toward the top of the screen feels more natural, perhaps it is tied to the "view history" tab that is currently at the top of pages. in the same way we have the wikitext editor and the visual editor, perhaps there is the current method of visualizing history and the "Visual history" viewer.
The other thing i would suggest you investigate is how additions, subtractions and changes are visualized on screen as the user is scrubbing the timeline.
* * * * *Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Wed, Aug 28, 2013 at 12:50 PM, jeph jephpaul@gmail.com wrote:
Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas p.selitskas@gmail.comwrote:
Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote:
Hi, I'm building a tool to make it easier for an editor to go through the edits/revisions in an article. The tool shows the changes in html rather than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
Please checkout the live demo. My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. Some mock ups. Mock 1,Mock 2
The demo is bare bones & I'm working on adding the following features .
Pause/Forward/Rewind buttons Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the
start
and end revision , especially when the article has thousands of edits
over
five or six years.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- З павагай, Павел Селіцкас/Pavel Selitskas Wizardist @ Wikimedia projects
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
A spark line on top of the timeline to give users an idea of what happened ? Would color coding the timeline be a good idea to convey edit activity ?
I was thinking of showing the changes when the user scrubs the timeline by making the content appear / disappear to reflect the addition and deletion of content, the way the demo shows it currently.
On Fri, Aug 30, 2013 at 4:29 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Jeph,
I like the timeline scrubber idea, it would be great if we could add in another layer of glancable information, instead of a straight timeline, if it was a spark line that went up and down from 0 (no change) to show the velocity of change (in bytes) over time, it could be very interested to show additions and subtractions to the article this way.
As far as where this control is located, toward the top of the screen feels more natural, perhaps it is tied to the "view history" tab that is currently at the top of pages. in the same way we have the wikitext editor and the visual editor, perhaps there is the current method of visualizing history and the "Visual history" viewer.
The other thing i would suggest you investigate is how additions, subtractions and changes are visualized on screen as the user is scrubbing the timeline.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Wed, Aug 28, 2013 at 12:50 PM, jeph jephpaul@gmail.com wrote:
Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas p.selitskas@gmail.comwrote:
Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote:
Hi, I'm building a tool to make it easier for an editor to go through the edits/revisions in an article. The tool shows the changes in html
rather
than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
Please checkout the live demo. My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. Some mock ups. Mock 1,Mock 2
The demo is bare bones & I'm working on adding the following features .
Pause/Forward/Rewind buttons Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the
start
and end revision , especially when the article has thousands of edits
over
five or six years.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- З павагай, Павел Селіцкас/Pavel Selitskas Wizardist @ Wikimedia projects
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
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
J eph,
yes, a sparkline for the history of the article showing amount of change over the history of the article.
As far as color coding, yes i think it could be helpful, i think you'll need to work at making the colors useful but subtle.
what is determining how long the text remains highlighted in your demo, is it part of a single "edit" "session" "user" or something else?
* * * * *Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Fri, Aug 30, 2013 at 1:22 PM, jeph jephpaul@gmail.com wrote:
A spark line on top of the timeline to give users an idea of what happened ? Would color coding the timeline be a good idea to convey edit activity ?
I was thinking of showing the changes when the user scrubs the timeline by making the content appear / disappear to reflect the addition and deletion of content, the way the demo shows it currently.
On Fri, Aug 30, 2013 at 4:29 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Jeph,
I like the timeline scrubber idea, it would be great if we could add in another layer of glancable information, instead of a straight timeline, if it was a spark line that went up and down from 0 (no change) to show the velocity of change (in bytes) over time, it could be very interested to show additions and subtractions to the article this way.
As far as where this control is located, toward the top of the screen feels more natural, perhaps it is tied to the "view history" tab that is currently at the top of pages. in the same way we have the wikitext editor and the visual editor, perhaps there is the current method of visualizing history and the "Visual history" viewer.
The other thing i would suggest you investigate is how additions, subtractions and changes are visualized on screen as the user is scrubbing the timeline.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Wed, Aug 28, 2013 at 12:50 PM, jeph jephpaul@gmail.com wrote:
Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas p.selitskas@gmail.comwrote:
Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote:
Hi, I'm building a tool to make it easier for an editor to go through the edits/revisions in an article. The tool shows the changes in html
rather
than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
Please checkout the live demo. My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. Some mock ups. Mock 1,Mock 2
The demo is bare bones & I'm working on adding the following features
.
Pause/Forward/Rewind buttons Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the
start
and end revision , especially when the article has thousands of edits
over
five or six years.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- З павагай, Павел Селіцкас/Pavel Selitskas Wizardist @ Wikimedia projects
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
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
The highlighted text is part of a single edit and stays highlighted during its course , once it moves to the next edit it is no longer highlighted.
On Sat, Aug 31, 2013 at 2:16 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
J eph,
yes, a sparkline for the history of the article showing amount of change over the history of the article.
As far as color coding, yes i think it could be helpful, i think you'll need to work at making the colors useful but subtle.
what is determining how long the text remains highlighted in your demo, is it part of a single "edit" "session" "user" or something else?
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Fri, Aug 30, 2013 at 1:22 PM, jeph jephpaul@gmail.com wrote:
A spark line on top of the timeline to give users an idea of what happened ? Would color coding the timeline be a good idea to convey edit activity ?
I was thinking of showing the changes when the user scrubs the timeline by making the content appear / disappear to reflect the addition and deletion of content, the way the demo shows it currently.
On Fri, Aug 30, 2013 at 4:29 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Jeph,
I like the timeline scrubber idea, it would be great if we could add in another layer of glancable information, instead of a straight timeline, if it was a spark line that went up and down from 0 (no change) to show the velocity of change (in bytes) over time, it could be very interested to show additions and subtractions to the article this way.
As far as where this control is located, toward the top of the screen feels more natural, perhaps it is tied to the "view history" tab that is currently at the top of pages. in the same way we have the wikitext editor and the visual editor, perhaps there is the current method of visualizing history and the "Visual history" viewer.
The other thing i would suggest you investigate is how additions, subtractions and changes are visualized on screen as the user is scrubbing the timeline.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Wed, Aug 28, 2013 at 12:50 PM, jeph jephpaul@gmail.com wrote:
Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas <p.selitskas@gmail.com
wrote:
Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote:
Hi, I'm building a tool to make it easier for an editor to go through
the
edits/revisions in an article. The tool shows the changes in html
rather
than in wikitext. The content that was removed/deleted in a revision disappears & the new content/ modifications is made to appear.
Please checkout the live demo. My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. Some mock ups. Mock 1,Mock 2
The demo is bare bones & I'm working on adding the following
features .
Pause/Forward/Rewind buttons Draggable timeline , to select the starting revision and the ending revision.
Hoping to hear some ideas or suggestions on the slider to select the
start
and end revision , especially when the article has thousands of
edits over
five or six years.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- З павагай, Павел Селіцкас/Pavel Selitskas Wizardist @ Wikimedia projects
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
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
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Hi,
Putting together a bunch of ideas inspired from various places I've come up with a mock Up of the sliderhttps://commons.wikimedia.org/wiki/File:Slider_Mock.jpg .
- The mock Up shows a two level edit selector bar. The primary bar will show all the edits, the edits will be of equal width with their length varying as a measure of the size of the edit Eg If there are three thousand edits all of them will be shown with a width of 1px or so. - There is a slider whose width is adjustable which serves to select a subset of the edits. - The selected edits will be shown in a zoomed in view above the primary bar, here the edits will be bigger in width and easier to view, If the user selects the entire primary bar then the zoomed in version will look like the primary bar. - A handle bar in the zoomed in view, it can be used to select the starting point of the visualisation or to manually go through the changes edit by edit.
Ideas about grouping the edits etc would be awesome :-) Should we have a sparkline in the primary bar ?
Thanks Jeph
On Mon, Sep 2, 2013 at 12:12 AM, jeph jephpaul@gmail.com wrote:
The highlighted text is part of a single edit and stays highlighted during its course , once it moves to the next edit it is no longer highlighted.
On Sat, Aug 31, 2013 at 2:16 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
J eph,
yes, a sparkline for the history of the article showing amount of change over the history of the article.
As far as color coding, yes i think it could be helpful, i think you'll need to work at making the colors useful but subtle.
what is determining how long the text remains highlighted in your demo, is it part of a single "edit" "session" "user" or something else?
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Fri, Aug 30, 2013 at 1:22 PM, jeph jephpaul@gmail.com wrote:
A spark line on top of the timeline to give users an idea of what happened ? Would color coding the timeline be a good idea to convey edit activity ?
I was thinking of showing the changes when the user scrubs the timeline by making the content appear / disappear to reflect the addition and deletion of content, the way the demo shows it currently.
On Fri, Aug 30, 2013 at 4:29 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Jeph,
I like the timeline scrubber idea, it would be great if we could add in another layer of glancable information, instead of a straight timeline, if it was a spark line that went up and down from 0 (no change) to show the velocity of change (in bytes) over time, it could be very interested to show additions and subtractions to the article this way.
As far as where this control is located, toward the top of the screen feels more natural, perhaps it is tied to the "view history" tab that is currently at the top of pages. in the same way we have the wikitext editor and the visual editor, perhaps there is the current method of visualizing history and the "Visual history" viewer.
The other thing i would suggest you investigate is how additions, subtractions and changes are visualized on screen as the user is scrubbing the timeline.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Wed, Aug 28, 2013 at 12:50 PM, jeph jephpaul@gmail.com wrote:
Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas < p.selitskas@gmail.com> wrote:
Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote: > Hi, > I'm building a tool to make it easier for an editor to go through the > edits/revisions in an article. The tool shows the changes in html rather > than in wikitext. The content that was removed/deleted in a revision > disappears & the new content/ modifications is made to appear. > > Please checkout the live demo. > My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits . > Some mock ups. Mock 1,Mock 2 > > The demo is bare bones & I'm working on adding the following features . > > Pause/Forward/Rewind buttons > Draggable timeline , to select the starting revision and the ending > revision. > > Hoping to hear some ideas or suggestions on the slider to select the start > and end revision , especially when the article has thousands of edits over > five or six years. > > Thanks > Jeph > > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design >
-- З павагай, Павел Селіцкас/Pavel Selitskas Wizardist @ Wikimedia projects
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
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
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Jeph,
Sounds good, a few things to think about…
How could you make it obvious what edits are made by the same user and which by different users?
I think either a spark line OR a bar chart not both.
Remember some edits are additive and some are subtractive, and some have both additive and subtractive parts, if your graph has zero as the baseline then how do you show subtractive changes? Consider a baseline that is in the middle or at least weighted a bit so subtractive edits can be visualized.
Take a look at the sliders used on finance.google.com if you haven't already.
The time between edits could be just as interesting as the edits themselves so I'd recommend not compressing or ignoring the time between edits on your graph.
As far as grouping or coding the edits you don't want to have information overload, some options could be, by user as I said before, you could average them over a month and ease the line a bit to smooth it out, you could colorize (think heatmap) the graph by number if distinct editors within a set time span to visualize periods where lots of collaborations occurred on the article.
One thing I would challenge you to do since you've begun thinking about controls and interacting with the graph is to think about what a "quiet" state would look like when a user is not interacting with it. Could it be something that is both minimal and beautiful? Could it exists on an article page for a reader to look at, appreciate and get some level of understanding without even interacting with it?
Think about traditional poster design, you have the 10ft view, the 5ft view, and the 1ft view.
What as a viewer do you see at a glance vs a studied view.
If you are new to design you might consider reading some books by Edward Tufte on information design as a primer or Robert Bringhurst's book on typography and layout.
Great work, I look forward to seeing how it evolves.
Jared
Sent while mobile
On Sep 4, 2013, at 8:58 PM, jeph jephpaul@gmail.com wrote:
Hi,
Putting together a bunch of ideas inspired from various places I've come up with a mock Up of the slider. The mock Up shows a two level edit selector bar. The primary bar will show all the edits, the edits will be of equal width with their length varying as a measure of the size of the edit Eg If there are three thousand edits all of them will be shown with a width of 1px or so. There is a slider whose width is adjustable which serves to select a subset of the edits. The selected edits will be shown in a zoomed in view above the primary bar, here the edits will be bigger in width and easier to view, If the user selects the entire primary bar then the zoomed in version will look like the primary bar. A handle bar in the zoomed in view, it can be used to select the starting point of the visualisation or to manually go through the changes edit by edit. Ideas about grouping the edits etc would be awesome :-) Should we have a sparkline in the primary bar ?
Thanks Jeph
On Mon, Sep 2, 2013 at 12:12 AM, jeph jephpaul@gmail.com wrote: The highlighted text is part of a single edit and stays highlighted during its course , once it moves to the next edit it is no longer highlighted.
On Sat, Aug 31, 2013 at 2:16 AM, Jared Zimmerman jared.zimmerman@wikimedia.org wrote: Jeph,
yes, a sparkline for the history of the article showing amount of change over the history of the article.
As far as color coding, yes i think it could be helpful, i think you'll need to work at making the colors useful but subtle.
what is determining how long the text remains highlighted in your demo, is it part of a single "edit" "session" "user" or something else?
Jared Zimmerman \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman
On Fri, Aug 30, 2013 at 1:22 PM, jeph jephpaul@gmail.com wrote: A spark line on top of the timeline to give users an idea of what happened ? Would color coding the timeline be a good idea to convey edit activity ?
I was thinking of showing the changes when the user scrubs the timeline by making the content appear / disappear to reflect the addition and deletion of content, the way the demo shows it currently.
On Fri, Aug 30, 2013 at 4:29 AM, Jared Zimmerman jared.zimmerman@wikimedia.org wrote: Jeph,
I like the timeline scrubber idea, it would be great if we could add in another layer of glancable information, instead of a straight timeline, if it was a spark line that went up and down from 0 (no change) to show the velocity of change (in bytes) over time, it could be very interested to show additions and subtractions to the article this way.
As far as where this control is located, toward the top of the screen feels more natural, perhaps it is tied to the "view history" tab that is currently at the top of pages. in the same way we have the wikitext editor and the visual editor, perhaps there is the current method of visualizing history and the "Visual history" viewer.
The other thing i would suggest you investigate is how additions, subtractions and changes are visualized on screen as the user is scrubbing the timeline.
Jared Zimmerman \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman
On Wed, Aug 28, 2013 at 12:50 PM, jeph jephpaul@gmail.com wrote: Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas p.selitskas@gmail.com wrote: Concerning design of the tool and its UX, there is more sense in allowing the user to select a piece of content in the page (like in wiki blame), and showing how it did evolve through revisions and time.
On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote: > Hi, > I'm building a tool to make it easier for an editor to go through the > edits/revisions in an article. The tool shows the changes in html rather > than in wikitext. The content that was removed/deleted in a revision > disappears & the new content/ modifications is made to appear. > > Please checkout the live demo. > My proposal https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. > Some mock ups. Mock 1,Mock 2 > > The demo is bare bones & I'm working on adding the following features . > > Pause/Forward/Rewind buttons > Draggable timeline , to select the starting revision and the ending > revision. > > Hoping to hear some ideas or suggestions on the slider to select the start > and end revision , especially when the article has thousands of edits over > five or six years. > > Thanks > Jeph > > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design >
-- З павагай, Павел Селіцкас/Pavel Selitskas Wizardist @ Wikimedia projects
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
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
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
Some updates on the tool.
- Added support for 18 other languages (no Indic languages yet), most of them seem to work. - Added a play/pause button, so that the user can go grab a coffee in between :-) - A slider to control the speed of the animation. - Changes to the layout , now it looks more like a player with controls. -
I'm working on the edit selection slider in the background and don't have any update on it as yet.
Thanks Jeph
On Thu, Sep 5, 2013 at 12:00 PM, Jared Zimmerman jzimmerman@wikimedia.orgwrote:
Jeph,
Sounds good, a few things to think about…
How could you make it obvious what edits are made by the same user and which by different users?
I think either a spark line OR a bar chart not both.
Remember some edits are additive and some are subtractive, and some have both additive and subtractive parts, if your graph has zero as the baseline then how do you show subtractive changes? Consider a baseline that is in the middle or at least weighted a bit so subtractive edits can be visualized.
Take a look at the sliders used on finance.google.com if you haven't already.
The time between edits could be just as interesting as the edits themselves so I'd recommend not compressing or ignoring the time between edits on your graph.
As far as grouping or coding the edits you don't want to have information overload, some options could be, by user as I said before, you could average them over a month and ease the line a bit to smooth it out, you could colorize (think heatmap) the graph by number if distinct editors within a set time span to visualize periods where lots of collaborations occurred on the article.
One thing I would challenge you to do since you've begun thinking about controls and interacting with the graph is to think about what a "quiet" state would look like when a user is not interacting with it. Could it be something that is both minimal and beautiful? Could it exists on an article page for a reader to look at, appreciate and get some level of understanding without even interacting with it?
Think about traditional poster design, you have the 10ft view, the 5ft view, and the 1ft view.
What as a viewer do you see at a glance vs a studied view.
If you are new to design you might consider reading some books by Edward Tufte on information design as a primer or Robert Bringhurst's book on typography and layout.
Great work, I look forward to seeing how it evolves.
Jared
Sent while mobile
On Sep 4, 2013, at 8:58 PM, jeph jephpaul@gmail.com wrote:
Hi,
Putting together a bunch of ideas inspired from various places I've come up with a mock Up of the sliderhttps://commons.wikimedia.org/wiki/File:Slider_Mock.jpg .
- The mock Up shows a two level edit selector bar. The primary bar
will show all the edits, the edits will be of equal width with their length varying as a measure of the size of the edit Eg If there are three thousand edits all of them will be shown with a width of 1px or so.
- There is a slider whose width is adjustable which serves to select a
subset of the edits.
- The selected edits will be shown in a zoomed in view above the
primary bar, here the edits will be bigger in width and easier to view, If the user selects the entire primary bar then the zoomed in version will look like the primary bar.
- A handle bar in the zoomed in view, it can be used to select the
starting point of the visualisation or to manually go through the changes edit by edit.
Ideas about grouping the edits etc would be awesome :-) Should we have a sparkline in the primary bar ?
Thanks Jeph
On Mon, Sep 2, 2013 at 12:12 AM, jeph jephpaul@gmail.com wrote:
The highlighted text is part of a single edit and stays highlighted during its course , once it moves to the next edit it is no longer highlighted.
On Sat, Aug 31, 2013 at 2:16 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
J eph,
yes, a sparkline for the history of the article showing amount of change over the history of the article.
As far as color coding, yes i think it could be helpful, i think you'll need to work at making the colors useful but subtle.
what is determining how long the text remains highlighted in your demo, is it part of a single "edit" "session" "user" or something else?
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Fri, Aug 30, 2013 at 1:22 PM, jeph jephpaul@gmail.com wrote:
A spark line on top of the timeline to give users an idea of what happened ? Would color coding the timeline be a good idea to convey edit activity ?
I was thinking of showing the changes when the user scrubs the timeline by making the content appear / disappear to reflect the addition and deletion of content, the way the demo shows it currently.
On Fri, Aug 30, 2013 at 4:29 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Jeph,
I like the timeline scrubber idea, it would be great if we could add in another layer of glancable information, instead of a straight timeline, if it was a spark line that went up and down from 0 (no change) to show the velocity of change (in bytes) over time, it could be very interested to show additions and subtractions to the article this way.
As far as where this control is located, toward the top of the screen feels more natural, perhaps it is tied to the "view history" tab that is currently at the top of pages. in the same way we have the wikitext editor and the visual editor, perhaps there is the current method of visualizing history and the "Visual history" viewer.
The other thing i would suggest you investigate is how additions, subtractions and changes are visualized on screen as the user is scrubbing the timeline.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Wed, Aug 28, 2013 at 12:50 PM, jeph jephpaul@gmail.com wrote:
Hi, Making it a mediawiki extension is part of my plan but I wont be doing it anytime soon. Would you have any suggestions on the slider bar to select the start and end revision to animate the edits ?
Thanks Jeph
On Wed, Aug 28, 2013 at 12:26 AM, Paul Selitskas < p.selitskas@gmail.com> wrote:
> Concerning design of the tool and its UX, there is more sense in > allowing the user to select a piece of content in the page (like in > wiki blame), and showing how it did evolve through revisions and > time. > > On Tue, Aug 27, 2013 at 9:11 PM, jeph jephpaul@gmail.com wrote: > > Hi, > > I'm building a tool to make it easier for an editor to go through > the > > edits/revisions in an article. The tool shows the changes in html > rather > > than in wikitext. The content that was removed/deleted in a > revision > > disappears & the new content/ modifications is made to appear. > > > > Please checkout the live demo. > > My proposal > https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits. > > Some mock ups. Mock 1,Mock 2 > > > > The demo is bare bones & I'm working on adding the following > features . > > > > Pause/Forward/Rewind buttons > > Draggable timeline , to select the starting revision and the ending > > revision. > > > > Hoping to hear some ideas or suggestions on the slider to select > the start > > and end revision , especially when the article has thousands of > edits over > > five or six years. > > > > Thanks > > Jeph > > > > > > _______________________________________________ > > Design mailing list > > Design@lists.wikimedia.org > > https://lists.wikimedia.org/mailman/listinfo/design > > > > > > -- > З павагай, > Павел Селіцкас/Pavel Selitskas > Wizardist @ Wikimedia projects > > _______________________________________________ > 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
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
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
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Hi Jeph,
Thanks a lot for your work!
Just a small feedback:
- A slider to control the speed of the animation.
I jumped to the demo before reading (carefully ;-) your email, and I
thought the slider was a "progress bar", indicating the moment of the current frame, just like in a media player.
Hope that helps,
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 playhttp://bl.ocks.org/cosmiclattes/6854429 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 scalehttp://rossshannon.com/publications/softcopies/Shannon2009Time-sequences.pdf .
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.
Thanks Jeph
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,
Jared
* * * * *Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/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 playhttp://bl.ocks.org/cosmiclattes/6854429 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 scalehttp://rossshannon.com/publications/softcopies/Shannon2009Time-sequences.pdf .
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.
Thanks Jeph
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
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 :-)
Thanks Jeph
On 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,
Jared
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/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 playhttp://bl.ocks.org/cosmiclattes/6854429 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 scalehttp://rossshannon.com/publications/softcopies/Shannon2009Time-sequences.pdf .
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.
Thanks Jeph
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
Hi, I've made some changes to the slider.
- 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'm thinking of adding a hover to better explain the gaps (time between edits) in the zoomed in graph. 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 :-)
Thanks Jeph
On 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
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 ?
- I agree on accurately showing the time between the edits but how
- Vertical Scaling
that a good idea ?) .Linear scales don't work as the difference between the edit size are too far apart.
- The vertical heights are being scaled using a power scale (Is
- Secondary Graph
is to be an enlarged version of the selection on the primary graph
- It is to follow the same color pattern as the primary graph, it
the edits manually, like in a video editing tool.
- A handle on the secondary graph should let the user go through
- Selecting
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.
- The primary Idea of selecting is to decide which edits should be
If you have any other Idea to represent the timeline with/without a bargraph I'd be more than happy to try it out :-)
Thanks Jeph
On 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,
Jared
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/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 playhttp://bl.ocks.org/cosmiclattes/6854429 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 scalehttp://rossshannon.com/publications/softcopies/Shannon2009Time-sequences.pdf .
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.
Thanks Jeph
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
The link to the tool with a new tool. http://cosmiclattes.github.io/wikireplay/player.html.
- The tool has a UI now. - Sliders to select edit/edits.
Like always feature requests ,bugs & feedback can be added at
- https://meta.wikimedia.org/wiki/Grants:IEG/Replay_Edits - https://github.com/cosmiclattes/wikireplay/issues
Known Issue
- Long articles take some time to load. I'm working on a user notification for that.
Thanks Jeph
On Mon, Oct 14, 2013 at 8:06 PM, jeph jephpaul@gmail.com wrote:
Hi, I've made some changes to the slider.
- 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'm thinking of adding a hover to better explain the gaps (time between edits) in the zoomed in graph. 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 :-)
Thanks Jeph
On 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
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 ?
- I agree on accurately showing the time between the edits but how
- Vertical Scaling
that a good idea ?) .Linear scales don't work as the difference between the edit size are too far apart.
- The vertical heights are being scaled using a power scale (Is
- Secondary Graph
is to be an enlarged version of the selection on the primary graph
- It is to follow the same color pattern as the primary graph, it
the edits manually, like in a video editing tool.
- A handle on the secondary graph should let the user go through
- Selecting
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.
- The primary Idea of selecting is to decide which edits should be
If you have any other Idea to represent the timeline with/without a bargraph I'd be more than happy to try it out :-)
Thanks Jeph
On 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,
Jared
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/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 playhttp://bl.ocks.org/cosmiclattes/6854429 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 scalehttp://rossshannon.com/publications/softcopies/Shannon2009Time-sequences.pdf .
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.
Thanks Jeph
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
2013/12/16 jeph jephpaul@gmail.com
The link to the tool with a new tool. http://cosmiclattes.github.io/wikireplay/player.html.
For people like me not following things too closely: This is a visual page history browser that can highlight and replay edits.
Q: Only on English Wikipedia?
-Niklas
Hi,
It has support for 10 other languages. It is currently hidden as I haven't yet done the UI (nice dropdown) for it.
Thanks Jeph
On Mon, Dec 16, 2013 at 8:13 PM, Niklas Laxström niklas.laxstrom@gmail.comwrote:
2013/12/16 jeph jephpaul@gmail.com
The link to the tool with a new tool. http://cosmiclattes.github.io/wikireplay/player.html.
For people like me not following things too closely: This is a visual page history browser that can highlight and replay edits.
Q: Only on English Wikipedia?
-Niklas
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
