ackuser/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>


<meta name="description" content="Jazoon Crossfilter example 3: Custom reduce functions" />
<meta charset="utf-8">
<title>Crossfilter Examples</title>


<style id="jsbin-css">
circle {
  fill-opacity: .1;
  stroke: #000;
}
</style>
</head>
<body>

    <div class="container">
    <div class="row">
      <div class="well">
        <h1>Crossfilter example 3: Custom reduce function
      </div>

      <div id="result" class="col-md-4 well"></div>
    </div>
  </div>
<script id="jsbin-javascript">
var csv = "name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year\n" +
  "AMC Ambassador Brougham,13,8,360,175,3821,11,73\n" +
  "AMC Ambassador DPL,15,8,390,190,3850,8.5,70\n" +
  "AMC Ambassador SST,17,8,304,150,3672,11.5,72\n" +
  "AMC Concord DL 6,20.2,6,232,90,3265,18.2,79\n" +
  "AMC Concord DL,18.1,6,258,120,3410,15.1,78\n" +
  "Audi Fox,29,4,98,83,2219,16.5,74\n" +
  "BMW 2002,26,4,121,113,2234,12.5,70\n" +
  "BMW 320i,21.5,4,121,110,2600,12.8,77\n" +
  "Buick Century 350,13,8,350,175,4100,13,73\n" +
  "Buick Century Limited,25,6,181,110,2945,16.4,82\n" +
  "Chrysler Newport Royal,13,8,400,190,4422,12.5,72\n" +
  "Citroen DS-21 Pallas,6,4,133,115,3090,17.5,70\n" +
  "Datsun 1200,35,4,72,69,1613,18,71";


var data = d3.csv.parse(csv);

var cf = crossfilter(data);

// simple dimension for unique car model names
var byName = cf.dimension(function(p) {
          return p.name;
      });


var groupByMeanPower =
    // MAP: create a group ("bin") per brand name (e.g. "BMW")
    byName
    .group( function (d){
       return d.substring (0, d.indexOf (" "));
    })
    // REDUCE: incrementally calculate average power inside each group)
    .reduce (
      // add
      function (p,v){
        p.totalPower += +v["power (hp)"];
        p.count++;
        p.avg = (p.totalPower / p.count);
        return p;
      },
      // remove
      function (p,v){
        p.totalPower -= +v["power (hp)"];
        p.count--;
        p.avg = (p.totalPower / p.count);
        return p;
      },
      // init
      function init (){
        return {
          totalPower: 0,
          count: 0,
          avg: 0
        };
      }
     )
     // order group using the resulting average from the reduce step
     .order (function (d){return d.avg;});


var resultData = groupByMeanPower.top(Infinity);


var result = d3.select("body")
          .select("div#result")
          .selectAll("div")
          .data(resultData);

result.enter()
  .append("div")
  .text(function(d){
              return d.key + " cars have average power of " + (d.value.avg) + " ";
    });
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"><\/script>

<script src="http://d3js.org/d3.v3.min.js"><\/script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"><\/script>


<meta name="description" content="Jazoon Crossfilter example 3: Custom reduce functions" />
<meta charset="utf-8">
<title>Crossfilter Examples</title>


</head>
<body>

    <div class="container">
    <div class="row">
      <div class="well">
        <h1>Crossfilter example 3: Custom reduce function
      </div>

      <div id="result" class="col-md-4 well"></div>
    </div>
  </div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">circle {
  fill-opacity: .1;
  stroke: #000;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var csv = "name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year\n" +
  "AMC Ambassador Brougham,13,8,360,175,3821,11,73\n" +
  "AMC Ambassador DPL,15,8,390,190,3850,8.5,70\n" +
  "AMC Ambassador SST,17,8,304,150,3672,11.5,72\n" +
  "AMC Concord DL 6,20.2,6,232,90,3265,18.2,79\n" +
  "AMC Concord DL,18.1,6,258,120,3410,15.1,78\n" +
  "Audi Fox,29,4,98,83,2219,16.5,74\n" +
  "BMW 2002,26,4,121,113,2234,12.5,70\n" +
  "BMW 320i,21.5,4,121,110,2600,12.8,77\n" +
  "Buick Century 350,13,8,350,175,4100,13,73\n" +
  "Buick Century Limited,25,6,181,110,2945,16.4,82\n" +
  "Chrysler Newport Royal,13,8,400,190,4422,12.5,72\n" +
  "Citroen DS-21 Pallas,6,4,133,115,3090,17.5,70\n" +
  "Datsun 1200,35,4,72,69,1613,18,71";


var data = d3.csv.parse(csv);

var cf = crossfilter(data);

// simple dimension for unique car model names
var byName = cf.dimension(function(p) {
          return p.name;
      });


