helping damizean

_.md

[ Launch: helping damizean ] 5596114 by gelicia

config.json

{"description":"helping damizean","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

 var graph, countries, titles, values;
        
        var data = [
{"country": "Spain", "timeline": 
  [{"year": 1999, "values": [96, 20]},
  {"year": 2000, "values": [10, 32]}]
},
{"country": "France", "timeline": 
  [{"year": 1999, "values": [44, 78]},
  {"year": 2000, "values": [32, 87]}]
},
{"country": "Namek", "timeline": 
  [{"year": 1999, "values": [30, 20]},
  {"year": 2000, "values": [64, 45]}]
}


]
 graph = d3.select("#display")
                      .append("div")
                      .attr("width", 640)
                      .attr("height", 480)
                      .attr("class", "graph"); 

var countries = graph.selectAll("div")
.data(data)
.enter()
.append("div")
.attr("class", "row");

 titles = countries.append("p")
     .attr("class", "title")
     .text(function (d) { return d.country; });

 values = countries.append("div")
                            .attr("class", "values")
                            .selectAll("div")
 .data(function (d,i){return d.timeline[0].values})
                            .enter()
                            .append("div")
            .attr({
              "class": function(d, i) {return "bar b" + i; }
            })
			.style("width", function(d, i) { return d + "px"; })
            .text(function(d,i) { return d; });



values
.data(function (d,i){return d.timeline[1].values})
                            .enter();
values.transition()
            .duration(100)
            .ease("linear")
.style("width", function(d, i) { return d + "px"; })
.text(function(d,i) { return d; });

style.css

.graph
        {
        }
        
        .graph .row
        {
        }
        
        .graph .row .title
        {
        }
        
        .graph .row .values
        {
            border-left: 2px solid black;
            padding: 4px 0;
        }
        
        .graph .row .values .bar
        {
            width:       0px;
            height:      17px;
            margin:      4px 0;
            padding:     4px;
            transition:  width 4s;
            box-shadow:  inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
            color:       white;
            font-weight: bold;
            text-align: right;
        }
        
        .graph .row .values .bar.b0
        {
            background: #6db3f2;
            background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
        }
        
        .graph .row .values .bar.b1
        {
            background: #cb60b3;
            background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
        }