Seeing Statistics

By Daniel Kunin, Madeleine Johnson, and Jingru Guo

Over the course of the semester, we have built a website called “Seeing Statistics,” which is a repository of statistical concept visualizations. Due to the small size of our group (3 people) we had to scale down the project. Instead of requiring a Brown Shibboleth login and getting the website hosted on a Brown University Server, we decided to host it on an Amazon Web Server instead. Additionally, we decided that it would be a reasonable goal for a group of our size to create three different statistical concept visualizations.

Our website consists of a homepage, which displays icons of our visualizations in as tiles. The three statistical concepts for which me made visualizations are Linear Regression, Conditional Probability, and Sampling Distribution. Upon clicking on a tile for a specific statistical concept, the user is redirected to the concept’s visualization page.

Each visualization page features a “control panel” where the user can customize different parameters, a graph panel that displays the visualization, and an explanation box, which the user can choose to show or hide. Additionally, each page features a reset button and a “how to use” button. The “how to use” button will display a list of instructions, which can be shown or hidden.

Evolution of our Design

Visual Design The overall design of our website has not changed much from a layout perspective. We initially planned to have a homepage with tiles for each visualization and individual visualization pages made up of multiple panels. The primary changes we made to the visual design of the website were changes to the website’s color scheme. After our first project demo, in which our mentor and his TA could not see elements of our visualization because there was not enough contrast between colors, we decided to lighten up our color scheme, which was originally mostly dark gray. We added more white and light gray, and chose two accent colors, a bright light blue, and a bright teal. Additionally we checked to make sure there was enough contrast between the light blue and teal when they are grayscaled, so that people with colorblindness will be able to distinguish between these two colors.

Technical Design We made technical changes to our visualizations after each of our meetings with our mentor. Some changes we made to our Linear Regression page include adding a regression table and an option to visualize each parameter. Our original Sampling Distribution directly used open source code we found from MIT. We have added to this code by adding options to change the parent distribution by selecting values for the alpha and beta of the distribution. Additionally, we have added options for the user to select the sample size and a specific number of draws, rather than have the visualization run indefinitely. We also set the speed of the visualization to vary inversely with the number of draws to aid in its use as a teaching tool. We also removed the bouncing balls element of the original visualization, which our mentor found to be confusing and visually overwhelming.

Future Developers

For future developers of the website, we have included a template page. Developers can use this page to ensure future visualization pages have the same look and feel. Additionally, we have compiled all of the hex codes we used in a single image for their convenience. All future pages can extend the same CSS, and basic underlying Javascript functionality.

colors