Visio Guy

Visio Discussions => ShapeSheet & Smart Shapes => Topic started by: Visisthebest on May 11, 2022, 09:56:48 AM

Title: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Visisthebest on May 11, 2022, 09:56:48 AM
The university of Oxford has published the attached attractive circular data chart, see also:
https://ourworldindata.org/emissions-by-sector

I have seen several impressive examples of circle-based graphics in Visio but not exactly like this pie chart with some text curved on the circle (in two different ways) and some text unrotated on the main pie elements.

There are actually three circles here.

What would be an elegant way to create such a graphic in Visio using the shapesheet's power for adding and deleting data on the circle(s) and the graphics updating when the changes are made.

It would be an impressive demonstration of Visio's visual potential on a key subject (climate change).

Thank you for sharing your ideas!

Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Surrogate on May 11, 2022, 10:42:02 AM
IMHO We haven't build-in tools for create same infographics in Visio ! Sorry...
May be best way use PowerBI or/and Excel ?
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Visisthebest on May 11, 2022, 10:54:07 AM
I am sure this infographic can be made in Visio, certainly with a bit of code but most likely also with a set of shapesheet formulas.

If PowerBI supports this graphic that is easier for sure, but I would like to build this as a well-designed and configurable Visio group shape!

Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Yacine on May 11, 2022, 12:12:51 PM
What about this 12 years old post? ;)
http://visguy.com/vgforum/index.php?topic=1598.msg6797#msg6797 (http://visguy.com/vgforum/index.php?topic=1598.msg6797#msg6797)


Yes, one is a radar graph, the other a pie chart, but the techniques are quite similar.


From memory, the most valuable technique was the self-incrementing sub-shape - a technique lent from Chris, if I remember well.
The idea is that you have smartshapes inside a bigger one.
You set it up to your needs and make sure that the formulas involved use the prop.num for this one specific need (position, color, text, whatever).
When duplicating the sub-shape inside the parent, the drop-event will increase automatically your counter (prop.num), thus the sub-shapes know what to do.
I've used and re-used this technique so many times. Proven, safe, useful!


Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Visisthebest on May 11, 2022, 12:22:32 PM
Thank you Yacine impressive radar graph, certainly this helps to build parts of the specific CO2eq emissions graph!
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Yacine on May 11, 2022, 12:48:32 PM
Looking forward to appreciate your work. ;)
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Surrogate on May 11, 2022, 01:45:36 PM
Quote from: Yacine on May 11, 2022, 12:12:51 PMthe other a pie chart
Exactly, you can modify the "Pie chart" shape ! This shape contains colorful 10 sectors.
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: vojo on May 11, 2022, 01:49:29 PM
Let me know if you need something like these
no VBA / All shapesheet
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: vojo on May 11, 2022, 01:50:10 PM
or these
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: vojo on May 11, 2022, 01:51:52 PM
or these
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: wapperdude on May 11, 2022, 02:31:04 PM
The chart shouldn't be that difficult. I can "Visiolize" using multiple, stacked shapes...largest diameter on the bottom and progressively smaller diameters moving toward the top.  Some would have no fill...the outer text, some would be pie charts, some just solid white circle, e.g., to create the inner white band.  One way for the outer text would be a quasi-pie shape.  That is, large circle that has been fragmented such that the text would have varying amounts of rotation...I don't think "gravity" would work. 

As Vojo says, all done in shapesheet.

Because of the various fill, font colors, etc, it would take multiple shapes, but, they could be grouped.  The sector sizes, text, etc could be in an Excel file or other data base, to allow a more flexible design...creating a mega smart shape structure as Yacine indicates.
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Visisthebest on May 12, 2022, 06:46:51 AM
Thank you all I think I'll be able to figure something out, I might create a solution that uses a bit of VBA as well and then replace it with a shapesheet-only solution later. (I am a lot more comfortable with code, but getting more comfortable with the shapesheet)

When I have something that works well and looks as good as the original pie chart, I will share it here.
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Yacine on May 12, 2022, 07:48:57 PM
Thank you Visisthebest for this challenge. A very nice one.

My ideas on it:
- Not a complete mega-smartshape, but the donut segment definitely as one.
- All properties controlled by custom data, so you can generate them by linked excel file. There are so many that you shouldn't go for a manual version.
- The segment consists of
- the standard donut segment but tailored to our needs.
- a circular text shape, which splits the text of prop.Text1 into individual shapes and shows them on a circle.
   a lot of work left to you on this point - distances between the letters, start and stop angle, etc.
- the donut shape got also a prop.TextOrientation so you can chose manually (or via excel) how to display your text. I thought of circular/horizontal/gravity. The 2 other options are left to implement by yourself.
- a Text2 prop is foreseen so you can put 2 lines of text. --> open
- The segments are arranged by putting their PinX and PinY to the same value. Could be added to the props.
- The placement requires a cummulative column in excel for the starting angle. The shapes don't know anything about each other.
- The values and start-values are meant as percent of the circle.
- The out-radius is set in prop.Radius, the inner one in the other according prop.

That's it. I had a lot of fun.
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Visisthebest on May 13, 2022, 08:25:17 AM
Thank you very much Yacine that is the foundation I'm looking for!

To put the underlying chart data (text and values) in Excel is the best option for sure, wouldn't want to use the shapesheet UI to enter this info.

Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Visisthebest on May 13, 2022, 08:29:46 AM
You also see some clever custom things in the original, like Grassland 0.1 with a line pointing to the small sliver of the pie. Impressive how this pie chart shows so much information in one picture.
Title: Re: Elegant way to recreate this amazing infographic using shapesheet?
Post by: Yacine on May 13, 2022, 09:09:50 AM
I absolutely agree with you. That is pro level.

The colors, their variations.
The font. The choice of this thin style, the size matching the value. The contrasts - white when over the shape itself.
The different labeling options - as block inside the shape, radial, circular.
Note also that the circular texts have two bending options, depending on whether they are on top or bottom.