Brush Example

_.md

[ Launch: test ] ca063e4389230b1e9e647c91757966ba by alex-arriaga
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"Brush Example","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 data = [{
    "value": 13.9
}, {
    "value": 20
}, {
    "value": 37
}, {
    "value": 50
}];

var svg = d3.select("svg")

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

var brush = d3.svg.brush();
brush.x(scale);
brush.extent([25, 27]); // This is in function of the domain [20, 30]

// We create a custom event
brush.on("brush", function() {
    // Get the selected interval
    console.log("Selected with brush:", brush.extent());
}).on("brushend", function() {
    console.log("End brush:", brush.extent());
});

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

brush(g);

g.attr("transform", "translate(10, 30)");

// Styles for the brush can be provided using CSS
g.selectAll("rect").attr("height", 30);
g.selectAll(".background")
    .style({ fill: "#4B9E9E", visibility: "visible" });
g.selectAll(".extent")
    .style({ fill: "#78C5C5", visibility: "visible" });
g.selectAll(".resize rect")
    .style({ fill: "#276C86", visibility: "visible" });


var rects = g.selectAll("rect.annotation")
    .data(data);

rects.enter()
    .append("rect").classed("annotation", true);

rects.attr({
        x: function(d) { // Position in X will be managed by the "created" field in the data
            return scale(d.value);
        },
        y: 0,
        width: 1,
        height: 29
    })
    .style("pointer-events", "none"); // Disable all the events in the rectangles