Speed Data Stream

_.md

[ Launch: Brush Example ] 83d4445c05805c79090c8e01cb090fc4 by alex-arriaga
[ Launch: test ] ca063e4389230b1e9e647c91757966ba by alex-arriaga
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"Speed Data Stream","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":false,"ajax-caching":true}

inlet.js

var yTrans = 20;
var width = 600;
var height = 30;

var data = [{
    "value": 13.9
}, {
    "value": 20
}, {
    "value": 37
}, {
    "value": 50
}];

var colorScale = d3.scale.linear()
    .domain([0, 30])
    .range(["green", "red"]);

var svg = d3.select("svg")

var scale = d3.scale.linear()
    .domain([0, 30])
    .range([10, 849]);

var g = svg.append("g");

g.append("rect")
    .attr({
        x: 0,
        y: yTrans,
        width: width,
        height: height,
        fill: '#c8ddf3'
    });


var speedRects = g.selectAll('rect.speedRect')
    .data(data);

speedRects
    .enter()
    .append('rect').classed('item', true);

speedRects.style({
    height: height,
    width: "10px",
    y: yTrans,
    x: function(d, i) { return i * 24; },
    "background-color": function(d, i) { return colorScale(i); }
});