Hi All,

I hope everyone is still riding the buzz from #IronViz? Congratulations to Lisa, Sam and Pradeep for making the final. What beautiful visualisations they created for the competition. I can’t wait to see them battle it out at the Tableau Conference. Best of luck to them! Check out some of the Tableau highlights here.

A further thank you and congratulations to the Tableau team, the judging panel, as well as everyone else who entered this year. It really captures the supportive nature in the community with everyone playing a part.

Before we jump in, a small side note this will probably be my last post before a few weeks off from blogging. The non-robotic side to my soul is looking forward to a bit of downtime and fingers crossed… some London sunshine. We will be back in September with a “What’s Good?” blog.

TODAYS TOPIC

Today, we will be looking to rotate custom shapes and re-save them down for usage within our tableau dashboards for our radial charts!

This may have little applied user cases, but I have come across it a few times myself where I could have done with a rotated shape at the end of a chart point, but didn’t want to save down lots of separate images.

Today’s tutorial is another mixture between Python and Tableau. Apologies for those out there that takes a disliking to code. I do want to re-iterate with my coding tutorials it’s normally vaguely a case of just hitting the run button! Please, do not hesitate to reach out for help if you get stuck along part of the process, I’m always willing to help.

DESIGNING AN IMAGE TO ROTATE

This is my chosen desired image I will be rotating. You can find it in the repo, as Heart.png

 

 

When designing in an image to rotate the things that should be considered are:

  • Having a transparent background. (save the file as a png) You can see mine has a transparent background other than the circle and heart.

  • Making the image square! We want to make sure we rotate through the mid-point of the square image each time. Shapes that aren’t square will not rotate properly using this code.

PYTHON

We will be using Pycharm CE to run the code, but if you’re more familiar with other interfaces feel free to use them.

First, download the code template from the GIT repo.

Open a new project, in a virtual environment and paste the code into the main file.

 

 

Before we run the code there are a few things we will need to do:

Within the terminal, run the commands ‘pip install pillow‘ and ‘pip install numpy‘. These are the two packages we will require. You can find the documentation here, and here, respectively.

 

 

Drag the image into your project folder.

 

 

It will ask to refactor, once you’ve done this it will have added the file into your project directory.

 

 

 

 

The final thing we want to do is change the file name of the heart file to your chosen file name ready to rotate.

im = Image.open(“Heart.png“)

EXPLAINING THE CODE

You will see I’ve added a few url’s that will be useful as extra background reading at the top of the file.

  • Firstly we open the image in python saving it to a variable.

  • Next, is a question that appears in the terminal where you can type a number in for the number of points you have in your visualisation

  • The for loop looks to save each new file down in the directory, starting with 1 proceeding to print as many equal rotations of the image until it’s reached 360 degrees.

If this is a little confusing I recommend reading a simpler version of the documentation here.

With all this information you are good to go!

Input a number into the terminal and press enter key, after hitting run.

 

 

Once the code has exited, you will see them appear in your folder structure.

 

 

Here is what the output looks like:

 

 

Now we have all the rotated versions of our image, we can load them into our Tableau Repository.

Add the files in their own folder in your repository. Below is a reminder where the repository for your shapes are stored. You can drag them from your folder in Pycharm into the new folder within the repo.

 

 

TABLEAU

So, I won’t go into too much detail on how to make a radial visualisation as that’s pretty much my whole websites content… But to test the theory we will follow the simplest method. There are lots of different methods out there so do explore other means where necessary.

If you’d like to follow along you can find the example data in the repo, here.

We will want to make 4 calculations.

Angle – Create the angle between each circle. This will be a constant, given we want equal spacing between each point. 360 degrees divided by the number of points you have, in this case 5.

 

 

Rank Angle – Taking the order of the points, find the angle around the circle of where the next point is situated. You will see I have added minus 1 to the calculation in order for the top image to be the first one and not the last in the circle. This is my alternative to using an index function.

 

 

X & Y – sin and cos are used to make it a circle.

 

 

 

 

With the calculations done we are ready to drag Y onto columns, X onto rows.

I like to fix the axis, to make it more apparent the shape of the radial chart.

Change the marks to Shape and drag Rank onto shape. Find your repository and click apply.

The beauty about putting Rank (integers from our dataset) onto the Shape is that it matches the file names from our python dataset! This is purposefully intended, especially if you have lots of points, it saves you going through trying to match the correct images up!

I.e it automatically associates the first value with our first image, and so on.

If all goes well, you should see the below:

 

 

Below is an example of having this in action, with 12 points.

 

 

Once you have this knuckled down, you could look to implement them as start / end points on radial column and bar charts. I think it would provide a nice effect.

GOING FURTHER

  • Try incorporate this into your own radial visualisation. (E.g Radial bars, column, sankeys, coxcomb, or radar)

  • Try using your own custom shape, that you’ve created.

  • Use vectors so that you can re-colour!

As always, Let me know how you get on with this one. I can be reached on Twitter, @_CJMayes.

LOGGING OFF,

CJ