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
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).
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.
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.
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!
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.
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
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)
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.
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.
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.
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.
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.
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!
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.
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 ?
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.
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
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.
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'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.
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?)
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.
72 comments
[ 4.8 ms ] story [ 154 ms ] threadI 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.
I'm on it! https://github.com/mcnuttandrew/forum-explorer/issues/67
> 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
I then wanted to see the context for a specific comment so I clicked on it. Great that worked!
Then I wanted to go back to where I was in the list of comments by the OP. I clicked the back button ... that didn't work.
Ideally either the back button would work (each state has an equivalent URL) or the UI provides a way to return to the last state.
Thanks for the interesting tool!
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.)
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).
Here's a basic explanation of the interface: https://www.einval.com/~steve/software/trn-faq.html
I've got to admit though, I'm a little jaded towards "Chrome only" extensions. Is there a reason you couldn't build this in Firefox?
As web developers, we've really got to stop this practice lest the web become further fragmented.
Anyways, I don't want to come down on you specifically - I realize this is probably just an MVP. You did a great job.
I totally agree, I was just trying to minimize the number of things I was designing for while I was building it.
That said, Firefox addon is in my todo! https://github.com/mcnuttandrew/forum-explorer/issues/45
How does "someone built a Chrome extension" justify you asking them to explain themselves for why they didn't build it the way you want?
OP seems to agree with the sentiment, so I'm not sure why you're bothered.
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.
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.
It's using System WebView. In my case Bromite
https://www.bromite.org/fdroid
http://arclanguage.org/
Hackernews is written in arc. I also think its interesting the the comment structure is a tree, just like an S-expression:
https://en.wikipedia.org/wiki/S-expression
I really wish my tooling for spell checking while writing jsx-y code was better, i feel like this happens a lot
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.
Dropping the root node is an interesting idea!
Unrelated, might be fun to surface some kind of iconography to indicate semantics of the content (e.g. flames/smilies/etc)
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.
JohnFen's may more accurately be this other issue:
https://github.com/mcnuttandrew/forum-explorer/issues/69
I also made an issue for how it looks on Chrome in Android:
https://github.com/mcnuttandrew/forum-explorer/issues/70
On checking Firefox on Android, I wonder if this is the platform JohnFen was trying:
https://github.com/mcnuttandrew/forum-explorer/issues/71
In general, the different layouts might be more to your liking.
https://docs.microsoft.com/en-us/visualstudio/modeling/map-d...
Some of the nodes in a vertical tree, for example here[1], are very close to each other while there is room for them to be a bit more separated.
Comment scrollbar goes beyond window edge.
Firefox 67.0b18 64bit Windows 10.
Overall looks neat and interesting, thanks for sharing.
[1]: https://www.mcnutt.in/forum-explorer/?id=19902965
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!
[0] https://mrandri19.github.io/comments-as-a-graph/?thread=hn3
[1] http://wikum.csail.mit.edu/
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.
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'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.
But I sure do like graphs.
* The circle should plot threads clockwise newest<->oldest (or reversible?)
* Node connection length should be the reply delay in the chain
* Node size should reflect comment size
* Node color/opacity should reflect comment score/vote amount (if present, which HN doesn't have.)