Skip to content

Instantly share code, notes, and snippets.

@gordonwoodhull

gordonwoodhull/.block

Last active December 16, 2016 04:47
Show Gist options
  • Save gordonwoodhull/14c623b95993808d69620563508edba6 to your computer and use it in GitHub Desktop.
Save gordonwoodhull/14c623b95993808d69620563508edba6 to your computer and use it in GitHub Desktop.
Download ZIP
iris bubble chart vs heatmap
Raw
.block
license: apache-2.0
height: 900
scrolling: yes
Raw
README.md

Iris bubble chart & heatmap

This rather excessive and useless visualization is intended for a test case of dc.js issues #1032 and #1237.

Seriously, don't do this. Use scatter plots.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<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://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
<style>
body {
font-family: sans-serif;
}
.dc-chart circle.bubble {
fill-opacity: 0.8;
}
.dc-chart rect.heat-box {
fill-opacity: 0.8;
}
</style>
</head>
<body>
<h1>Straight Crossfilter</h1>
<div id="bubble-cf">
<h3>Sepal Width vs Length</h3>
</div>
<div id="heatmap-cf">
<h3>Petal Width vs Length</h3>
</div>
<hr style="clear: both">
<h1>Crossfilter with Cloning</h1>
<div id="heatmap-clone">
<h3>Petal vs Sepal Width</h3>
</div>
<div id="bubble-clone">
<h3>Petal vs Sepal Length</h3>
</div>
<script src="iris-bubble-heat.js"></script>
</body>
Raw
iris-bubble-heat.js
var bubbleCF = dc.bubbleChart('#bubble-cf'),
heatCF = dc.heatMap('#heatmap-cf'),
heatClone = dc.heatMap('#heatmap-clone'),
bubbleClone = dc.bubbleChart('#bubble-clone');
d3.csv('iris.csv', function(error, iris) {
var fields = {
sl: 'sepal_length',
sw: 'sepal_width',
pl: 'petal_length',
pw: 'petal_width'
};
var species = ['setosa', 'versicolor', 'virginica'];
iris.forEach(function(d) {
Object.keys(fields).forEach(function(ab) {
d[fields[ab]] = +d[fields[ab]];
});
});
// autogenerate a key function for an extent
function key_function(extent) {
var div = extent[1]-extent[0] < 5 ? 2 : 1;
return function(k) {
return Math.floor(k*div)/div;
};
}
var extents = {};
var keyfuncs = {};
Object.keys(fields).forEach(function(ab) {
extents[ab] = d3.extent(iris, function(d) { return d[fields[ab]]; });
keyfuncs[ab] = key_function(extents[ab]);
});
var cf = crossfilter(iris);
function duo_key(ab1, ab2) {
return function(d) {
return [keyfuncs[ab1](d[fields[ab1]]), keyfuncs[ab2](d[fields[ab2]])];
};
}
function key_part(i) {
return function(kv) {
return kv.key[i];
};
}
function reduce_species(group) {
group.reduce(
function(p, v) {
p[v.species]++;
p.total++;
return p;
}, function(p, v) {
p[v.species]--;
p.total--;
return p;
}, function() {
var init = {total: 0};
species.forEach(function(s) { init[s] = 0; });
return init;
}
);
}
function max_species(d) {
var max = 0, i = -1;
species.forEach(function(s, j) {
if(d.value[s] > max) {
max = d.value[s];
i = j;
}
});
return i >= 0 ? species[i] : null;
}
function initialize_bubble(bubbleChart, dim, group) {
bubbleChart
.width(400)
.height(400)
.x(d3.scale.linear()).xAxisPadding(0.5)
.y(d3.scale.linear()).yAxisPadding(0.5)
.elasticX(true)
.elasticY(true)
.label(d3.functor(''))
.keyAccessor(key_part(0))
.valueAccessor(key_part(1))
.radiusValueAccessor(function(kv) { return kv.value.total; })
.colors(d3.scale.ordinal()
.domain(species.concat('none'))
.range(['#e41a1c','#377eb8','#4daf4a', '#bbb']))
.colorAccessor(function(d) {
return max_species(d) || 'none';
});
}
function initialize_heatmap(heatMap) {
heatMap
.width(400)
.height(400)
.xBorderRadius(15).yBorderRadius(15)
.keyAccessor(key_part(0))
.valueAccessor(key_part(1))
.colors(d3.scale.ordinal()
.domain(species.concat('none'))
.range(['#e41a1c','#377eb8','#4daf4a', '#bbb']))
.colorAccessor(function(d) {
return max_species(d) || 'none';
});
}
var sepalDim = cf.dimension(duo_key('sl', 'sw')), sepalGroup = sepalDim.group(),
petalDim = cf.dimension(duo_key('pl', 'pw')), petalGroup = petalDim.group();
reduce_species(sepalGroup);
reduce_species(petalGroup);
initialize_bubble(bubbleCF.dimension(sepalDim).group(sepalGroup));
initialize_heatmap(heatCF.dimension(petalDim).group(petalGroup));
// return brand-new objects and keys every time
function clone_group(group) {
function clone_kvs(all) {
return all.map(function(kv) {
return {
key: kv.key.slice(0),
value: Object.assign({}, kv.value)
};
});
}
return {
all: function() {
return clone_kvs(group.all());
},
top: function(N) {
return clone_kvs(group.top(N));
}
};
}
var lengthDim = cf.dimension(duo_key('sl', 'pl')), lengthGroup = lengthDim.group(),
widthDim = cf.dimension(duo_key('sw', 'pw')), widthGroup = widthDim.group();
reduce_species(widthGroup);
reduce_species(lengthGroup);
initialize_heatmap(heatClone.dimension(widthDim).group(clone_group(widthGroup)));
initialize_bubble(bubbleClone.dimension(lengthDim).group(clone_group(lengthGroup)));
dc.renderAll();
});
Raw
iris.csv
sepal_length sepal_width petal_length petal_width species
5.1 3.5 1.4 0.2 setosa
4.9 3 1.4 0.2 setosa
4.7 3.2 1.3 0.2 setosa
4.6 3.1 1.5 0.2 setosa
5 3.6 1.4 0.2 setosa
5.4 3.9 1.7 0.4 setosa
4.6 3.4 1.4 0.3 setosa
5 3.4 1.5 0.2 setosa
4.4 2.9 1.4 0.2 setosa
4.9 3.1 1.5 0.1 setosa
5.4 3.7 1.5 0.2 setosa
4.8 3.4 1.6 0.2 setosa
4.8 3 1.4 0.1 setosa
4.3 3 1.1 0.1 setosa
5.8 4 1.2 0.2 setosa
5.7 4.4 1.5 0.4 setosa
5.4 3.9 1.3 0.4 setosa
5.1 3.5 1.4 0.3 setosa
5.7 3.8 1.7 0.3 setosa
5.1 3.8 1.5 0.3 setosa
5.4 3.4 1.7 0.2 setosa
5.1 3.7 1.5 0.4 setosa
4.6 3.6 1 0.2 setosa
5.1 3.3 1.7 0.5 setosa
4.8 3.4 1.9 0.2 setosa
5 3 1.6 0.2 setosa
5 3.4 1.6 0.4 setosa
5.2 3.5 1.5 0.2 setosa
5.2 3.4 1.4 0.2 setosa
4.7 3.2 1.6 0.2 setosa
4.8 3.1 1.6 0.2 setosa
5.4 3.4 1.5 0.4 setosa
5.2 4.1 1.5 0.1 setosa
5.5 4.2 1.4 0.2 setosa
4.9 3.1 1.5 0.1 setosa
5 3.2 1.2 0.2 setosa
5.5 3.5 1.3 0.2 setosa
4.9 3.1 1.5 0.1 setosa
4.4 3 1.3 0.2 setosa
5.1 3.4 1.5 0.2 setosa
5 3.5 1.3 0.3 setosa
4.5 2.3 1.3 0.3 setosa
4.4 3.2 1.3 0.2 setosa
5 3.5 1.6 0.6 setosa
5.1 3.8 1.9 0.4 setosa
4.8 3 1.4 0.3 setosa
5.1 3.8 1.6 0.2 setosa
4.6 3.2 1.4 0.2 setosa
5.3 3.7 1.5 0.2 setosa
5 3.3 1.4 0.2 setosa
7 3.2 4.7 1.4 versicolor
6.4 3.2 4.5 1.5 versicolor
6.9 3.1 4.9 1.5 versicolor
5.5 2.3 4 1.3 versicolor
6.5 2.8 4.6 1.5 versicolor
5.7 2.8 4.5 1.3 versicolor
6.3 3.3 4.7 1.6 versicolor
4.9 2.4 3.3 1 versicolor
6.6 2.9 4.6 1.3 versicolor
5.2 2.7 3.9 1.4 versicolor
5 2 3.5 1 versicolor
5.9 3 4.2 1.5 versicolor
6 2.2 4 1 versicolor
6.1 2.9 4.7 1.4 versicolor
5.6 2.9 3.6 1.3 versicolor
6.7 3.1 4.4 1.4 versicolor
5.6 3 4.5 1.5 versicolor
5.8 2.7 4.1 1 versicolor
6.2 2.2 4.5 1.5 versicolor
5.6 2.5 3.9 1.1 versicolor
5.9 3.2 4.8 1.8 versicolor
6.1 2.8 4 1.3 versicolor
6.3 2.5 4.9 1.5 versicolor
6.1 2.8 4.7 1.2 versicolor
6.4 2.9 4.3 1.3 versicolor
6.6 3 4.4 1.4 versicolor
6.8 2.8 4.8 1.4 versicolor
6.7 3 5 1.7 versicolor
6 2.9 4.5 1.5 versicolor
5.7 2.6 3.5 1 versicolor
5.5 2.4 3.8 1.1 versicolor
5.5 2.4 3.7 1 versicolor
5.8 2.7 3.9 1.2 versicolor
6 2.7 5.1 1.6 versicolor
5.4 3 4.5 1.5 versicolor
6 3.4 4.5 1.6 versicolor
6.7 3.1 4.7 1.5 versicolor
6.3 2.3 4.4 1.3 versicolor
5.6 3 4.1 1.3 versicolor
5.5 2.5 4 1.3 versicolor
5.5 2.6 4.4 1.2 versicolor
6.1 3 4.6 1.4 versicolor
5.8 2.6 4 1.2 versicolor
5 2.3 3.3 1 versicolor
5.6 2.7 4.2 1.3 versicolor
5.7 3 4.2 1.2 versicolor
5.7 2.9 4.2 1.3 versicolor
6.2 2.9 4.3 1.3 versicolor
5.1 2.5 3 1.1 versicolor
5.7 2.8 4.1 1.3 versicolor
6.3 3.3 6 2.5 virginica
5.8 2.7 5.1 1.9 virginica
7.1 3 5.9 2.1 virginica
6.3 2.9 5.6 1.8 virginica
6.5 3 5.8 2.2 virginica
7.6 3 6.6 2.1 virginica
4.9 2.5 4.5 1.7 virginica
7.3 2.9 6.3 1.8 virginica
6.7 2.5 5.8 1.8 virginica
7.2 3.6 6.1 2.5 virginica
6.5 3.2 5.1 2 virginica
6.4 2.7 5.3 1.9 virginica
6.8 3 5.5 2.1 virginica
5.7 2.5 5 2 virginica
5.8 2.8 5.1 2.4 virginica
6.4 3.2 5.3 2.3 virginica
6.5 3 5.5 1.8 virginica
7.7 3.8 6.7 2.2 virginica
7.7 2.6 6.9 2.3 virginica
6 2.2 5 1.5 virginica
6.9 3.2 5.7 2.3 virginica
5.6 2.8 4.9 2 virginica
7.7 2.8 6.7 2 virginica
6.3 2.7 4.9 1.8 virginica
6.7 3.3 5.7 2.1 virginica
7.2 3.2 6 1.8 virginica
6.2 2.8 4.8 1.8 virginica
6.1 3 4.9 1.8 virginica
6.4 2.8 5.6 2.1 virginica
7.2 3 5.8 1.6 virginica
7.4 2.8 6.1 1.9 virginica
7.9 3.8 6.4 2 virginica
6.4 2.8 5.6 2.2 virginica
6.3 2.8 5.1 1.5 virginica
6.1 2.6 5.6 1.4 virginica
7.7 3 6.1 2.3 virginica
6.3 3.4 5.6 2.4 virginica
6.4 3.1 5.5 1.8 virginica
6 3 4.8 1.8 virginica
6.9 3.1 5.4 2.1 virginica
6.7 3.1 5.6 2.4 virginica
6.9 3.1 5.1 2.3 virginica
5.8 2.7 5.1 1.9 virginica
6.8 3.2 5.9 2.3 virginica
6.7 3.3 5.7 2.5 virginica
6.7 3 5.2 2.3 virginica
6.3 2.5 5 1.9 virginica
6.5 3 5.2 2 virginica
6.2 3.4 5.4 2.3 virginica
5.9 3 5.1 1.8 virginica
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment