Piechart with multiple parts

Animation
1

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

2

svg instead of png?

3

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

4

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)

5

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

6

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
7

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

8

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.

9

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

10

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...):

https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936#.rzu5vxks5

1 Like
11

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?

12

You’re welcome :slight_smile:

d3pie.hype.zip (94.5 KB)

3 Likes
13

Thank you that works perfectly

14

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

15

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/