Skip to content

Instantly share code, notes, and snippets.

@devgru

devgru/.block

Last active October 9, 2016 08:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devgru/0b769be298c3c28d8e6eb9e4184d40e2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devgru/0b769be298c3c28d8e6eb9e4184d40e2 to your computer and use it in GitHub Desktop.
Download ZIP
Fire Reports — bare
Raw
.block
license: mit
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment