Funny story, I had almost exactly the same idea in 2013 and prototyped it in Mathematica (probably a lot of people have had this idea). Here's a screenshot of some random thread that I happened to visualize (comments were visible as tooltips in my rough and ready implementation): https://imgur.com/a/9xfw6cA (color represents common authorship, size is comment length). I didn't have the Javascript chops to do anything usable, let alone as polished as the linked Chrome plugin; kudos to the author!
Another thing I was doing at the time was visualizing Twitter and Facebook friend graphs, and the first insight there was to deliberately drop the 'ego' node, as it destroys any hope of effectively showing community structure of the friends themselves (it also carries no extra information as everyone is necessarily connected to the ego).
So perhaps a similar thing would be effective for threaded conversations: if you drop the root node, disconnected discussions will become separate trees in the visualization, which will help with efficient use of space, and the tail of singleton comments that no one replied to will become isolated disks that can space-fill the background. Switching to an actual rectangular tree layout as I used in my prototype will also help in that one consistent direction (down) represents nested depth.
I've talked to a few people who've had similar ideas! In fact there is a pretty long history of people in visualization/hci communities creating applications like this. There's an extended abstract that goes along with this work that details this history.
Have you thought about extending the graph to include links found in the individual comments? Internal links to HN could surface those threads and external link nodes could show all stories with said link to find related content.
Unrelated, might be fun to surface some kind of iconography to indicate semantics of the content (e.g. flames/smilies/etc)
I'm trying to figure out if i'm allowed to post it publicly yet, in the mean time shoot me a message (on say twitter @_mcnutt_) and I'll send it to you
You could look up Prof Simon Kaplan's Conversation Builder effort at UIUC in 1989 and thereafter, for the earliest variant i know of. Mark Allender worked on it there, for instance.
I'm sorry to be a cynic. I love graphs. The web is a graph, web pages are graphs, linked data, machine learning all use graphs. And they can look really cool. I especially loved the hyperbolic graphs that were the rage a decade or two ago. I don't know how many projects I've dropped this type of viz in. Then removed it, because there are three different reactions from end users: It's scary and confusing, it looks neat but it's never used, or it looks neat and it's clicked on a few times. I hope as we move into massive data they become digestable for ordinary UI, but until then they're mostly actually useful for specific edge cases.
I like the idea although I can't help but think the visualization sort of draws me to comments with lots of responses....and on HN that is ok.
On sites that heavily rely / encourage getting responses such as Twitter I worry it just encourages posts that are trite, obnoxious and such as those get the most responses.
Granted this is a visualization tool so it's not "responsible" for issues that are largely human / platform issues.
I like that mini-summaries on the left-hand side ("subconversations about XX"), but the graph view seems to prioritise responses with the maximum amount of comments.
E.g. if there is a flame-war going on in one of the subthreads, it will be more visible than a highly rated comment with a few interesting subcomments.
I know what y'all mean. As i've used the extension myself I find myself reading a really different type of comments then when i read linearly. It makes it easier to find people have discussions (which are, admittedly, often arguments), and it makes it easier to see when a couple people are just all over the conversation.
It's not particularly easy to use for people without screen readers either. A pane on the left shows a DAG, with nodes representing Hacker News comments extending from a central node. Mousing over a node shows the comment in a pane on the right. It's impossible to move the mouse pointer from the left pane to the right without changing the visible comment.
>It's not particularly easy to use for people without screen readers either.
That's very true. This hasn't really been designed around screen readers, making this type of graph + comment tree interface work accessibly well is a really interesting challenge!
>It's impossible to move the mouse pointer from the left pane to the right without changing the visible comment.
If you click anywhere on the graph then it locks the current comment selection. You can then click to unlock!
Asking about the choice of browser platform out of curiosity, might be a perfectly valid question.
Questioning the choice (that is, implying it's wrong), asking for whether the reason is "good" as a value judgement, stating outright that "we have to do better", is not perfectly valid. It's rude.
Fair point(s) when taken out of context. But considering (a) I tempered that implied criticism with glowing praise for their work and (b) clarified that I wasn't targeted the criticism at them personally, it seems to me you're looking a little too hard for something to be offended about.
I'm passionate about protecting the open web because I believe a modern and free democratic society literally depends on it. And yes, I know that sounds quite dramatic, but I believe it wholeheartedly.
People are going to build their apps where there are users, whether it's Chrome apps or iOS apps or Windows games. Asking people not to is the wrong move. It will lose almost every time.
When I started reading Usenet in the 90s, trn (threaded read news) was the state of the art in news readers.
It might be worth mining the trn user interface for ideas.
The author tried to write a major new version (4) in the late 90s, but from what I could see of the development process (being on a mailing list), the codebase became unmanageable and there were lots of bugs that proved impossible to catch. Usenet was on its last legs by that stage anyway. So that's a cautionary tale: make sure the specification and basic architecture remains clear and clean. (I'm not sure how many of the bugs back then were related to managing ncurses and other fiddly issues that won't arise in the architecture of a web app.)
It had a mode for selecting threads to read (based on seeing the subject line). Having selected which threads in a particular newsgroup to read, the user would then switch into reading mode.
Threads that the user didn't want to read could be "junked". This could work in the context of HN as a way of sorting posts into interesting and not interesting on a per-user basis.
Rather than just navigating a set of threads, trn gave the user tools to productively keep up with discussions they were interested in, and not have to worry about other discussions at all (after dismissing those discussions once).
I'm definitely going to give this a try over the next few weeks. I like that its live. I like that I can mouse over an end point and pull up and entire thread (an interesting use case). I reckon this could become my 'go to' HN comment reader. I've been a long time lurker but created an account simply because of this. Great work!
Thanks for sharing.
I'd suggest adding a bit of descriptive prose / "about" / readme / FAQ on the linked page. Also, its layout is suboptimal on mobile safari.
> I'd suggest adding a bit of descriptive prose / "about" / readme / FAQ on the linked page.
I think this would be essential. I've been clicking around on it, and it's not entirely clear to me how to work it. I may be an idiot, but I'd really love some instructions.
EDIT: I just now managed to see the "wait I'm lost" link toward the bottom. It took some doing (that's part of the page that gets clipped). I'm now following the walkthrough -- perhaps that will clarify things for me.
Edit edit: OK, I think I have a basic understanding of what's up. It's overly complex for my needs, though -- I think I prefer the normal comment threads.
> Edit edit: OK, I think I have a basic understanding of what's up. It's overly complex for my needs, though -- I think I prefer the normal comment threads.
that's super reasonable! this is an experimental interface, some things are bound to work for some people and not for others
Unfortunately this work isn't really targeted at mobile devices. It seems to work reasonably well on tablet size device (IMO), but I wasn't really sure how to address phones. I think there was some work in the earlier 00's that tried to use treemaps as a way to explore social graphs on phones that had styluses but I haven't really heard of stuff since then
Viewing site on iPad, it just shows a stack of "LOADING" messages on the left, "Some interesting examples" on the right and that's it. Nothing happens.
That page has a major layout issue for me: it appears to have a fixed height with no vertical scrollbar, so the bottom portion of the page is completely inaccessible to me even if I maximize the window.
Is that part of what you're trying to test, or is it just an unimportant artifact of the test page?
Also, I'm not actually on board with the visualization -- it just makes everything more confusing and harder to follow. But that might be my personal idiocy.
The bottom cutoff happens intermittently for me, too (e.g. when viewing the graph for these comments). When it does, changing the layout to TreeX under settings seems to help.
In general, the different layouts might be more to your liking.
It also happens to me. The graph resizes and reorganizes as the window size is adjusted, but it always shrinks less than it should. There's always a part of the graph that goes beyond the bottom of the window.
Ooh, this is neat, thanks for sharing! I made something similar for Twitter conversations (shameless plug: https://treeverse.app) so it's neat to see the UI decisions you made, especially the timeline interaction.
Although I believe it was a good idea to remove them, I miss the vote score shown on comments. I had a script that would highlight the top comments. This would frequently reveal insightful comments 2 or 3 levels deep in a random thread I would have otherwise missed.
I really hate these, although of course I like the way they look. But the normal way is I come in I start reading there - I need to click on stuff to read things, I loose the context of where I was, if I am hovering nodes I see that node - oh there's a link in the content I want to click on oops I hovered another node I need to go back and hover the node I was on before, click it to lock it in place and then go over to other side of the page to click on the link I wanted to look at.
The circular tree your code generates is very cool. That presentation makes it a lot easier to see how the different threads relate than a flat tree structure.
It's especially fun to see how the topics weave through the conversations. Though commenters mostly stick to one topic on a particular tree, some of the same topics appear on siblings of adjacent trees.
Looks like something I did some time ago[0], nice to see that this space is being explored.
Wikum[1] from MIT's CSAIL is also an interesting alternative.
This is freak'n awesome. Please, we need to do more experiments like this. There are small usability nits about things going out of focus and changing when you move the mouse but for the most part, it is pretty good.
I'd like to see sentiment analysis color code the nodes and maybe node to node distance represent response time. And link width represent number of characters in post.
I feel the main issue with forum UI is the limitation of 2 dimensions. Once AR and VR become more mainstream with higher resolution, I predict we'll have more interesting conversation UI
Nice! The Chrome extension description sounds like it works on more than just Hacker News. What kinds of threaded discussions does this work on? (e.g. Disqus? Reddit? Facebook?)
Might be very nice, but unfortunately all I see are many lines that say "loading". Is this intended for people with "web browsers" or is it only for those who installed the "Google Chrome" software?
The demo page (which is linked above) should transform those loading message into a list of threads you can click into. Would you mind filing a bug over on https://github.com/mcnuttandrew/forum-explorer ?
Another thing I was doing at the time was visualizing Twitter and Facebook friend graphs, and the first insight there was to deliberately drop the 'ego' node, as it destroys any hope of effectively showing community structure of the friends themselves (it also carries no extra information as everyone is necessarily connected to the ego).
So perhaps a similar thing would be effective for threaded conversations: if you drop the root node, disconnected discussions will become separate trees in the visualization, which will help with efficient use of space, and the tail of singleton comments that no one replied to will become isolated disks that can space-fill the background. Switching to an actual rectangular tree layout as I used in my prototype will also help in that one consistent direction (down) represents nested depth.