Logo Background RSS

Graphing Blog Comments Over Time

  • One of my other blocks, CSS-Tricks, has been around a number of years now. There are nearly 1,400 unique pages of content almost all of which have a comment thread. I had a feeling that in the last four years, despite fairly steady growth in traffic and subscribers, that the number of comments per post has dropped. But how to prove it? I don’t know of a way to easily see that data.
    So I built a way to visualize the number of comments per post! I’m sure all you WordPress smarties have some better fancier way to do this, but this is how I did it.
    In a nutshell: write a custom query to loop through all your posts and get the number of comments. So combining those two things, I thought I’d just make a 1px wide element with a height relative to how many comments that post has.

    Step 1: Figure out the maximum number of comments

    This will help us set the scale. The post with the maximum number of with have a line with 100% height, and it scales down from there. It’s easy to figure out the maximum number of comments after you looped through all the posts, but we actually need that information before we even start the loop so we can set the height during the loop.
    Fortunately WordPress keeps the “comment_count” for each post in the the database. So we can write a query that will return the post with the most comments and then extract that number into a variable.
    $query = "SELECT comment_count FROM " . $wpdb->posts . " WHERE post_type = 'post' && post_status = 'publish' ORDER BY comment_count DESC LIMIT 1";
    $results = $wpdb->get_results($query);
    $maxComments = $results[0]->comment_count;

    Step 2: Loop through every single post

    All posts, from the first published to the latest published.
    query_posts('posts_per_page=-1&order=ASC');
    
    while (have_posts() ) : the_post();
      // output one line of graph
    endwhile;

    Step 3: Output a line for the graph

    Each line of the graph is going to be an anchor link, just so you can click it to go to that post should you wish. We’ll make those links inline-block, so we can set a height and width. This is the basics of the CSS:
    #chart { 
      padding: 100px 0; 
      height: 400px; 
      text-align: center; 
    }
    #chart > a { 
      width: 1px;
      background: red;  
      vertical-align: bottom; 
      text-decoration: none;
    }
    #chart > a:hover {
      background: black;
    }
    Now within the loop, we’ll output those links (lines of the graph):
    $numComments = get_comments_number();
    $heightPercentage = (($numComments / $maxComments) * 100);
    
    echo "";
    echo "$numComments";
    echo "";

    Step 4: A little more…

    There are a couple more parts to this, like listing out the first and last year at the start and end of the chart (for context) and positioning the span with the number of comments at the top of the graph so you can view numbers on rollover.
    I’m going to embed the code as a GitHub Gist here, so it’s easy to keep updated once all you smarties tell me all the stuff I’m doing wrong. This is built as a page template:

    The Graphs!

    Here’s the Google Analytics chart of CSS-Tricks since launch:

    And here’s the comment graph we just built:

    Kinda interesting. The charts definitely don’t follow each other like I would think they might. This isn’t enough data to infer why that is. You could say social media sites like Twitter have swallowed up some of comment activity. You could also say maybe the quality of the posts have gone down and inspire less comments. Who knows.
    Here is Digging Into WordPress’s graph:

    Share! Share!

    I’d love it, especially if you have a blog that’s been around a year or more, if you snagged this page template and linked up your own graph (or screenshot it) and posted it in the comments.
    Maybe with a bunch of blogs graphs we could identify some trends.