Normal - Dry - Drought

_.md

[ Launch: Normal - Dry - Drought ] c4db4fdf3120c7e8344d by poezn

assets.svg

<defs>
                                      <pattern id="stripe-pattern" patternUnits="userSpaceOnUse" width="4" height="4">
                                    <path d="M-1,1 l2,-2
                                       M0,4 l4,-4
                                       M3,5 l2,-2" 
                                       stroke="#000" opacity="0.5"/>
                                    </pattern>
                                    <mask id="stripes">
                                        <g transform="scale(1.5)")>
                                            <rect width='1000' height='1000' fill='#fff'/>
                                            <rect width='1000' height='1000' fill='url(#stripe-pattern)' fill-opacity='0.75'/>
                                        </g>
                                    </mask>
</defs>

config.json

{"description":"Normal - Dry - Drought","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"assets.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"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,"thumbnail":"http://i.imgur.com/oylIbEX.png"}

inlet.js

var data = [
  {"label": "Normal Year", "value": 29},
  {"label": "Dry Year", "value": 39},
  {"label": "Drought Year", "value": 60}
];

var w = 100, 
    h = 200,
    durationPerPercent = 50;

var yScale = d3.scale.linear()
.domain([0, 100])
.range([h, 0])

var years = g.selectAll("g.year")
.data(data);

var newYears = years.enter().append("g")
.attr({
  "class": "year",
  "transform": function(d, i) {
    return "translate(" + (w*1.4*i) + " 0)";
  }
});

var bars = newYears.append("g")
.attr("transform", "translate(0, 34)");

var labels = newYears.append("g");

bars.append("rect")
.attr({
  "class": "total",
  "height": function(d, i) {
    return yScale(0) - yScale(100);
  },
  "width": w,
  "transform": function(d, i) {
    var tx = 0,
        ty = yScale(100);
    return "translate(" + [tx, ty].join(" ") + ")"
  }
});

bars.append("rect")
.attr({
  "class": function(d, i) { return i < 2 ? "gw" : "gw drought" },
  "height": 0,
  "width": w,
  "transform": function(d, i) {
    var tx = 0,
        ty = yScale(0);
    return "translate(" + [tx, ty].join(" ") + ")"
  }
});

bars.append("rect")
.attr({
  "class": function(d, i) { return i < 2 ? "gw-top" : "gw-top drought" },
  "height": 3,
  "width": w,
  "transform": function(d, i) {
    var tx = 0,
        ty = yScale(0) - 1;
    return "translate(" + [tx, ty].join(" ") + ")"
  }
});

labels.append("text")
.attr({
  "class": "title",
  "text-anchor": "middle",
  "transform": function(d, i) {
    var tx = w/2,
        ty = 20;
    return "translate(" + [tx, ty].join(" ") + ")"
  }
})
.text(function(d) { return d.label });

labels.append("text")
.attr({
  "class": "number",
  "text-anchor": "middle",
  "transform": function(d, i) {
    var tx = w/2,
        ty = yScale(d.value) + 60;
    return "translate(" + [tx, ty].join(" ") + ")"
  }
})
.text(function(d) { return d.value + "%" });


bars.select("rect.gw")
.transition()
.duration(function(d, i) { return d.value * durationPerPercent })
.ease("linear")
.delay(1000)
.attr({
  "height": function(d, i) {
    return yScale(0) - yScale(d.value);
  },
  "transform": function(d, i) {
    var tx = 0,
        ty = yScale(d.value);
    return "translate(" + [tx, ty].join(" ") + ")"
  }
});

bars.select("rect.gw-top")
.transition()
.duration(function(d, i) { return d.value * durationPerPercent })
.ease("linear")
.delay(1000)
.attr({
  "height": 3,
  "transform": function(d, i) {
    var tx = 0,
        ty = yScale(d.value) - 1;
    return "translate(" + [tx, ty].join(" ") + ")"
  }
});

styles.css

rect.total {
  fill: #F4F4F4;
}

rect.gw {
  fill: #5DB2D3;
  mask: url(#stripes);
}

rect.gw-top {
  fill: #398eca;
}

rect.gw.drought {
  fill: #ca5139;
}

rect.gw-top.drought {
  fill: #9d3329;
}

#display {
	background-color: #FFF;
}

text.title {
	font-size: 12px;
}

text.number {
	font-weight: bold;
  fill: #FFF
}