d3js dynamic csv switch from dropdown list

Question

I'm new to d3js, and I'm successfully using example here: https://gist.github.com/d3noob/4414436

That's quite nice, because it works remotely, the CSV being stored on server side. Now, I'd like to go further, and add the ability to select the source CSV from a list and the redraw the chart.

I'm stuck in writing php and java, and java echo'ed by php, so I think that I'm totally on the wrong way.

Would you have an example that illustrates how to perform the chart update reading a new CSV selected from a dropdown list containing the server side's CSV pathes?

Kind regards,

Sylvain

goblin-esque · Accepted Answer · 2015-03-12 05:58:44Z

2

I'm assuming you don't need help making the drop-down list. The simplest method would be to simply feed in the drop-down list selection into a var, and use that var when you do your d3.csv() call. For example:

//storing the drop-down selection in the ddSelection var
var ddSelection = document.getElementById("secondOption").value,

//feeding that to create the csv filename you want
var csvFile = "/some server path/" + ddSelection + ".csv";

d3.csv(csvFile, function(error, dataset) {
    //a bunch of cool visualizing stuff
})

Then you'll just need to remember to include .exit() when you're joining your data, so that the graph updates with the new dataset - Mike Bostock's Thinking with Joins is the standard reference for that.

answered Mar 12, 2015 at 5:58

goblin-esque

4655 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sylvain Trx Over a year ago

Wonderful. Now I'm able to choose which CSV to display graphically. Many thanks. I'm closing the thread.

Collectives™ on Stack Overflow

d3js dynamic csv switch from dropdown list

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related