D3 and DC experiment #1

See external resources & run it.

by b_long

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://square.github.io/crossfilter/crossfilter.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<div class='bubble-graph span6' id='chart-bubble-performance'>
     <h5><center>Product Performance <a class="reset" href="javascript:chartBubblePerformance.filterAll();                dc.redrawAll();" style="display: none;"> reset</a></center></h5>                  
</div>
<div class='row-graph span6' id='chart-row-performance'>
     <h5><center>Impact By Product <a class="reset" href="javascript:chartRowPerformance.filterAll(); dc.redrawAll();" style="display: none;"> reset</a></center></h5>                            
</div>

JavaScript

var data = crossfilter([
  {
    "DefectID":"D1",
    "Impact":25,
    "Priority":"High",
    "WeekAge":113,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D2",
    "Impact":15,
    "Priority":"High",
    "WeekAge":113,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D3",
    "Impact":17,
    "Priority":"Medium",
    "WeekAge":113,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D4",
    "Impact":17,
    "Priority":"Medium",
    "WeekAge":113,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D5",
    "Impact":14,
    "Priority":"Medium",
    "WeekAge":113,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D6",
    "Impact":24,
    "Priority":"High",
    "WeekAge":112,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D7",
    "Impact":20,
    "Priority":"Medium",
    "WeekAge":112,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D8",
    "Impact":18,
    "Priority":"Medium",
    "WeekAge":112,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D9",
    "Impact":32,
    "Priority":"High",
    "WeekAge":112,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
    "Foreignness":"Native"
  },
  {
    "DefectID":"D10",
    "Impact":15,
    "Priority":"Medium",
    "WeekAge":112,
    "Name":"Product 1",
    "Timeliness":"Future",
    "Leaklessness":"Escaped",
   ...