var groupByMeanPower =
    // MAP: create a group ("bin") per brand name (e.g. "BMW")
    byName
    .group( function (d){
       return d.substring (0, d.indexOf (" "));
    })
    // REDUCE: incrementally calculate average power inside each group)
    .reduce (
      // add
      function (p,v){
        p.totalPower += +v["power (hp)"];
        p.count++;
        p.avg = (p.totalPower / p.count);
        return p;
      },
      // remove
      function (p,v){
        p.totalPower -= +v["power (hp)"];
        p.count--;
        p.avg = (p.totalPower / p.count);
        return p;
      },
      // init
      function init (){
        return {
          totalPower: 0,
          count: 0,
          avg: 0
        };
      }
     )
     // order group using the resulting average from the reduce step
     .order (function (d){return d.avg;});


var resultData = groupByMeanPower.top(Infinity);


var result = d3.select("body")
          .select("div#result")
          .selectAll("div")
          .data(resultData);

result.enter()
  .append("div")
  .text(function(d){
              return d.key + " cars have average power of " + (d.value.avg) + " ";
    });</script></body>
</html>

## jsbin.pubaz.css
circle {
  fill-opacity: .1;
  stroke: #000;
}

## jsbin.pubaz.js
var csv = "name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year\n" +
  "AMC Ambassador Brougham,13,8,360,175,3821,11,73\n" +
  "AMC Ambassador DPL,15,8,390,190,3850,8.5,70\n" +
  "AMC Ambassador SST,17,8,304,150,3672,11.5,72\n" +
  "AMC Concord DL 6,20.2,6,232,90,3265,18.2,79\n" +
  "AMC Concord DL,18.1,6,258,120,3410,15.1,78\n" +
  "Audi Fox,29,4,98,83,2219,16.5,74\n" +
  "BMW 2002,26,4,121,113,2234,12.5,70\n" +
  "BMW 320i,21.5,4,121,110,2600,12.8,77\n" +
  "Buick Century 350,13,8,350,175,4100,13,73\n" +
  "Buick Century Limited,25,6,181,110,2945,16.4,82\n" +
  "Chrysler Newport Royal,13,8,400,190,4422,12.5,72\n" +
  "Citroen DS-21 Pallas,6,4,133,115,3090,17.5,70\n" +
  "Datsun 1200,35,4,72,69,1613,18,71";


var data = d3.csv.parse(csv);

var cf = crossfilter(data);

// simple dimension for unique car model names
var byName = cf.dimension(function(p) {
          return p.name;
      });


var groupByMeanPower =
    // MAP: create a group ("bin") per brand name (e.g. "BMW")
    byName
    .group( function (d){
       return d.substring (0, d.indexOf (" "));
    })
    // REDUCE: incrementally calculate average power inside each group)
    .reduce (
      // add
      function (p,v){
        p.totalPower += +v["power (hp)"];
        p.count++;
        p.avg = (p.totalPower / p.count);
        return p;
      },
      // remove
      function (p,v){
        p.totalPower -= +v["power (hp)"];
        p.count--;
        p.avg = (p.totalPower / p.count);
        return p;
      },
      // init
      function init (){
        return {
          totalPower: 0,
          count: 0,
          avg: 0
        };
      }
     )
     // order group using the resulting average from the reduce step
     .order (function (d){return d.avg;});


var resultData = groupByMeanPower.top(Infinity);


var result = d3.select("body")
          .select("div#result")
          .selectAll("div")
          .data(resultData);

