Creating dynamic graphs with SVG and Ajax

While there are a lot of graphing libraries out there (all of which you can use in Meteor, by the way!) it's good to know how to implement fundamental shapes inside an HTML page, using SVG templates. Sometimes implementing a full-fledged graphing library is overkill, and having a working knowledge of SVG in your back pocket can be very useful. However, this is a Meteor recipe; we not only want to see an example of SVG, but we want to see it in action! This recipe will teach you how to stream a live data source into MongoDB collections, and then represent that dynamic collection graphically, using SVG tags.

Getting ready

We will be using a default project installation, with client, server, and both folders, to keep the code clean and readable. In a terminal window, navigate to where you would like your project to reside, and execute the following commands:

$ meteor create svggraph
$ cd svggraph
$ rm svggraph.*
$ mkdir client
$ mkdir server
$ mkdir both...