Skip to content

Instantly share code, notes, and snippets.

@fabid fabid/README.md
Last active Mar 2, 2016

Embed
What would you like to do?
d3-heatmap
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdn.rawgit.com/fabid/d3-heatmap/master/heatmap.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var margin = {
top: 0,
right: 0,
bottom: 0,
left: 0
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var randomX = d3.random.normal(width / 2, 80),
randomY = d3.random.normal(height / 2, 80),
points = d3.range(1000).map(function() {
return [randomX(), randomY()];
});
console.log(points);
var size = 4;
var heatmap = d3.heatmap()
.std(5)
.dx(size)
.dy(size);
// the result of the heatmap layout
var heatmapData = heatmap(points);
var color = d3.scale.linear()
.domain([0, d3.max(heatmapData, function(d) {
return d.v;
})])
.range(["white", "steelblue"])
.interpolate(d3.interpolateLab);
var x = d3.scale.identity()
.domain([0, width]);
var y = d3.scale.linear()
.domain([0, height])
.range([height, 0]);
var yinv = d3.scale.linear()
.domain([height, 0])
.range([height, 0]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.selectAll(".square")
.data(heatmapData)
.enter().append("rect")
.attr("class", "square")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y) - yinv(size); })
.attr("width", x(size))
.attr("height", yinv(size))
.style("fill", function(d) {
return color(d.v)
})
.style("stroke", "none");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.