https://www.youtube.com/watch?v=pGWKFCnMv-0&t=18s
This is a sequel to the first article on 3-way Venn Diagram. The purpose is to make labeling a bit more automatic/dynamic. The labels are embedded in data set instead of manually annotated, although manual annotation is always an option.
What's new?
In the previous design, the labeling was done using manual annotation. Here we will pre-define the positions of the labels. There are in total 7 labels because there are 7 sections in the 3-way Venn Diagram. The labels can be created in the data set and visualized in Tableau.
The data set
So, in the previous post, we had 3 data points defining the 3 circles. In this one we will add 7 extra data points defining the labels. We will have 10 data records in total.
The coordinates for the centers of the 3 circles are (0,1), (-sqrt(2)/2, -sqrt(2)/2), (sqrt(2)/2, -sqrt(2)/2). Basically, these are the 3 vertices of an equilateral triangle.
The positions of the 7 labels are also relative to an equilateral triangle: 3 vertices, 3 at the middle of each side and 1 at the center. The scale is larger than the previous triangle.
Dual Axis
To put both labels and circles in the same chart, we need to use dual axis. For this purpose, we need to create 2 subsets of Y's:
- [Y Label]: IF [Type]='Label' THEN [Y] END
- [Y Circle]: IF [Type]='Circle' THEN [Y] END
For the circles: Maximize size for the circles and make the circles half transparent.
For the labels: Minimize size for the label dots and make them 100% transparent.
Dual Axis with adjustable label positions
To enable the tuning of label positions, we added a scale parameter to the coordinates of the labels:
- [Scaled X Label]: IF [Type]='Label' THEN [X]*[Label Range] ELSE [X] END
- [Scaled Y Label]: IF [Type]='Label' THEN [Y]*[Label Range] END
These coordinates are used to dual axis with [Y Circle]. See below for details of the parameter [Label Range].
Fine-tune the positions of circles and labels
To adjust the overlapped area of the circles, we created a parameter [Circle Range], a float number between 1-10 (default at 2.5). The tuning is done through adding reference lines in both X and Y axis, based on both [Circle Range] and -[Circle Range].
To adjust the positions of the labels, we created a parameter [Label Range], a float number between 1-2 (default at 1). The tuning is done through scaling the triangle on which the labels are placed.
After all, we can always manually tune each of the labels by selecting and dragging it. If we need to have multi-lines of text, we can create a few more columns of text and add them to the text/label shelf.
Voila, that's about it. Click image below to go to the interactive version.
.png)
View comments