graph

_.md

[ Launch: square ] df624b9f8d286383040c by chriseyre2000
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"graph","endpoint":"","display":"svg","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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":true,"ajax-caching":true}

inlet.js

    var data = [ // <- A
        {width: 10, color: 23},{width: 15, color: 33},
        {width: 30, color: 40},{width: 50, color: 60},
        {width: 80, color: 22},{width: 65, color: 10},
        {width: 55, color: 5},{width: 30, color: 30},
        {width: 20, color: 60},{width: 10, color: 90},
        {width: 8, color: 10}
    ];
    
    var colorScale = d3.scale.linear()
        .domain([0, 100])
        .range(["#add8e6", "blue"]); // <- B

    function render(data) {
        d3.select("body").selectAll("div.h-bar")
            .data(data)
            .enter().append("div")
                .attr("class", "h-bar")                
            .append("span");

        d3.select("body").selectAll("div.h-bar")
            .data(data)
            .exit().remove();

        d3.select("body").selectAll("div.h-bar")
            .data(data)
                .attr("class", "h-bar")
                .style("width", function (d) { // <- C
                    return (d.width * 5) + "px"; // <- D
                })
                .style("background-color", function(d){
                    return colorScale(d.color); // <- E
                })
            .select("span")
                .text(function (d) {
                    return d.width; // <- F
                });
    }

    function randomValue() {
        return Math.round(Math.random() * 100);
    }

    //setInterval(function () {
    //    data.shift();
    //    data.push({width: randomValue(), color: randomValue()});
    //    render(data);
    //}, 1500);

    render(data);