Visualizations are extremely powerful aids in education. If you are familiar with youtube channels like 3Blue1Brown, Zach Star, Minute Physics or Physics Videos by Eugene Khutoryansky (If you are not already, you should probably check them out, they are really good), you can't help but be amazed by how beautifully they explain difficult STEM topics. And this is because they make use of visualizations.

Now imagine a world in which every teacher could teach as beautifully as they do! That is our end-goal and the project that I'm going to describe is a small step towards that.

An open-source project/community comprising teachers and developers who are genuinely interested in using visualisations to aid their teaching.

If you are also a person who would love to see this, read on. This project would definitely keep you interested.

To begin, I asked myself the most important question:

How to make a tool that would best help in teaching this way?

For explaining topics in a visual way, teachers can make use of interactive visualizations, visualizations that we can interact with to get real-time responses. The advantage of interactive visualization is it can be used either in live classes or in recorded lessons. Also, students themselves can experiment with them to learn more about the system under study.

Currently, the web is one of the best platforms for creating and sharing visualizations. There are plenty of tools available for creating them. For this project, I've chosen to primarily work with an open-source javascript graphics library called p5.js because it is very beginner-friendly, but powerful enough for our needs. There is also an online web editor exclusively made for p5.js where we can very easily code and share visualizations.

I've been thinking about this problem for quite some time now. I want to help teachers teach using visualizations and this is a list of features that I think will help them adopt this teaching methodology.

• Provide with a large repository of interactive visualizations from which teachers can easily browse through and find visualizations for a specific topic.
• The ability to easily bring about whatever modifications that teachers want to, in the visualizations to suit their needs.
• If the visualization that teachers need is not present in the said repository, they should be able to request the community of programmers and collaborate with them to create it. In this way, with time, we will have more and more visualizations enriching the repository.
• A facility where they could organize and keep visualizations for a particular topic (maybe in the form of slides) so that they don't need to create these slides every time they present the same topic. Teachers may also share their slides with other teachers.
• A tool where teachers can write/draw theorems/equations/diagrams and show interactive visualizations simultaneously.

How Dynamic Learning fits the bill!

Dynamic Learning is an open-source project/platform that is being developed for addressing these requirements. Let's see what it offers.

• A central repository called simulation collection where we provide a collection of visualizations/simulations that can be added to lessons prepared by teachers.

• We only have four simulations in the repo now, but an increase in users will inevitably lead to more and more simulations.

• Teachers will request new simulations to the programmer community and collaborate with them to develop more of them from here.

• The simulations are developed and saved in the online p5 text editor. The advantage of this is that any time anyone can have access to the code for the visualization.
• Teachers can create a duplicate of the visualization if they want and customize them according to their need if they know how to code (Or they can even get the help of the programmer community for making this change).
• The workbook creator can be used to organize visualizations into slides. These slides can be saved and shared with the other teachers.

• The workbook creator also has a draw mode using which they can draw, write and add annotations.

• Teachers can create accounts and save, organize, share the lessons that they create.

The project is under active development and we need your support to improve and make it better.

How can you contribute?

• Introduce the project to someone you know who is interested in teaching using interactive visualizations or who loves to code interactive visualizations.
• Use Dynamic Learning in your lessons.
• Suggest new STEM visualizations by creating new issues here.
• Develop new visualizations, save them in p5 online text editor and share the link, we will add them to the simulations repo.
• Use the application and report bugs here - front end, back end.
• Suggest new features in the application.
• Help develop new features.
• Improve the code quality and add test cases in the application.

A lot of work has been put into making it this far. Thanks to all the contributors who helped. Thanks to Processing Foundation for developing amazing tools like p5.js and p5.js web editor which inspired me to start the project in the first place. Hoping to find more like-minded people willing to contribute.

If you are interested in contributing. Do leave a comment or contact us at developers@dynamiclearning.io

PS - I've used the terminologies interactive visualization and simulation interchangeably. They both refer to the same thing at least in the context of this project.

Some useful links-
Webapp
Sample workbook
About the project
Project organization
Front end source code (NextJS, React)
Back end source code (NodeJS, GraphQL)
Simulation ideas
GSoC 2018 article
GSoC 2019 article
Simulation Repo