JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

JavaScript

var data = [{  
    date: new Date("Jan 01, 2015"),
    data: 12
},{
    date: new Date("Jan 02, 2015"),
    data: 17
},{  
    date: new Date("Jan 03, 2015"),
    data: 5
},{
    date: new Date("Jan 04, 2015"),
    data: 20
},{  
    date: new Date("Jan 05, 2015"),
    data: 6
},{
    date: new Date("Jan 06, 2015"),
    data: 17
}];

var w = 800;
var h = 100;

var x = d3.time.scale()
            .range( [0, w] )
            .domain( [data[0].date, data[data.length-1].date] );

var y = d3.scale.linear()
            .range( [h, 0] )
            .domain( [0, 20] );

var svg = d3.select("body").append("svg").attr("width", w);
var focus = svg.append("g");

var line = d3.svg.line()
            .interpolate("basis")
            .x(function(d){ return x(d.date); })
            .y(function(d){ return y(d.data); });

var area = d3.svg.area()
            .interpolate("basis")
            .x(function(d){ return x(d.date); })
            .y1(function(d){ return y(d.data); })
            .y0(function(d){ return y(0); });

var brush = d3.svg.brush().x(x);

focus.append("path")
        .attr("class", "area")
        .style({"fill": "#ccc"})
        .datum(data)
        .attr("d", area);



focus.append("g")
        .attr("class","x brush")
        .call(brush)
        .selectAll("rect")
        .attr("height", h)
        .style({
            "fill": "#69f",
            "fill-opacity": "0.3"
        });
brush.on('brush', function(d){  
    console.log(d, "DDD");
    k = brush.extent();
    console.log(k, "KK");
    j = data.filter(function(d){
        return k[0] <= d.date && k[1] >=d.date;
    });
	console.log(j)
});