I have recently had the need to create some different data visualizations for recent clients. I really enjoy the challenge on how to create new design elements that are both visually compelling but also provide really valuable data to the user.
The need was to create some conceptual examples of different data visualzations to compare local wifi usages. I usually start out by sketching a few ideas out and here is an example of that.
After I have a pretty good idea of what it should look like based on the user needs identified I then jump into either Sketch or Axure. I found a really easy way to create donut charts in Axure by converting a ellipse shape to a dynamic shape that you can adjust the handles to resize the size of the pie.
This shape will be your variable percentage. This is really great because it is super easy for you to change the size of the pie without having to re-draw the circle.
The next step is to create a light gray fill circle the same height/width as your other object and put it behind it. Then create a smaller circle and place it directly in the center of them all. Make sure the circle in the middle matches the background color.
Creating this same thing in Sketch is a whole lot more difficult as it does not include dynamic shapes like Axure does so you will have to manually edit the circles to get the desired results. Here is what the finished concept looks like.
See my video below that shows how this is done for both Axure and Sketch. You can download the Axure 8 file HERE to get you started.
Happy Designing!