Hacker News Reader

Comment by ColinWright | Hacker News Reader

Yes, I know, some of you will hate the layout with a passion. But this kind of diagram is the only way I can make sense of the back'n'forth that sometimes happens.

If you prefer Twitter's rendering then just click on a node and that tweet will open for you.

Edited to fix a typo ... thank you Jonn. Oh how I hate auto-corrupt.

View on HN

It would greatly help if there were some text in the upper left saying that there is a large diagram on the page but you may have to zoom out or scroll to see it.

All that shows up on an iPad at normal zoom is a white page. I waited quite a while thinking maybe it was just generating something client side and that was taking a while before I noticed that there were scroll bars (both vertical and horizontal) on the page and their thumb size indicated I was only seeing a tiny fraction of the page.

On my desktop it depends on what I was doing previously. About half the time my browser window won't be big enough for anything to show up in the initial view.

I agree completely, but I've tried many times to figure out how to do that, and I've had no luck. I don't have any front-end skillz. If you can tell me how to do it, I'd be grateful.

Thanks.

I don't know how you would put some text in an SVG, but if you are OK with linking to an HTML page instead of directly to an SVG maybe just make an HTML page that has a line of text saying that one might need to zoom out or scroll to see the large image below, a line break or paragraph break, and then an image tag referring to the SVG?

Working on it ... I have a couple of options, neither perfect, both require some time, but I may be able to do something.

Thanks.

If you can run a post-processing step on the SVG file before putting it on the server, the following might work. I took a look at the SVG, and although I don't know anything about SVG other than it is an XML format it looks pretty easy to add some text at a given location.

The white background seems to come from this:

  <polygon fill="white" stroke="transparent" points="-4,4 -4,-11651.5 3898,-11651.5 3898,4 -4,4"/>

We just need to find that in the SVG, look at the points defining the rectangle, find the left side and the top side from that list of points, then add some text. The left side is the minimum first coordinate in the set of points and the top is the minimum second coordinate in the set of points. That's -4 and -11651.5 in this case.

Then we just need to add text there:

  <text text-anchor="left" x="-4" y="-11637.5" font-family="Times,serif" font-size="14.00">Hello, World!</text>

Using the left side for x seems fine. For y using the top results in clipped text because apparently the y for text is the baseline. I don't know how font sizes work in SVG, but it looks like moving the base line down by font-size works nicely.

Here's a little Perl script that can be used as a filter that takes your SVG and adds that text line, finding the top and left by looking at the points list in the first polygon line that has fill set to "white" and stroke set to "transparent".

    #!/usr/bin/env perl
    use strict;

    my $left = 0;
    my $top = 0;
    while (<>) {
        print;
        if (m{<polygon.*fill="white"} && m{stroke="transparent"} && m{points="(.*?)"}) {
            my @points = split /\s+/, $1;
            foreach (@points) {
                my($x, $y) = split /,/;
                $left = $x if $x < $left;
                $top = $y if $y < $top;
            }
            $top += 14;
            print qq{<text text-anchor="left" x="$left" y="$top" font-family="Times,serif" font-size="14.00">Hello, World!</text>\n};
            last;
        }
    }
    print while (<>);

Yeah, I've done the post-processing SVG version and it works fine, until the chart itself does have a node near the top left, and then things overlap.

So I need to test whether they will overlap, and suddenly it's a bag-o-nails. Or at the least, need to test if something is up there and not both including the extra, but that's ... inelegant.

The option of having an HTML template and including the SVG will work, and that's the one I'm probably going to go with. It needs tweaking.

Another way to save the post-processing approach that would probably be easier than testing for something already up there would be to lower the top coordinate of the polygon of the white background by subtracting font-size. That would give you some new space on top for the text that should be free of anything else.

(Probably need slightly more than font-size, in case parts of some characters descend below the baseline).

Something to experiment with ... I hope to have time in a few days.

Thanks.

I find the diagram very easy to quickly understand everything. Well done! Haters gonna hate no matter what you do.

I enjoy this layout and I only wish it had some sort of check for background color contrast accessibility.

Yeah, the colours are a complete hack. There are so many things this needs to make it more usable, but I have neither the time nor the skillz.

Actually prefer this to Twitter. Easier to read.

It is until the discussion gets really big. When there are several hundred tweets there's no good way to layout the graph. Then you need folding, but even then, folding in the 2D environment gives you a much better sense of the discussion.

To be fair, when there are several hundred tweets involved it's even more difficult to to follow on Twitter. Your format is better.

I don't suppose the source that generated it is available? :)

Not yet ... working on a few issues.

I like it. The spatial element gives some pointers towards order in time too. I think ordering by importance (most quoted, replied) takes precedence.

This old dog is reminded of trn(1), "threaded read news".

See top right: https://upload.wikimedia.org/wikipedia/commons/d/d8/Trn_cons...

That does bring back memories... and would be a nice way to visualize Twitter.

What do you think trn/slashdot/HN-style threading is lacking?

Any kind of sense of where I am in a discussion.

If you find the trn/slashdot/HN-style threading better than the 2D graphical layout then I doubt I can explain to you why I find it (the threading) lacking.

Your algorithm to embed a graph in 2D is intriguing: https://i.imgur.com/7xhl7VY.png

What kind of curve is this?

It's just using GraphViz.

I love this visualisation. Is the script to generate it publicly available?

Currently not, there are significant problems that I'm trying to solve before making it available. No, I'm not trying to make it perfect, but I'd like it to be actually usable before opening the code.

Reply on news.ycombinator.com