Subject Flow

Visualizing Content

There is a lot of great content available on the internet that you can use to learn new things. This content is usually organized in a list format such as a table of contents. When you look at a list you usually get the impression that you have to progress linearly from the start. How often is this true? It would be nice to know exactly which subjects are prerequisites for getting to what you want to learn.

The Big Picture

It's nice to able to see the big picture when looking at contents of a textbook, videos on Khan Academy, articles on Wikipedia, or PowerPoint lectures from a college course. It's helpful to be able to visualize what you know and what you need to learn in order to reach your target.

A diagram like this allows you to keep track of your progression towards a goal. It also helps to create a clear path to reduce time spent backtracking or wandering. It should also improve your understanding of how the different subjects fit together.

We should try to make learning be as easy as possible. To achieve this we need high-quality content to be easily accessible and organized. I made this visualization tool to help make organization of content better. I hope that using these Subject Flow Diagrams will help make learning a better experience.

Current Features

• Build your own diagrams and connect the links to any content on the internet.
• Create an account to save your diagrams to an online database.
• Define preset goals such as "A Short Course on..." or "An Advanced Course on..." or "How to..."
• Share your diagrams with others by sharing a permanent link.
• Tag content to keep track of what you know and what you want to know.
• Save your user data online by signing in, otherwise everything saves to your local device.
• Post questions on a subject when you get stuck and vote on who's answers are helpful.
• Use the comments sections to suggest improvements or post helpful supplemental content.

Technical Information

These diagrams use the D3.js Javascript library and the design is based on the example from the d3.layout.tree. The first thing I had to do was rewrite the layout algorithm so that I would have the ability to connect multiple parents. Then I got working on adding several new features in Javascript. The server-side tasks are all handled by Firebase.

Try it out!

The diagram below is interactive.

Start Over Show Me More Steps

You can also still view it in more of a traditional list-style layout. As you change the flow diagram up above the content will change here as well.

A Bigger Real World Example

I used "Information Theory, Inference, and Learning Algorithms" by David J.C. MacKay (Amazon / Author's website) to create a more detailed example. Fortunately David MacKay included a dependency tree within his table of contents, so it was easy for me to rebuild this tree.

This example has a lot of nodes, so when it gets cluttered you can use the Search bar...

you can use the Focus button...

or you can set a Target and tell it to only Show Known -> Target

So although this project still needs a lot of work, you can try it out here:
http://www.subjectflow.com/viewer.htm?=mewvzl2i6bt97gnjf9i4

What's Next?

Right now you can register as a new user and start making your own Flow Diagrams. However, there are still a lot of features I need to add and the user interface still needs a lot of work. The site uses Firebase for database and user management, but Firebase is still in beta and I don't believe they've finished making it easy to reset forgotten user passwords through email.

I'm looking forward to releasing a more user-friendly version with more features. I want to try integrating this tool with some type of Learning Management or Course Management System. The ultimate goal of course is to try to organize and map out as much of human knowledge as possible.