I was checking on Mozilla Wiki to see if there is a directory of all Mozilla projects and the stages that they are in. While the homepage of the Wiki has the most important projects, there were some good projects which were part of the respective projects. While this is good in that there is lesser clutter, this becomes difficult to market certain projects to get contributors – to develop / QA / support / write good documentation for.
So, I thought, why not create this tree. My focus was specifically on the various products and projects that Mozilla was doing, with a product focus. I didn’t focus on the marketing, sales, partnership, legal teams that Mozilla has. This is not to say that they will not be included in the next version. I appreciate feedback on this chart and based on that I will create the V2 with more details.
And coming to the chart itself, there are a couple of notes
- I am a newbie web-developer (not a newbie developer though !). So, if the HTML is not right, then please let me know and I shall learn the right way and fix it
- The code is a shameless copy of Mike Bostock’s collapsible tree example using D3
- If there are any license violations, please let me know and I shall remove the code
- I found out about this from James Westgate’s reply on SO
- The changes I did are
- Created the JSON data for the Mozilla projects. You can get the JSON file here
- Figured out (again thanks Mike), that I need to create a iFrame that will include the HTML for the visualization as part of the HTML page
- The iFrame has been modified to make the background opaque as the width of the complete visualization was larger than the width for the container of the blog post – that is why you will see the iFrame in 90% opacity
Please let me know if I have made any mistakes or if you have suggestions on how this can be made better. A couple of enhancements I am thinking, for the next version
- Having a bit more meta-data in the nodes – possibly the wiki link
- Include active/inactive projects
- Provide weak-links amongst projects so that one can visualize the various links amongst the projects
- Learn D3 🙂