LBG Arc Test 1

by YOUNY zhu

CSS

.bar {
	display:inline-block;
	width: 3px; border:1px outset #69f;
	background: #369; border-bottom:1px solid #000;
}
.bar:hover { fill:white; stroke : gray;
             stroke-width=10px}

JavaScript

// Constants
var SpacerPx = 18;
var SpacerAng = 5;
var LevelWidth = 100;
var pi = Math.PI;


// Data
// label : text label, eventually used in tool tip
// level : 0=center, 1=parent, 2=grandparent
// arcstart : from 12:00 position, in degrees
// arclen   : from arcstart, in degrees
// LevSpacer   : pixel LevSpacer for nested arcs
// arccolor : fill color for arc
var data = [
    {"label": "L3-M-1", "level": 2, "arcstart":   0, "arclen": 90, "LevSpacer":0, "arccolor" : "#993300"},
    {"label": "L3-M-1", "level": 2, "arcstart":   0, "arclen": 90, "LevSpacer":1, "arccolor" : "#AD5C33"},
    {"label": "L3-M-1", "level": 2, "arcstart":   0, "arclen": 90, "LevSpacer":2, "arccolor" : "#BD7D5C"},

    {"label": "L3-M-2", "level": 2, "arcstart":  90, "arclen": 90, "LevSpacer":0, "arccolor" : "#000066"},
    {"label": "L3-M-2", "level": 2, "arcstart":  90, "arclen": 90, "LevSpacer":1, "arccolor" : "#333385"},
    {"label": "L3-M-2", "level": 2, "arcstart":  90, "arclen": 90, "LevSpacer":2, "arccolor" : "#5C5C9D"},
    
    {"label": "L3-F-1", "level": 2, "arcstart": 180, "arclen":  60, "LevSpacer":0, "arccolor" : "#006600"},
    {"label": "L3-F-1", "level": 2, "arcstart": 180, "arclen":  60, "LevSpacer":1, "arccolor" : "#338533"},
    {"label": "L3-F-1", "level": 2, "arcstart": 180, "arclen":  60, "LevSpacer":2, "arccolor" : "#5C9D5C"},

    {"label": "L3-F-2", "level": 2, "arcstart": 240, "arclen":  60, "LevSpacer":0, "arccolor" : "#990033"},
    {"label": "L3-F-2", "level": 2, "arcstart": 240, "arclen":  60, "LevSpacer":1, "arccolor" : "#AC3059"},
    {"label": "L3-F-2", "level": 2, "arcstart": 240, "arclen":  60, "LevSpacer":2, "arccolor" : "#BD597A"},

    {"label": "L3-F-3", "level": 2, "arcstart": 300, "arclen":  60, "LevSpacer":0, "arccolor" : "#3D3D5C"},
    {"label": "L3-F-3", "level": 2, "arcstart": 300, "arclen":  60, "LevSpacer":1, "arccolor" : "#64647D"},
    {"label": "L3-F-3", "level": 2, "arcstart": 300, "arclen":  60, "LevSpacer":2, "arccolor" :...