Built with blockbuilder.org
forked from devgru's block: Fire Reports — bare
license: mit |
Built with blockbuilder.org
forked from devgru's block: Fire Reports — bare
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { | |
width: 600px; | |
height: 450px; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var url = "http://d3-js.ru/data/fire-calls.json" | |
d3.json(url, function (data) { | |
var ordinal = d3.scaleOrdinal() | |
.range(d3.range(9)) | |
var color = d3.scaleSequential(d3.interpolateYlOrRd) | |
var minYear = d3.min(data, function (d) { | |
return d.year | |
}) | |
var maxCalls = d3.max(data, function (d) { | |
return d.calls | |
}) | |
color.domain([0, maxCalls]) | |
d3.select('body') | |
.append('svg') | |
.selectAll('rect') | |
.data(data) | |
.enter() | |
.append('rect') | |
.attr('x', function (d) { | |
return ((d.year - minYear) * 12 + d.month - 1) * 20 | |
}) | |
.attr('y', function (d) { | |
return ordinal(d.area) * 20 | |
}) | |
.attr('width', 20) | |
.attr('height', 20) | |
.style('fill', function (d) { | |
return color(d.calls) | |
}) | |
}) | |
</script> | |
</body> |