gistfile1.js

var svgNS = "http://www.w3.org/2000/svg";
var width = 90;
var height = 70;
var firstRow = height / 4;
var secondRow = height / 4 * 3;
var radius = 5;
var leftArrow = width / 4;
var rightArrow = width / 4 * 3;
var delta = width / 4;


function createRectange(x, y, w, h, stroke, parent) {
    var myCircle = document.createElementNS(svgNS, "rect"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null, "x", x);
    myCircle.setAttributeNS(null, "y", y);
    myCircle.setAttributeNS(null, "width", w);
    myCircle.setAttributeNS(null, "height", h);
    myCircle.setAttributeNS(null, "stroke", stroke);
    myCircle.setAttributeNS(null, "fill", 'white');
    myCircle.setAttributeNS(null, "stroke-width", 1);
    parent.appendChild(myCircle);
}

function createText(parent, x, y, text) {
    var myCircle = document.createElementNS(svgNS, "text"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null, "x", x);
    myCircle.setAttributeNS(null, "y", y);
    myCircle.setAttributeNS(null, "text-anchor", 'middle');
    myCircle.setAttributeNS(null, "font-size", radius * 2);
    myCircle.setAttributeNS(null, "dominant-baseline", 'middle');
    myCircle.textContent = text;
    parent.appendChild(myCircle);
}

function createCircle(cx, cy, fill, parent) {
    var myCircle = document.createElementNS(svgNS, "circle"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null, "cx", cx);
    myCircle.setAttributeNS(null, "cy", cy);
    myCircle.setAttributeNS(null, "r", radius);
    myCircle.setAttributeNS(null, "fill", fill);
    myCircle.setAttributeNS(null, 'stroke', 'black');
    myCircle.setAttributeNS(null, "stroke-width", 1.5);
    parent.appendChild(myCircle);
}

function createLine(parent, x1, y1, x2, y2, stroke) {
    var myCircle = document.createElementNS(svgNS, "line"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null, "x1", x1);
    myCircle.setAttributeNS(null, "x2", x2);
    myCircle.setAttributeNS(null, "y1", y1);
    myCircle.setAttributeNS(null, "y2", y2);
    myCircle.setAttributeNS(null, "stroke", stroke);
    myCircle.setAttributeNS(null, "stroke-width", 1);
    parent.appendChild(myCircle);
}

function createBoardGroup(x, y){
    var group = document.createElementNS(svgNS, "g");
    document.getElementById("mySVG").appendChild(group);
    transform = "translate(" + x + ", " + y + ")";
    group.setAttributeNS(null, "transform", transform);

    createRectange(0, 0, width, height, '#eeeeee', group);
    return group;
}

function createBoardGroupDown(x, y) {
    var group = createBoardGroup(x, y);
    createLine(group, width / 2, secondRow, width / 2, height, 'black');
    createLine(group, leftArrow, height, leftArrow, secondRow + radius, 'lightgray');
    createLine(group, leftArrow- radius, secondRow + radius, leftArrow , secondRow + 3 * radius, 'lightgray');
    createLine(group, leftArrow+ radius, secondRow + radius, leftArrow , secondRow + 3 * radius, 'lightgray');

    createLine(group, rightArrow, height, rightArrow, secondRow + radius, 'lightgray');
    createLine(group, rightArrow - radius, secondRow + 3 * radius, rightArrow, secondRow + radius, 'lightgray');
    createLine(group, rightArrow + radius, secondRow + 3 * radius, rightArrow, secondRow + radius, 'lightgray');
    return group;
}
function createBoardGroupUp(x, y) {
    var group = createBoardGroup(x, y);
    
    createLine(group, width / 2, 0, width / 2, firstRow, 'black');
    
    createLine(group, leftArrow, 0, leftArrow, firstRow - radius, 'lightgray');
    createLine(group, leftArrow, firstRow - radius, leftArrow - radius, firstRow - 3 * radius, 'lightgray');
    createLine(group, leftArrow, firstRow - radius, leftArrow + radius, firstRow - 3 * radius, 'lightgray');

    createLine(group, rightArrow, 0, rightArrow, firstRow - radius, 'lightgray');
    createLine(group, rightArrow - radius, firstRow - radius, rightArrow, firstRow - 3 * radius, 'lightgray');
    createLine(group, rightArrow + radius, firstRow - radius, rightArrow, firstRow - 3 * radius, 'lightgray');
    return group;
}

function createBoardGroupTransit(x, y) {
    var group = createBoardGroup(x, y);
    return group;
}

function createTransit(x, y) {
    var group = createBoardGroupTransit(x, y);
    createLine(group, width / 2, 0, width / 2, height, 'black');
    createLine(group, leftArrow, 0, leftArrow, height, 'lightgray');
    createLine(group, rightArrow, 0, rightArrow, height, 'lightgray');
}

function createBoardUp(x, y, count){
    var group = createBoardGroupUp(x, y);
    for(var i=0; i<count; i++){
        var x = (i+0.5)*width/count;
        createLine(group, width / 2, firstRow, x, secondRow, 'black');
        createCircle(x, secondRow, 'green', group);
    }
    createText(group, leftArrow, firstRow, "-12.1");
    createText(group, rightArrow, firstRow, "+1.1");
    createCircle(width/2, firstRow, '#cc3333', group);
}

function createBoardDown(x, y, count){
    var group = createBoardGroupDown(x, y);
    for(var i=0; i<count; i++){
        var x = (i+0.5)*width/count;
        createLine(group, width / 2, secondRow, x, firstRow, 'black');
        createCircle(x, firstRow, 'red', group);
    }
    createText(group, rightArrow, secondRow, "-12.1");
    createText(group, leftArrow, secondRow, "+1.1");

    createCircle(width/2, secondRow, '#cc3333', group);
}

createBoardDown(width*0, 0, 0);
createBoardDown(width*1, 0, 1);
createBoardDown(width*2, 0, 2);
createBoardDown(width*3, 0, 4);

createTransit(width*0, height);
createTransit(width*1, height);
createTransit(width*2, height);
createTransit(width*3, height);

createBoardUp(width*0, height*2, 0);
createBoardUp(width*1, height*2, 1);
createBoardUp(width*2, height*2, 2);
createBoardUp(width*3, height*2, 4);