src/visual-data.js
function() {

            var self = this;

            var panel =
'<div class="panel panel-success">' +
'  <div class="panel-heading">' +
'    visual data dashboard mockups' +
'  </div>' +
'  <div class="panel-body">' +
'    <div class="row">' +
// the visual chart.
'      <div class="col-md-8">' +
'        <div id="' + self.getId('chart') + '">Charts</div>' +
'      </div>' +
// the information column
'      <div class="col-md-4">' +
'        <div id="' + self.getId('summary') + '">Summary</div>' +
'      </div>' +
'    </div>' +
'  </div>' +
'  <div class="panel-footer">' +
'    visual data footer mockups' +
'  </div>' +
'</div>';

            $('#' + self.attrId).html(panel);

            // Draw the chart,
            $('#' + self.getId('chart')).html('')
              .bilevelSunburst({date: self.options.date},
                               self.treemapData);
        }
function() {

            var self = this;

            var panel =
'<div class="panel panel-success">' +
'  <div class="panel-heading">' +
'    visual data dashboard mockups' +
'  </div>' +
'  <div class="panel-body">' +
'    <div class="row">' +
// the visual chart.
'      <div class="col-md-8">' +
'        <div id="' + self.getId('chart') + '">Charts</div>' +
'      </div>' +
// the information column
'      <div class="col-md-4">' +
'        <div id="' + self.getId('summary') + '">Summary</div>' +
'      </div>' +
'    </div>' +
'  </div>' +
'  <div class="panel-footer">' +
'    visual data footer mockups' +
'  </div>' +
'</div>';

            $('#' + self.attrId).html(panel);

            // Draw the chart,
            $('#' + self.getId('chart')).html('')
              .bilevelSunburst({date: self.options.date},
                               self.treemapData);
        }
function ( ) { var self = this ; var panel = '<div class="panel panel-success">' + '  <div class="panel-heading">' + '    visual data dashboard mockups' + '  </div>' + '  <div class="panel-body">' + '    <div class="row">' + // the visual chart. '      <div class="col-md-8">' + '        <div id="' + self . getId ( 'chart' ) + '">Charts</div>' + '      </div>' + // the information column '      <div class="col-md-4">' + '        <div id="' + self . getId ( 'summary' ) + '">Summary</div>' + '      </div>' + '    </div>' + '  </div>' + '  <div class="panel-footer">' + '    visual data footer mockups' + '  </div>' + '</div>' ; $ ( '#' + self . attrId ) . html ( panel ) ; // Draw the chart, $ ( '#' + self . getId ( 'chart' ) ) . html ( '' ) . bilevelSunburst ( { date : self . options . date } , self . treemapData ) ; }
build the panel as dashboard.
Where is data from?

build the chart, using corresponding jQuery plugins
create the summary

FIXME: panel class NOT working well with z-index.
panel class seems overlap the z-index most time.
build the panel as dashboard . Where is data from?