Semiology of Graphics

A couple of weeks ago I was researching some Vega stuff (remember, Vega is the charting package I use for the site) and I found a reference to some software called D3. D3 is software that’s used to transform raw data to data for visualisation, and Vega is heavily based upon it. I don’t know the exact boundaries between the two. So I was reading about D3, and I found mention of a book called “Semiology of Graphics”, which is apparently a seminal work in the area. So I went to Amazon and bought a copy.

It arrived on Thursday. It’s a massive heavy book, like the Edward Tufte books, and it’s rather more academic than I anticipated. Because y’know, a book about semiology was always gonna be light reading, wasn’t it? Even before I sat down to read it I got an idea for a graphic for the site, so I grabbed a blank note book and a pen and started reading Semiology of Graphics.

So far I have got past the bit where he defines the terms he’s going to be using. Oh goodness I hope I am past that bit. However I have about 7 pages of ideas so far. I hope I am getting to the good bits soon.

Certainly I’m thinking about the data that the site displays in a different way. Geeks and games are qualitative data – they are incomparable and unordered. However they can be classified – geeks from Australia vs those from Germany, games which won the SdJ vs those which use Dice Rolling.

On the other hand, ratings and numbers of plays are quantitative data – they can be sorted. The quantitative data are used to describe the relationships between the geeks and the games. There are also a few dates involved, which are quantitative data as well.

I guess the site is about illustrating the interplay between the quantitative and qualitative data, particularly with the qualitative data being used to place the games in 2D space. Or, as the book points out, in 2D space with a variety of techniques being used to illustrate further dimensions of the data.

The image is the new version of the Rating vs Months played graph. The shapes and colours mean the same thing, because of colour-blindness. The chart illustrates that the games I keep coming back to are family games and strategy games. The family games are sort of a light strategy genre, so it seems that’s what I’m like. The same graph for cyberkev63 (shown below) has much more prominent red triangles for party games, which he is well-known for.

So that’s where the Semiology of Graphics has got me so far.

This weekend I’m off on a trip to Europe (not for Essen, as far as I know), so I will be distracted for a couple of weeks. I wish life would not get in the way of the development of the site! I guess the original site evolved over a few years, I should not be so impatient that the all-new even-better site is taking some time.

The Geek Page

One of the things that people liked about an older version of the site, from about 2009 or so, was that all of their stats were on one page. There were a few peripheral pages, but mostly it was just one. I had problems with that, because with most of the stuff on that page being generated on the server before sending it back, people who owned and played a lot of games had pages that took minutes to load. I figured that people didn’t want to wait for that long, and probably just scrolled through pretty quickly anyway, so I split the page into 6 tabs, and put less stuff on each. That’s the way the old site is today.

For the new site, I want a different feel – less like statistics and more like a game. In particular, it seems to be sort of a Stefan Feld game, with lots of complicated bits that (hopefully one day) work well together. So I will be encouraging people to explore a lot, and of course I need to build the site so that there is some exploring to be done (instead of lots of dead-ends like there are at the moment).

Nevertheless, people need a place to bookmark, and that is what the geek page is. Now I know it looks kinda gaudy, but Gaudi was a really famous guy and Hundertwasser is not so bad either, so maybe there is hope for me. But seriously, once I define the basic style of the site I will take some advice on the colours.

The Geek Page

At the top there, we have the navigation bar. That’s so that a few singleton links are always available. I just had a thought that the Privacy button and maybe the Github button would be better in a footer. Then I could put other stuff in the navbar, and the navbar and the footer bar together could look a bit like a score track around the edge of the board.

Then there’s the page title and the Log In button. The Log In button stands out like a sort thumb there, and I don’t like it very much. I want it to expand into some sort of user identity. At the moment, if you’re logged in it turns into a Log Out button and has your user name underneath, and your user name is a  link to your user page. Your user page is to a user what the geek page is to a geek, except that users aren’t very much yet so that page is really dull.

Then we get to the large coloured panels, each of which is a hyperlink to another page. Well, some of them are dead links which go through to the home page, but I’m working on that. So when I code up new features, they go behind one of those panels. The panels themselves contain a few statistics, some of which are not available elsewhere on the site. That’s your reward for having to put up with my colour scheme.

Below the panels is the News section. This is black and white as all good news is. I figured that this was a good way to tell users about new things, but also to give the impression that the site is continually improving. With luck, people will see the news and go find the new things I mention.

Finally there’s the Table of Contents. It’s a little out of date and it’s also a little bit rubbish. I intended that the hyperlinks take you to features on other pages, but as the other pages depend heavily on JavaScript, they take you to the other page and then the thing you’re going to hasn’t loaded yet because the JavaScript hasn’t run. I’m not sure how to get around that yet, hence the disrepair.

