Making lines with SVG and JavaScript

Question

I just started trying out SVG the other day. Eventually I hope to be able to know how to do what SE does with their reputation graphs.

For now, I've just been trying to set up an easier way to make lines. I think my below code is decent, but please let me know what I can improve on or what I'm doing poorly.

Would like your thoughts before I start adding like animations, creativity, data to it.

Demo http://jsfiddle.net/ECKNh/

var Line = {};

Line.LINES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

var SVGline = function (l) {
    this.l = l;
}

for (var i = Line.LINES.length; i > -1; i -= 1) {
    Line[Line.LINES[i]] = new SVGline(Line.LINES[i]);
}

SVGline.prototype.createline = function (x1, y1, x2, y2, color, w) {
    var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    aLine.setAttribute('x1', x1);
    aLine.setAttribute('y1', y1);
    aLine.setAttribute('x2', x2);
    aLine.setAttribute('y2', y2);
    aLine.setAttribute('stroke', color);
    aLine.setAttribute('stroke-width', w);
    return aLine;
}

function start() {
    var aSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    aSvg.setAttribute('width', 1000);
    aSvg.setAttribute('height', 400);
    var w = document.getElementById('container');

    for (var i = 1; i < 11; i += 1) {
        var x1 = Math.floor(Math.random() * 500 / 2);
        var xx = Line[i].createline(x1, 0, 200, 300, 'rgb(0,0,' + x1 + ')', i);
        aSvg.appendChild(xx);
    }
    w.appendChild(aSvg);
}

start();

Answer 1

Let me know what I can improve on or what I'm doing poorly.

If you are going to do animations with those lines, you will want to keep track of them. I am assuming that is why you have an array of LINES. However, in createLine you create the SVG element and just return it, you do not keep a reference to it. So it will be hard to animate those lines, you would have to query the DOM to find them back.

I suggest you have an object that creates SVG elements, a factory so to speak. And then another object that tracks lines you have created so far, mostly to do animations and other fun stuff.

The factory object could be something like

SVG = {
  createCanvas : function( width, height, containerId ){
    var container = document.getElementById( containerId );
    var canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    container.appendChild( canvas );    
    return canvas;
  },
  createLine : function (x1, y1, x2, y2, color, w) {
    var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    aLine.setAttribute('x1', x1);
    aLine.setAttribute('y1', y1);
    aLine.setAttribute('x2', x2);
    aLine.setAttribute('y2', y2);
    aLine.setAttribute('stroke', color);
    aLine.setAttribute('stroke-width', w);
    return aLine;
  }
}

Initially the lines object could be as simple as

var lines = [];
lines.addLine = function( line ){
 this.push( line );
 return line;
}

Your start function would then be something like

function start() {
  var canvas = SVG.createCanvas( 1000 , 400 , 'container' ),
      lineElement, i, x1;

  for (i = 1; i < 11; i += 1) {
    x1 = Math.floor(Math.random() * 500 / 2),
    lineElement = lines.addLine( SVG.createLine(x1, 0, 200, 300, 'rgb(0,0,' + x1 + ')', i) );
    canvas.appendChild( lineElement );
  }
}