hr-region counts

_.md

[ Launch: hr-region counts ] ebb3021fc534f00c546e by poezn

config.json

{"description":"hr-region counts","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":true}

data.json

[
	{"hr-region":"North Coast","count":1},
	{"hr-region":"San Francisco Bay","count":7},
	{"hr-region":"Central Coast","count":14},
	{"hr-region":"South Coast","count":52},
	{"hr-region":"Sacramento River","count":8},
	{"hr-region":"San Joaquin River","count":11},
	{"hr-region":"Tulare Lake","count":27},
	{"hr-region":"North Lahontan","count":2},
	{"hr-region":"South Lahontan","count":8},
	{"hr-region":"Colorado River","count":4}
] 

inlet.js

var data = tb.data
    w = 200,
    h = 30;

var scaleRegions = d3.scale.ordinal()
.domain(_.pluck(data, "hr-region"))
.rangeBands([0, w], 0.2)

var scaleCount = d3.scale.linear()
.domain([0, d3.max(data, function(d, i) { return d.count; })])
.range([0, h])

g.selectAll("rect")
.data(data)
.enter().append("rect")
.attr({
  "class": "hr-region",
  "transform": function(d, i) {
    var tx = scaleRegions(d["hr-region"]),
        ty = h - scaleCount(d.count);
    return "translate(" + [tx, ty].join(" ") + ")"
  },
  "width": scaleRegions.rangeBand(),
  "height": function(d, i) {
    return scaleCount(d.count);
  }
});


g.selectAll("text")
.data(data)
.enter().append("text")
.attr({
  "class": "hr-label",
  "transform": function(d, i) {
    var tx = scaleRegions(d["hr-region"]) + scaleRegions.rangeBand()/2,
        ty = h + 20;
    return "translate(" + [tx, ty].join(" ") + ")"
  },
  "text-anchor": "middle"
})
.text(function(d, i) {
  return d["hr-region"].split(" ").slice(0, 2).map(function(d, i) { return d.substring(0, 1)}).join("")
});

style.css

.hr-label {
  font-size: 13px;
}