Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 18, 2016 08:40
Show Gist options
  • Save anonymous/aa5a0c10fea48aaf4ece2c56f5e157bd to your computer and use it in GitHub Desktop.
Save anonymous/aa5a0c10fea48aaf4ece2c56f5e157bd to your computer and use it in GitHub Desktop.
Download ZIP
Crossfilter Examples Jazoon Crossfilter example 1: Dimensions // source http://jsbin.com/biruro
Raw
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 1: Dimensions" />
<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 1: Dimensions and group (by sum)
</div>
<div id="byCylinders" 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);
var byCylinders = cf.dimension(function(p) {
return p.cylinders;
});
// create a groups per number of cylinders
var groupByCylinders = byCylinders.group();
var visCylinders = d3.select("body")
.select("div#byCylinders")
.selectAll("div")
.data(groupByCylinders.top(Infinity)) // data: all elements inside group
.enter()
.append("div")
.text(function(d){
// group is 'key', 'value' depends on the reduce function (default: count)
return "Cars with " + d.key + " cylinders: " + d.value;
});
</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 1: Dimensions" />
<meta charset="utf-8">
<title>Crossfilter Examples</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="well">
<h1>Crossfilter example 1: Dimensions and group (by sum)
</div>
<div id="byCylinders" 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);
var byCylinders = cf.dimension(function(p) {
return p.cylinders;
});
// create a groups per number of cylinders
var groupByCylinders = byCylinders.group();
var visCylinders = d3.select("body")
.select("div#byCylinders")
.selectAll("div")
.data(groupByCylinders.top(Infinity)) // data: all elements inside group
.enter()
.append("div")
.text(function(d){
// group is 'key', 'value' depends on the reduce function (default: count)
return "Cars with " + d.key + " cylinders: " + d.value;
});
</script></body>
</html>
Raw
jsbin.biruro.css
circle {
fill-opacity: .1;
stroke: #000;
}
Raw
jsbin.biruro.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);
var byCylinders = cf.dimension(function(p) {
return p.cylinders;
});
// create a groups per number of cylinders
var groupByCylinders = byCylinders.group();
var visCylinders = d3.select("body")
.select("div#byCylinders")
.selectAll("div")
.data(groupByCylinders.top(Infinity)) // data: all elements inside group
.enter()
.append("div")
.text(function(d){
// group is 'key', 'value' depends on the reduce function (default: count)
return "Cars with " + d.key + " cylinders: " + d.value;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment