D3 Demo

by TomUnderhill

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="svgcontainer"></div>

CSS

#svgcontainer {
    width:600px;
    text-align:center;
}

svg .group {
    stroke-width: 1;
    stroke:#555;
    fill:#FEFEFE;
}

svg .group_headings {
    font-size:12px;
    font-family:Tahoma;
}

svg .node_prev_rect {
    fill:white;
    stroke-width:1;
    stroke:#000;
    stroke-dasharray:3,3;
    opacity:0.6;
}

svg .node_prev_text {
    font-size:9px;
    font-family:Tahoma;
    opacity:0.6;
}

svg .node_cur_rect {
    stroke-width:1;
    stroke:#000;
}

svg .node_cur_text {
    font-size:9px;
    font-family:Tahoma;    
}

svg .arrowhead {
    refX:6;
}

JavaScript

//-----------------------------------------------------------------------------------------
// The following 2 code blocks are generating and sorting some data for us for the purpose
// of this demo. These code blocks do not need to be added to OBIEE as the narrative view
// will be generating real data for us
//-----------------------------------------------------------------------------------------

// Create some random data - this should normally be generated from OBIEE
var data = [];
for (i = 1; i <= 20; i++) {
    var cur_group = Math.floor(1 + Math.random() * 4);
    var prev_group = Math.floor(1 + Math.random() * 4);
    var delta = prev_group - cur_group;
    data.push({
        customer: "Customer " + i,
        cur_group: cur_group,
        prev_group: prev_group,
        delta: delta
    });
}

// Sort the random data by the current group - when run from within OBIEE the sorting will be
// controlled by any sorts you define in your answers criteria.
data.sort(function (a, b) {
    if (a.cur_group > b.cur_group) return 1;
    else if (a.cur_group < b.cur_group) return -1;
    else return 0;
});

//----------------------------------------------------------------------------
// Everthing from this point onwards would be placed in the "postfix" section
// of the OBIEE narrative view
//----------------------------------------------------------------------------

// generate some data for our background group rect's
var groupCount = 4;
var groups = [];
for (var i = 1; i <= groupCount; i++) {
    groups.push(i);
}

// Declarations
var paddingTop = 30;
var nodeRectHeight = 14;
var verticalPadding = 3;
var h = (data.length + 1) * (nodeRectHeight + verticalPadding + 1) + paddingTop;

var w = 550;
var nodeRectWidthPadding = 30;
var nodeRectWidth = ((w / groupCount) - nodeRectWidthPadding);

// Append svg, this will contain our D3 visualisation
var svg = d3.select("#svgcontainer")
    .append("svg")
    .attr("width", w + 1)
    .attr("height", h);

// Add...