I’ve been working on a graph whereby you can switch the x axis and increase the number of categories. Essentially, lots of different breakdowns of the data in the same space. The changing x axis allows you a lot of flexibility re what you can look at.
Click the tabs below etc and so on.
This was made using d3 again. The main technical thing here is using the enter/ exit functions, and seeing the bars move in and out on the right hand side. Making the bars thinner and fatter so that they fit is pretty basic.
The point here is that if the analysis is all in the same space, then the explanatory text has to be as well. There’s no point in having the numbers at the top of the page and the words at the bottom. So I’ve appended some text to the graph that moves in and out with the clicks.
Each chunk of text is a jpeg. This is because Internet Explorer (even the most recent version) cannot handle the “foreign object” code, which allows me to use a text box like it was any other object in d3. IE is still around 25% of the browser market, so it’s not really OK just to rule those users out. So I needed a workaround.
It’s not ideal using jpegs- it seems a bit flickery on my browser (possibly my computer) and this project now contains 9 files, which feels too many (one basic html file, 4 data files and 4 text boxes made into jpegs). Hopefully someone will come up with something better soon, or IE will catch up with the rest of the world. Let’s hope.
Also, final thing. When you switch between c and d, the word “Me” scoots along the x axis to a new position. This is totally unintentional, and part of how d3 animates stuff, rather than a choice. Obviously it’s just the result of using “Me” twice in my different nonsense axes but it’s quite funny nonetheless.