CODEWITHSUNDEEP
javascriptjquerycsvd3.jscharts
user1502186
user1502186

Reputation: 319

Use a jquery type slider to iterate through a csv and display one bar at a time in a d3.js bar chart

So I'm generating bar chart in D3.js with a csv file a la the basic columns example. What I want to do is show just one bar at a time for each row of data. A JQuery-like slider will iterate over the csv rows and update the chart. For the user, it'll just look like the single bar's height is changing but the x axis should update with the date as well.

Here's an example of the data that I'll be feeding into it:

DATE,INFLOW (CF),OUTFLOW (CF),STORAGE (CF)
20120101,950400,28857600,11084277600
20120102,60912000,28771200,11099959200
20120103,56505600,28857600,11130451200
20120104,55900800,28771200,11158765200
20120105,55987200,28771200,11189692800
20120106,56419200,28771200,11220620400
20120107,55123200,28684800,11246756400

The only thing I actually want to show is DATE and STORAGE (CF). So I'll probably have to do some parsing of the CSV somewhere to get it in the best shape.

I've attempted this and would post some code but all of my attempts are a mess. I can generate a plausible bar chart with all of the rows at once, but when I attempt to show a single one, everything breaks. Here are the challenges that I could use some guidance one:

  1. How to splice or filter my csv with a slider so that only a single row is selected
  2. Best way to generate a bar chart that only has a single bar from a single row in a csv (every time I try to do this I have trouble with axes and accessing the array values correctly)
  3. Best way to update the bar, changing only height but also updating the x axis ticks

Also any examples would be very helpful! Have been googling like mad but am mostly finding sliders that affect range and scale

Upvotes: 2

Views: 467

Answers (1)

FernOfTheAndes
FernOfTheAndes

Reputation: 5015

There are many pieces to this...parsing and slicing the data, setting up the x axis, etc. Here is one segment of the code.

d3.select("#slider")
    .on("input", function() {update(+this.value);});

function update(row) {
    viewdata = data.slice((row-1), row);
    redraw();
}

Here is a complete PLUNK with the solution. NOTE: I have placed comments in several parts of the code, for orientation. I strongly suggest you fork this plunk so that it will not be lost if I inadvertently delete it.

Upvotes: 1

Related Questions