Maths for Drawing Circles
Circles are a foundational shape in data visualization, but drawing them requires some basic mathematical knowledge. Here’s your guide.
Humans have always been fascinated by curvilinear lines. We find them all around us: planets, orbits, shapes of galaxies, atoms. From ancient history to modern days, we incorporate circles not only in data visualisation but in our daily life: architecture, machinery, interior design, sports, advertising on billboards, or even as beer coasters. Historically, the circle has been a timekeeper. The circle’s shape is thought of as a perfect shape, a symbol of the divine symmetry and of balance in nature. Today, a circle symbolises harmony, unity, and equality.
As one of the most basic shapes on Earth — square, circle, and triangle — the circle has been the centre of interest of many designers, illustrators, and artists as this shape supports structures that are both synthetic and natural. The Italian artist Bruno Munari explored the visual history of all three, yet the circle occupied a special place.
Munari proceeds with the circle, noting that an immediate distinction must be made between the square and the circle, as the square stands in relation to man, and the circle, to the divine. “An ancient text says that God is a circle whose center is everywhere but whose circumference is nowhere,” Munari explains. Among his numerous examples are the halo depicted around Catholic saints and the Muslim Talisman to depict the circles’ distinct relation to the divine, which apparently even crosses religious lines.
At left is X Hour, a series of kinetic art objects created by Munari in 1945. Fifty numbered plates were made by Danese of Milan. The half-discs in the center of each object are transparent and turn by clockwork, creating geometrical figures that continuously change.
In The Book of Circles: Visualizing Spheres of Knowledge, Manuel Lima gives a comprehensive image of the history of circular information design and provides a taxonomy of the varieties of circle diagrams data visualisation designers nowadays use.
Yet, drawing circles requires some basic mathematical knowledge. So let’s get into that!
The circle
At the heart of modern Mathematics, Euclid defined a circle as a plane figure contained by one line such that all the straight lines falling upon it from one point among those lying within the figure equal one another.
More generally, a circle is the set of points in a plane that are equidistant from a given point O. The distance r from the center is called the radius, and the point o is called the center. Twice the radius is known as the diameter d=2r. The angle a circle subtends from its center is a full angle, equal to 360° or 2π radians.
Now, assume we have a (X,Y) system axis and we need to find (x(k),y(k)) for point K, sitting on a circle C, with a radius r.
In some data visualisations, such as pie charts, it’s important to find point K. The Pythagorean theorem and trigonometry are especially helpful.
The Pythagorean theorem is a fundamental and defines the relationship between the three sides of a right triangle. Indeed, it states that the area of the square of the hypotenuse equals the sum of areas of squares of the other two sides of the triangle (see equation below). The hypothenuse corresponds to the longest side of the right-angled triangle, opposite the right angle.
Trigonometry equations angle θ made by the straight line drawn from the center O, to the point K and the x-axis or the y-axis, help us navigate and characterise the Euclidean space in which this circle lies.
Having these equations and the theorem, we can move onto the proof. We may replace what we know into the above equations. That is to say, the r radius and the θ angle to find both x(K) and y(K). We can assume θ angle is from 1 to 360°, and calculate for the unit circle (circle with radius 1).
Once we find (x(K), y(K)), on a circle C with radius r we can find an infinite set of k points on the circle.
When we draw a line between them, we obtain the complete circle!
Great! But, how can we draw a circle using commonly used data visualisation tools?
Well, most of the data vis tools use the above proven equations for drawing circles. I detail below how this is done using two different tools: Tableau, D3.
Tableau
First, Tableau makes it quite easy to draw circles using a method for generating fictitious points of data by using the process of data densification. Numerous blog posts from the Tableau community explain this method, what it does is create additional entries for the missing data among the k points.
Now, when we need to draw a half semi-circle, in Tableau all we need to do is to calculate the set of couples {(x(k), y(k))} for roughly 90 points and use a line chart to draw it. I present below a real-world example that relies on Tableau and data densification, where (x,y) couples are calculated for a circle with radius 1.
D3
Second, drawing circles in D3 is the same but a different syntax is employed. D3 uses an SVG circle element which is a shape that is built using four mandatory parameters: (cx, cy, r) which are the x-axis coordinate of the circle center, its y-axis, and the circle radius r, and a <path> element to draw them.
The <path> element in SVG is one of the most powerful elements. It is not only used to draw circles, but also lines, curves, arcs, and so much more. A path element has only one parameter d and is a list of commands for drawing shapes. Indeed, many types of curved lines exist such as: Bézier curves, Smooth shapes, Quadratic curves which is a simpler form of Bézier curves, and Arcs which are sections of circles or ellipses. D3 makes a quick work of all those when you’ve a well-defined task.
Drawing circles in either Tableau or D3 is a piece of cake as you can see!
Beyond wanting to draw a circle, it’s important to note that there are many relationships between circles and other mathematical concepts in Geometry. I provide below examples ranging from Bézier curves, ellipses, to Euler’s constant e.
The method of drawing curved shapes was created by Pierre Bézier in the late 60’s for drawing elegant automobiles bodies.
Bézier curve
A quadratic Bézier curve is the path traced by four given points P1, P2, P3 and P4. The initial and terminating positions, P1 and P4, are anchors, respectively. While, the two separate middle points, P2 and P3, are handles. The Bézier curve shape can be altered by moving these handles. Bézier curves are well documented.
Ellipse
An ellipse usually looks like a squashed circle but in fact an ellipse is a special kind of circle. The definition of an ellipse states that any point P on an ellipse has the same sum of distances to two ‘focus’ points, marked E and F in our example. So in case of a circle, E and F is the same point, marked with O in our previous example.
Euler’s constant e
In relation to a circle, e defines the exponential relationship meaning every circle is a scaled version of the unit circle (circle with radius 1).
with e the base rate of growth
As a line leading to possibly further research on circles, the above equation is used in defining a Sigmoid curve.
A Sigmoid curve can be used in drawing a S shaped line and its usage is common in data visualisation. The expression of the function that permits drawing Sigmoid curves is explicated by f(x).
Indeed the usage of Sigmoid curves extends to data visualisation. They are common among different chart types: Sankey, flow charts, or a node chart. Their usage is often to calculate the flow lines, although it is not a recommended practice. This is mainly due to the squishing of the width flow in the middle.
Using circle-flavored mathematics, one can calculate orbital trajectories or azimuth angles at burnout for placing a satellite at a selected position above Earth. Much like Katherine Jonhson back in the 60s, at the National Aeronautics and Space Administration (NASA), she relied on these same equations to plot navigational charts for astronauts in case of electronic failure. Moreover, she also did trajectory analysis for Project Mercury and Apollo missions and was the one that checked computer generated numbers for John’s Glenn flight; although by hand and on her mechanical desktop calculating machine.
Recognized for her amazing feats, she was renown as the human computer and recently one of the characters of the Hollywood movie “Hidden Figures” during the Space Race. Somehow it all started with the circle!
The circle is a fascinating shape, it is used in all sciences and arts, from ancient to modern times. In data visualisation, circles may prove difficult due to their readability and effectiveness, understanding maths for drawing them expands our creativity and helps us create bespoke elements.
Special thanks go to my 11 years old for the childish yet fun representations of my use cases and to Georges Hattab for collaborating on this piece.
