Math and numbers are incredibly interesting and have many intriguing patterns. Unfortunately, number theory is often intimidating to those who have not picked up a math textbook in several years. The numerical patterns often become difficult to explain or understand. Visualizing these patterns, however, makes the beauty of these patterns understandable to people who are not as familiar with math. This tool gives everyone an opportunity to appreciate the beauty of numbers. We learned about this specific method of visualizing fractions from Rafe Jones, a Carleton professor, who wrote a paper outlining how this graphic is calculated. Also special thanks to Tessa Whalen-Wagner for providing inspiration with a mathematica program that also looks at fraction visualization.

How it works

Our webapp uses CSS, HTML, Javascript, and d3.js, a library in Javascript designed for generating data-driven documents. A user navigates to our page, and inputs a numerator, denominator, modulus, as well as a color specification. As soon as the user has entered valid input, the new fraction is calculated in the given modulus. This in turn, generates a the graph in d3.js and is displayed in an SVG element. The graph is drawn and displayed along with other relevant information about the given fraction.

Challenges we ran into

Using a new language (Javascript) and library (d3.js) had a steep learning curve. Understanding and implementing the mathematics not just in a formal way, but a practical, visually appealing way was tricky.

Accomplishments that we're proud of

The website is aesthetically appealing, accepts a variety of input, and responds and visualizes the new information quickly and effectively. Our goal was to make a page that would appeal to anyone, and we think the website's aesthetic appeal makes the graphics interesting to a variety of people. Plus, it's really fun to play with. We based our project off of a PhD project by a now Carleton professor, Rafe Jones, who wrote a nationally published paper about the properties of rational fractions we explore in this paper. While this may not have broad appeal, to theoretical mathematicians and to budding mathematicians, we hope this can be a wonderful confirmation of the beauty of numbers, and help us draw our minds away from the usual base-10 mentality.

What we learned

Learned a lot about these programming languages, as a lot of the language or types of computation were new to us. Ben had never worked in Javascript before, and taught himself most of the web development skills you see displayed here. Marielle got to finally work on some of the visual concepts from Number Theory and implement them in this project (proving happy numbers, doing testing for different types of symmetry, etc).

What's next for Rational Fraction Visualizer

We would hope to include additional interesting information about these numbers, and try to see if there are alternate ways to display the fraction, by potentially moving away from straight lines. Ideally this tool would be in part of a series of different math visualization suites. These tools could be used by teachers trying to get more students interested in math (and computer science).

Built With

Share this project: