d3js bar chart with brush slider

Question

By looking at the following example http://bl.ocks.org/mbostock/4349545 , I am trying to replace the circles with a bar chart, representing events per day, for a couple of years worth of data. Data is the the format

 {"15/01/2015: 214","22/03/2016: 30",..}

Can someone please point me in the right direction?

Thank you!

Answer 1

You can get bar chart by swapping data with new set:

var data = [{ "date" : "15/01/2015", "value" : 214}
        ,{ "date" : "22/03/2016", "value" : 30}]

parse date , change x axis to datetime, and then by change type of circle to Rect(with new attributes etc.) in this place:

var circle = svg.append("g").selectAll("circle")
.data(data)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + x(d) + "," + y() + ")"; })
.attr("r", 3.5);

But, in the example that you brought brushg use selectAll on all elements of type Rect, so it will be in the conflict with new approach.