javascript - Drawing plots interactively in a web app -

i looking library preferably in javascript, allow user draw plot (simple 1 consisting of vertical , horizontal steps) one:

the idea when user done plot can generate data points graph , process them.

i don't know start, looking start learning within js based framework (meteor) can't find library allows this. closest library found d3.js couldn't find example allows this.

would able point out me sample example start from? know of better suited library accomplish asking for?

here relatively simple fiddle accomplishes of asked for, excluding axis (which relatively easy , has plenty of examples). uses d3 drawing , mouse event handling. on click executes svg.append("circle").attr("r", 5), , if it's not first click (i.e. linking points) create path element using 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 , y current mouse coordinates. has export button output list in form of cx,cy,cx,cy,... :: d,d,d,d,.... on import, split array 2 using indexof("::") or whatever choose if want change formatting. exectue for (x in circles) {svg.append("circle").attr("cx", function...).attr("cy", function...);} , similar paths for (y in paths) {svg.append("path").attr("d", function(){return paths[y];});}. easier if on export made cxcy array in format cx;cy,cx;cy since split array @ each comma , split each index of resulting array @ semicolon nice nested array.

small update in version, can place points if current mouse x greater previous x coordinate, , has line d3.event.stoppropagation(); prevents accidental highlighting of page.