8 ms·
Show HN: Using flamegraphs to read big HN threads
- trungdq88 6y agoNot sure how everybody does it but I usually feel lost navigating in big threads like this one with ~3000 comments https://news.ycombinator.com/item?id=25706993 https://news.ycombinator.com/item?id=25706993 So here is my attempt to solve it with flamegraph. What do you think? You can load another thread by appending #thread_id to the end. For example, here is the graph for this very thread: https://trungdq88.github.io/hn-big-threads/index.html#25713858 https://trungdq88.github.io/hn-big-threads/index.html#257138... I'm not sure why GitHub doesn't load the page when the "index.html" part is missing, but I have to go now so I don't have time to check it, maybe later.
- boulos 6y agoCool idea! I also enjoy the double entendre of “flame graph” here for the flame war that you chose :). It’s not clear to me that I’d label the “functions” with the username. I’m not sure what other very short summary you might use, but I’d prefer something content related rather than poster.
- trungdq88 6y agoThanks :) I choose to use the username because in big threads, most of the bars are very thin. There isn't much room to show anything anyway...
- dave_sullivan 6y agoThis is pretty cool, it is easier to scan around comments and threads more quickly. Reddit could use this.
- bryanrasmussen 6y agoI do not think visually, I tend to think in very structured complex sentences, as such being able to interpret what this image means is extremely difficult for someone who thinks in the way I do.
- dilap 6y agoI almost love it; clicking on a comment zooms in the graph, which loses context and is not what I usually want. But I think if you just made it so that hover loaded the complete comment either as a popup or actually down below, and click zoomed the context, this would be perfect, and by far my favorite way to browse large comment threads (on any website).
- sjg007 6y agoNice feature.
- 5986043handy 6y agoI personally find the Hacker News Extension Suite [1] to be incredibly useful. https://chrome.google.com/webstore/detail/hacker-news-enhancement-s/bappiabcodbpphnojdiaddhnilfnjmpm?hl=en https://chrome.google.com/webstore/detail/hacker-news-enhanc...
- 5986043handy 6y agoFirefox: https://addons.mozilla.org/en-US/firefox/addon/hnes/ https://addons.mozilla.org/en-US/firefox/addon/hnes/
- Axsuul 6y agoAny similar solutions like this for Safari?
- colordrops 6y agoLooks great except that it needs access to your browsing history.
- colejohnson66 6y agoDoes it? I can’t find anything in the code[0] (after 2 minutes) to suggest that. Not saying you’re wrong (I haven’t checked), but it doesn’t appear to access your history at all.[1] [0]: https://github.com/etcet/HNES https://github.com/etcet/HNES [1]: https://github.com/etcet/HNES/search?q=history&type= https://github.com/etcet/HNES/search?q=history&type=
- colordrops 6y agoThey should remove the permission request then, because it asks for it when you install from the chrome extension store. If the code is the same as the one in the repo, it shouldn't matter.
- keanebean86 6y agoThis brings me back to olden days of reddit! RES + Imagus was perfect for killing an afternoon. Looking back it was super unhealthy. Just a constant stream of content messed up my patience something fierce. But it was fun while it lasted.
- alanbernstein 6y agoReally neat idea, a little awkward to navigate in this v1 prototype. I'm imagining replacing the vertical scrollbar with a 90 degree rotation of the flamegraph. Call it a flamescroll widget, it combines scrolling/zooming/folding into a single interface action. "Zoom" here refers to changing what depth of the comment tree is displayed, not the font size. Kind of a next generation of the minimap in Sublime.
- trungdq88 6y agoThanks! I have some ideas on how improve this for later (maybe). The main purpose is still to be able to scan major discussions on a big thread. A big vertical minimap like your suggestion is also great! :).
- NamTaf 6y agoNifty, but I found the navigation to be a little odd at first. I didn't immediately realise the bottom row is always the OP, and so tried to hit my back button to travel back 'up' from a thread but because it does not load a new page I couldn't. It makes sense now that I figured it out (the bottom n rows keep expanding to be the full width, meaning you can always breadcrumb back) but that wasn't immediately obvious to me. This is a cool idea though and definitely allows me to see the 'controversial' threads because they're usually the biggest flames :) Does this order left-to-right based on the upvotes that HN itself uses for ordering?
- trungdq88 6y agoYeah, this is a very bare bone prototype so a few things are pretty crappy, sorry about that. If there is enough interest, I'll consider putting some more time and make it actually usable :) Oh, and I'm not sure about the left-to-right order really. Maybe it's ordered as what HN API return (I did it in a hurry so didn't check)
- trungdq88 6y agoUpdate: it is now ordered by votes (left to right)
- snow_mac 6y agoLOVE THIS. So cool. How'd you build it?
- trungdq88 6y agoYou can just Right click -> View source to read my crappy code. I just plug the HN API together with a graph library called d3-flame-graph [1]. [1] https://github.com/spiermar/d3-flame-graph https://github.com/spiermar/d3-flame-graph
- jarboot 6y agoThis could be a good way to navigate comments, but I'd recommend turning the graph upside down since that is how comments are ordered on the page.
- krick 6y agoI'm not sure if it helps much. It emphasizes deep threads. Do we care for deep threads? Well, not really. Usually we want to see threads with a lot of votes and a lot of replies (breadth-wise), and when navigating we want to be able to follow the thread of replies to an individual comment. You can comfortably list all parents of a comment on this flamegraph, but basically you'll end up reading a random thread w/o knowing first if it will be interesting. And the problem of big flame-tongues is more of a HN/reddit reply format, i.e. I don't know if it can be solved by another UI. People using the default UI in such threads reply only to the first comment, because it's the only way to be seen. Nobody reads past few first top-comments. I guess it's very much opinionated, because people first time on 4chan tend to get lost, but I've long came to conclusion that the imageboard reply format is the best there can be, especially with some simple UI tweaks. You can follow threads easily, you can reply to any number of comments, you can link several discussions into one. It's easy to spot a post with lots of replies. It's easy to scroll, unlike HN comments. The downside is that 3000-comment thread would terribly slow down your browser, about the 1000 is the upper-limit I guess, and usually threads are just split into series of multiple threads on the 500-post mark. But that obviously wouldn't work anyway if the main feature is to order posts based on the number of votes. So, alternative UI like that for HN wouldn't help very much either. What would really help on HN is the ability to collapse all of the children w/o collapsing the parent-post itself, and showing multiple top-level posts on a single page when children are collapsed. This way you could browse for the discussions you are interested in and expand them further.
- mssundaram 6y agoYou're speaking as we - I'm just gently curious who you mean? Have you surveyed (even informally) HN users? But anyways, I like your point about the usability of the imageboard format. I really don't like the Reddit/HN style
- deleted 6y ago[deleted]
- dlkf 6y ago> What would really help on HN is the ability to collapse all of the children w/o collapsing the parent-post itself Is dang reading this thread?
- rablackburn 6y agoThis is fantastic. You know you’ve come up with a good visualisation when it feels so instantly familiar. I’m trying to think of how you can convert some ancillary information with color (with accessible fallbacks of course). Maybe color coded users? So you could see the same colors gravitating around threads. I’m not sure how many unique users comment on an average thread though and how useful that would be. Maybe only showing unique colors for users with more than 2 posts in a thread? I love it though. Great job
- trungdq88 6y agoThe color is already color coded by username if I'm not wrong. But yeah, there are many improvements can be done here :)
- timonoko 6y agoThese recent Capitol Hill Autonomous Zone - wars are not flamewars perse. They are just endless anonymous pingpong with same wornout pieces of dried shit. In Usenet flamewars were more personal and ended up in death threats often. Actual deaths occurred too, I remember one mass murder resulted from discussion in misc.invest. In Helsinki a women got facial lacerations from puukko-knife after a flamewar in Sfnet.
- abinaya_rl 6y agoOMG, This is all I wanted. Thank you so much for building this. I think it will make easy to read long HN threads. I'm interested to learn more on the tech stack behind this project.
- philshem 6y agohere's the source code: https://github.com/trungdq88/hn-big-threads https://github.com/trungdq88/hn-big-threads the data comes from the firebase API: https://github.com/trungdq88/hn-big-threads/blob/master/code.js#L3 https://github.com/trungdq88/hn-big-threads/blob/master/code... the dataviz: https://github.com/trungdq88/hn-big-threads/blob/master/index.html#L47 https://github.com/trungdq88/hn-big-threads/blob/master/inde... is using the d3.js plugin "flamegraph": https://github.com/spiermar/d3-flame-graph https://github.com/spiermar/d3-flame-graph
- MarxOk 6y agoThis is epic, maybe it can help fix @dang's pagination problems :-)
- trungdq88 6y agoHaha, yeah, I hope HN will have a solution for big threads soon.
- contravariant 6y agoThis gives an interesting new meaning to the word 'flamewar'.
- jamessb 6y agoAndrew McNutt's Forum Explorer also visualizes forum discussions and supports HN [1] (it was discussed on HN last year [2]). [1]: https://www.mcnutt.in/forum-explorer/ https://www.mcnutt.in/forum-explorer/ [2]: https://news.ycombinator.com/item?id=19912550 https://news.ycombinator.com/item?id=19912550
- trungdq88 6y agoSo this blew up, I decided to give the page some small improvements. Changes: - The bars are now ordered correctly based on votes - Tooltip now shows comment.substring(0, 100) - Show direct childs of the selected comment - Added paddings and some small info notations - New cached data for the default link (> 3500 comments now, it would take a good 15 mins if loaded manually from your browser) It is still a crappy code, and there are many improvements can be made. Most importantly a proper navigation behavior with back button. I'll get back to this if I have more time! The code is on my GitHub [1], feel free to send PR or just create your own page. The old page is still available in [2] just in case someone don't want/agree with my improvements :) [1] https://github.com/trungdq88/hn-big-threads https://github.com/trungdq88/hn-big-threads [2] https://trungdq88.github.io/hn-big-threads/old.html https://trungdq88.github.io/hn-big-threads/old.html Thanks!
- dandare 6y agoGreat idea. Bug report: Some of the tooltips - on the left side of the screen - are outside of the screen idea.
- trungdq88 6y agoThanks, "fixed".
- bohrious 6y agoBeautiful work!! I would use this every day as a browser extension for HN/reddit. the vertical minimap would probably be the ideal implementation. Fly-to navigation for narrowing scope makes sense. IMO, a complete feature-set would still include something like ctrl-scroll for vertical expand and shift-scroll for horizontal expand. Realistically, maybe, for minimap-on-focus: "a"+"scroll": zoom "s"+"scroll": expand-vertical "d"+"scroll": expand-horizontal
- trungdq88 6y agoFor now, here is a bookmark that you can click when in a HN post. It will show the flame graph of the post. javascript:location.href="https://trungdq88.github.io/hn-big-threads/# https://trungdq88.github.io/hn-big-threads/#" + location.href.split('item?id=')[1]
- injidup 6y agoA tree view with terrible UX.
- m4tthumphrey 6y agoOff topic: Thanks to your link at the bottom of the page I discovered your DevUtils project and bought it right away! I've been looking for something like this for years without realising it! Many thanks! I feel $15 is very cheap though.
- jgtrosh 6y agoChildren*
- trungdq88 6y agoWhoops, thank you! Fixed.
- chr1 6y agoThis is really great, can be a first step towards making a site for more structured way to debate. Kind of similar to kialo (https://www.kialo.com/the-benefits-of-absolute-free-speech-outweigh-the-costs-42365 https://www.kialo.com/the-benefits-of-absolute-free-speech-o...)
- devinrhode2 6y agoLoaded for first time on my pixel 3. Loaded fine I guess, but too small to glean anything :( I then zoomed in and nothing happened, then I was zoomed way too far in, and the page twitched again to be zoomed in on a different section, and I bounced. But it seems really cool. I'm curious what it would be like with dart and or solidJS