Drawing plots interactively in a web app

Question

I am looking for a library preferably in JavaScript, that will allow a user to draw a plot (simple one consisting of vertical and horizontal steps) like this one:

The idea is that when the user is done with the plot I can generate data points from the graph and process them.

I don't know where to start, I am looking to start learning to do this within a JS based framework (meteor) but I can't find a library that allows for something like this. The closest library I found is d3.js but I couldn't find any example that allows for this.

Would anyone be able to point out to me a sample example to start from? Would you know of a better suited library to accomplish what I am asking for?

Answer 1

Here is a relatively simple fiddle which accomplishes some of what you asked for, excluding axis (which are relatively easy and has plenty of examples). It uses D3 for all the drawing and mouse event handling. On click it simply executes svg.append("circle").attr("r", 5) , and if it's not the first click (ie linking points) then it also will create a path element using the previous mouse click coordinates:

svg.insert("path", "circle").attr("d", function () {
        return [
            "M", prevClickLoc[0], prevClickLoc[1],
            "L", prevClickLoc[0], y,
            "L", x, y].join(" ");
    })

Where x and y are the current mouse coordinates. Also has an export button that will output a list in the form of cx,cy,cx,cy,... :: d,d,d,d,... . On import, you could easily split this array into two using indexOf("::") or whatever you choose if you want to change the formatting. Then just exectue for (x in circles) {svg.append("circle").attr("cx", function...).attr("cy", function...);} and do something similar for paths for (y in paths) {svg.append("path").attr("d", function(){return paths[y];});} . It would be even easier if on export you made the cxcy array in the format cx;cy,cx;cy since then you could simply split the array at each comma and then split each index of the resulting array at the semicolon for a nice nested array.

Small update in this version, you can only place points if the current mouse x is greater than the previous x coordinate, and it also has the line d3.event.stopPropagation(); which prevents accidental highlighting of the page.