D3 Examples - dc/crossfilter simple

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Line Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
    <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
    <script src="https://npmcdn.com/universe@latest/universe.js"></script>
    <style>
    </style>
</head>
​
  
<body>
  
<div class="container">
<script type="text/javascript" src="header.js"></script>
<div id="test"></div>
  
<div id="chart-ring-year" style="width:300px; height:300px"></div>
<div id="chart-hist-spend" style="width:300px; height:300px"></div>
<div id="chart-row-spenders"></div>
​
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js">#
  
</script>
<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script type="text/javascript">
​
  
  
    var yearRingChart   = dc.pieChart("#chart-ring-year");
    var spendHistChart  = dc.barChart("#chart-hist-spend");
    var spenderRowChart = dc.rowChart("#chart-row-spenders");
    var chart = dc.lineChart("#test");
​
  d3.csv("data.csv", function(error, experiments) {
  experiments.forEach(function(x) {
    x.Speed = +x.Speed;
  });
  var ndx                 = crossfilter(experiments),
      runDimension        = ndx.dimension(function(d) {return +d.Run;}),
      speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed;});
  chart
    .width(700)
    .height(200)
    .x(d3.scale.linear().domain([0,20]))
    .interpolate('step-before')
    .renderArea(true)
    .brushOn(false)
    .renderDataPoints(true)
    .clipPadding(10)
    .xAxisLabel("X")
    .yAxisLabel("Y")
    .dimension(runDimension)
    .group(speedSumGroup);
  chart.render();
    
  
});
  
 
  d3.csv('data.csv',function(data) {
      var cf = crossfilter(data);
      console.log(cf.size());
      console.log(data);
      var yearDim  = cf.dimension(function(d) {return +d.Year;});
      var spendDim = cf.dimension(function(d) {return +d.Spent;});
      var nameDim  = cf.dimension(function(d) {return d.Name;});
      
        var spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;});
        var spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});
        var spendHist    = spendDim.group().reduceCount();
      
      console.log(yearDim);
      
            yearRingChart
        .dimension(yearDim)
        .group(spendPerYear)
        .innerRadius(40);
      
        spendHistChart
        .dimension(spendDim)
        .group(spendHist)
        .x(d3.scale.linear().domain([0,60]))
        .elasticY(true);
      
      spenderRowChart
        .dimension(nameDim)
        .group(spendPerName)
        .elasticX(true);
      
      spendHistChart.yAxis().ticks(10);
      
      dc.renderAll();
    
    });
  
  
</script>
​
</div>
</body>
</html>
    