result.enter()
  .append("div")
  .text(function(d){
              return d.key + " cars have average power of " + (d.value.avg) + " ";
    });
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>


	<meta name="description" content="Jazoon Crossfilter example 3: Custom reduce functions" />
	<meta charset="utf-8">
	<title>Crossfilter Examples</title>


	<style id="jsbin-css">
	circle {
	fill-opacity: .1;
	stroke: #000;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<div class="row">
	<div class="well">
	<h1>Crossfilter example 3: Custom reduce function
	</div>

	<div id="result" class="col-md-4 well"></div>
	</div>
	</div>
	<script id="jsbin-javascript">
	var csv = "name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year\n" +
	"AMC Ambassador Brougham,13,8,360,175,3821,11,73\n" +
	"AMC Ambassador DPL,15,8,390,190,3850,8.5,70\n" +
	"AMC Ambassador SST,17,8,304,150,3672,11.5,72\n" +
	"AMC Concord DL 6,20.2,6,232,90,3265,18.2,79\n" +
	"AMC Concord DL,18.1,6,258,120,3410,15.1,78\n" +
	"Audi Fox,29,4,98,83,2219,16.5,74\n" +
	"BMW 2002,26,4,121,113,2234,12.5,70\n" +
	"BMW 320i,21.5,4,121,110,2600,12.8,77\n" +
	"Buick Century 350,13,8,350,175,4100,13,73\n" +
	"Buick Century Limited,25,6,181,110,2945,16.4,82\n" +
	"Chrysler Newport Royal,13,8,400,190,4422,12.5,72\n" +
	"Citroen DS-21 Pallas,6,4,133,115,3090,17.5,70\n" +
	"Datsun 1200,35,4,72,69,1613,18,71";


	var data = d3.csv.parse(csv);

	var cf = crossfilter(data);

	// simple dimension for unique car model names
	var byName = cf.dimension(function(p) {
	return p.name;
	});


	var groupByMeanPower =
	// MAP: create a group ("bin") per brand name (e.g. "BMW")
	byName
	.group( function (d){
	return d.substring (0, d.indexOf (" "));
	})
	// REDUCE: incrementally calculate average power inside each group)
	.reduce (
	// add
	function (p,v){
	p.totalPower += +v["power (hp)"];
	p.count++;
	p.avg = (p.totalPower / p.count);
	return p;
	},
	// remove
	function (p,v){
	p.totalPower -= +v["power (hp)"];
	p.count--;
	p.avg = (p.totalPower / p.count);
	return p;
	},
	// init
	function init (){
	return {
	totalPower: 0,
	count: 0,
	avg: 0
	};
	}
	)
	// order group using the resulting average from the reduce step
	.order (function (d){return d.avg;});


	var resultData = groupByMeanPower.top(Infinity);


	var result = d3.select("body")
	.select("div#result")
	.selectAll("div")
	.data(resultData);

	result.enter()
	.append("div")
	.text(function(d){
	return d.key + " cars have average power of " + (d.value.avg) + " ";
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery.min.js"><\/script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"><\/script>

	<script src="http://d3js.org/d3.v3.min.js"><\/script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"><\/script>


	<meta name="description" content="Jazoon Crossfilter example 3: Custom reduce functions" />
	<meta charset="utf-8">
	<title>Crossfilter Examples</title>


	</head>
	<body>

	<div class="container">
	<div class="row">
	<div class="well">
	<h1>Crossfilter example 3: Custom reduce function
	</div>

	<div id="result" class="col-md-4 well"></div>
	</div>
	</div>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">circle {
	fill-opacity: .1;
	stroke: #000;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var csv = "name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year\n" +
	"AMC Ambassador Brougham,13,8,360,175,3821,11,73\n" +
	"AMC Ambassador DPL,15,8,390,190,3850,8.5,70\n" +
	"AMC Ambassador SST,17,8,304,150,3672,11.5,72\n" +
	"AMC Concord DL 6,20.2,6,232,90,3265,18.2,79\n" +
	"AMC Concord DL,18.1,6,258,120,3410,15.1,78\n" +
	"Audi Fox,29,4,98,83,2219,16.5,74\n" +
	"BMW 2002,26,4,121,113,2234,12.5,70\n" +
	"BMW 320i,21.5,4,121,110,2600,12.8,77\n" +
	"Buick Century 350,13,8,350,175,4100,13,73\n" +
	"Buick Century Limited,25,6,181,110,2945,16.4,82\n" +
	"Chrysler Newport Royal,13,8,400,190,4422,12.5,72\n" +
	"Citroen DS-21 Pallas,6,4,133,115,3090,17.5,70\n" +
	"Datsun 1200,35,4,72,69,1613,18,71";


	var data = d3.csv.parse(csv);

	var cf = crossfilter(data);

	// simple dimension for unique car model names
	var byName = cf.dimension(function(p) {
	return p.name;
	});


	var groupByMeanPower =
	// MAP: create a group ("bin") per brand name (e.g. "BMW")
	byName
	.group( function (d){
	return d.substring (0, d.indexOf (" "));
	})
	// REDUCE: incrementally calculate average power inside each group)
	.reduce (
	// add
	function (p,v){
	p.totalPower += +v["power (hp)"];
	p.count++;
	p.avg = (p.totalPower / p.count);
	return p;
	},
	// remove
	function (p,v){
	p.totalPower -= +v["power (hp)"];
	p.count--;
	p.avg = (p.totalPower / p.count);
	return p;
	},
	// init
	function init (){
	return {
	totalPower: 0,
	count: 0,
	avg: 0
	};
	}
	)
	// order group using the resulting average from the reduce step
	.order (function (d){return d.avg;});


	var resultData = groupByMeanPower.top(Infinity);


	var result = d3.select("body")
	.select("div#result")
	.selectAll("div")
	.data(resultData);

	result.enter()
	.append("div")
	.text(function(d){
	return d.key + " cars have average power of " + (d.value.avg) + " ";
	});</script></body>
	</html>