Finally, eagle-eyed users will eventually notice that some pages take URL parameters, e.g. “?geek=Friendless”, and some don’t. I’m not sure whether I’m being cunning with that or not. What happens is, if you put that parameter on the URL, it sets the geek for the page to whomever you said. And then if you go to another page without a geek parameter on the URL, it remembers who it was set to previously. This is somewhere between convenient and confusing, especially as if there’s no parameter in the URL it’s impossible to know what geek the page is for. That’s on my very long list of things I need to sort out at some point.

Why Yes, There Is Method to My Madness

Just this evening I released an update to the site. I added a new panel to the geek page. In case you don’t know the geek page, it’s something like:

https://extstats.drfriendless.com/geek.html?geek=Ozjesting

It’s the central page related to a particular geek. At the moment there are 6 panels, of which you can click on 3 to get through to other pages. On those 3 pages there are various tables and graphs and so on.

The question you are no doubt asking is “how do tables and graphs get allocated to those pages? Does DrFriendless just pick up the nearest page and jam some more stuff on it?”

That’s how I used to do it on the old site, pretty much, but I’m a grown-up now. These days I’m thinking about performance, so I group features (that’s what the old site calls tables and graphs) by the data that they use. For example, the Owned Games page uses games data (name, BGG average, etc) and geek game data (your rating for the game, whether you own it), for only the games that you own. When the page loads, it goes and retrieves exactly that data once and gives it to all of the features, which then display using the same data set.

If you understand selectors, then you’ll understand that a selector can be used to choose which games to return, so of course I do. The ultimate goal is to be able to change the selector on the page, so that if you want to display games you own but not books or expansions, you’ll be able to do so. I’ve made some progress on that plan (on the favourites page) but it is not widespread yet.

The other factor in the data query is what data to return for each game, and that is fixed for the page. The pie chart for your ratings of games you own will never display plays – there’s just nowhere for them to go – so that data is unnecessary and should not be retrieved. So you don’t get to mess with what data is available for each game.

I guess it’s possible to display the owned games page using games that you previously owned, but that might be weird. On the other hand it might be genius, we’ll see what people come up with.

Now, there is even more method. Given that the page does just one query for data, I can cache that. Browsers these days have a thing called browser local storage where the web page can store stuff for later. So I could save the data for the page in browser local storage and just get it back from there later. This means (a) you wouldn’t have to wait to get the data and it wouldn’t come off your bandwidth allowance, and (b) it might be a bit out of date. So it would be best if that feature was used when you were on your phone and not so much on your desktop. When I get to putting that in I’ll make it configurable.

In other news, there is so much other news! I have more blog posts to write, but I also have more code to write and that’s more important. Stay tuned.

Welcome to New Users!

Well, I think it’s about time. In January I suspended addition of new users to Extended Stats due to capacity problems. I then procrastinated for a few months because I wasn’t sure how to solve some technical problems and didn’t know how to proceed. Then in June I solved the problems and progressed onto a proof-of-concept phase.

Development activity on Extended Stats over time (from Github)

However Extended Stats is not just about programming, it’s also about management of the site and management of the users on it. By “management of users”, I don’t mean “herding”, I really mean communicating with them, setting expectations, and participating in a conversation with them about the site. And for a few months or maybe years, I have been really bad at that. And I will probably will remain really bad at it, that’s just what I’m like.

So one of the tasks I have to start doing now is onboarding new users to the new site. New users don’t get to be added to the old site as it’s overloaded, for which I hope they will forgive me. However I’m hoping that the new site will satisfy some of their expectations at first, and any more over time. There’s a post here about why the new site and the old site are so radically different:

Why Rewrite?

Now I guess new users will want to know WHERE’S MY PRETTY PICTURES? SHOW ME THE PICTURES! That’s a problem I’m still working on, but a good starting point is:
https://extstats.drfriendless.com/geek.html?geek=Friendless

but of course you should change “Friendless” to your boardgamegeek user name. That page will remain an index of all of the things related to you. In particular if you go through to Favourites or Collection there are some nice bits.

Now, if I still have your attention, I have a bit of a chat about privacy in this post:

Watch Out, There Might Be COOKIES.

I just had a look at auth0 (which manages logins for me), and the site now has 7 users with accounts, which I think is pretty impressive given that logging in achieves nothing so far :-). By the way, auth0 does not let me access those users’ passwords – it always worries me when I log in to a hobby site like this that I’m giving my password to some unknown nerd who might try to use it on other sites. Don’t worry about that, I cannot see your passwords as far as I know. I like it like that. Here’s more chatter about users.

It would be foolish of me to not mention to a dedicated reader such as yourself that the site is not free for me to run. I blog about the costs every month when the bill arrives. If you want to help, find the Patreon button on the site.

So, what happens next? Well there are a whole bunch of features that I need to port to the new site, so I’m going to be busy. I’m going to be distracted by a few other things until about November, so it’s probably going to be slow. One idea I had this morning was about how to prioritise what I should implement next. Of course, it involves writing code, so that in itself is a feature that needs to be implemented.

Thank you for using Extended Stats! I hope that the site can grow to meet your expectations, and I hope that you enjoy the ride!