Piechart with multiple parts

Hi guys,

perhaps a noobish question but at the moment I’m stuck:

Every form, graphic or pic is put in a “rectangle container” by “Hype”, meaning by clicking an object you have eight anchor-points around it.

The chart I have to put up have some very big pie-pieces (i.e. 36%) but VERY small pieces also (i.e. 1,2% and 2,5%).

Every pie-piece is a single png which is grouped with the others.

MY PROBLEM
To be clickable and calling an action the PNG has to be on top layer (right!?).

Due to the rectangle-container-behaviour the smaller pieces overlays each other in a way that it is impossible to click the parts next to it.

Is there a way to set up an “image-map” that follows the true form of the graphic, like in the old HTML-days?

Any help really is appreciated!

Thanks a lot and best regards

Tesla

svg instead of png?

I’ve never used SVG before. Does this format exclude the “rectangle” behaviour of graphics?

Here’s a demo of how to link just the path of an SVG:

http://jsfiddle.net/7bwm0scu/

It requires setting an ID on the path or SVG element you want linked:

<clipPath id="clipTriangleUp">
            <polygon points="0 87,100 87,50 0"/>
</clipPath>

And then including an anchor tag which references the ID of that path within the SVG code:

clip-path="url(#clipTriangleUp)"

Easier than this would be to use regular rectangles (which can have opaque). If you strategically overlay them, you can get them to link to individual URLs or timelines: linkedelements.hype.zip (25.7 KB)

Perhaps my project-file will make it clearer. Please have a look:
Pie-Chart.hype.zip (58.4 KB)

Especially “Layer 4” and “Layer5” are blocking each other.

You hoover over layer 5 but text 4 fades in due to the fact that clickable instance have to be top-level.

Hope anybody can help me out on this. Thanks!

Best
Tesla

Hey Tesla,

Suggest that you look at http://d3pie.org

You will find that this with javascript is way better than doing this manually. They have a cool generator on the website for testing your content as well. Good luck!

2 Likes

That indeed is a possible tool but with hype I have greater influence on the look.

Isn’t there any way of solving this within “Hype”?

Best,
Tesla

I’m relatively new to using Hype myself and am not the best person to offer
up advice here. I just thought to share a resource which which I have used
previously for accomplishing SVG pie charts. Sorry I cannot be of further
assistance.

Hi Jeremy,

please don’t get me wrong. Indeed your tip was the right path. I was able to realize the piechart due to your hint. Thanks for that!
I was/I’m still dazzled that “hype” seems to reach its limits on such a simple figure.

Best,
Tesla

In fairness, it is more that HTML has reached its limit, which is why one needs to go SVG :wink:. I just came across this article for drawing pie charts (anything but simple…):

1 Like

Hi Jeremy

I looked at the site http://d3pie.org and I am not sure but how do I get the graphs generated on the site to appear in Hype. I did try a HTML widget but that did not work. Is it possible to use the code generated for the graph to be used in Hype?

You’re welcome :slight_smile:

d3pie.hype.zip (94.5 KB)

3 Likes

Thank you that works perfectly

Thank you!
Your example helped me to understand how to integrate some scripts in Hype :slight_smile:

this library based on d3 in also nice:
a chart-library based on d3:
https://naver.github.io/billboard.js/

what’s really neat about it is the possibility to set up the code online.

//////////

for fast graphics a tool like datawrapper.com is really cool

/////////

For really simple graphs you can even use hypes paths:
https://www2.aachener-zeitung.de/zva/karlo/test/revealSVGPathStrokeDashGap/