Filtering data for d3.js sankey charts

Question

I am trying to make the D3.js Sankey visualization filter set the dataset according to categories.

I use the d3.csv method to enter data, as shown in this example - http://bl.ocks.org/timelyportfolio/5052095

I would like, however, to load a dataset with four columns -

source, purpose, value, category

My goal is to have visualization with the ability to switch between categories. Thus, each Sankey visualization will represent only one specific category. Then the user can switch from the drop-down list to another.

Is this possible using the current d3.csv input method?

Answer 1

Will this work?

d3.csv("file.csv", function(data) { [...] // Called each time there is an action on the dropdown menu function updateGraph() { // Select only data that are tagged with a certain category var dataset = data.filter(function(d) { return d.category == selectedCategory; }); // Update graph visualization } } 

This way you do not have to reload your CSV file every time.

Answer 2

This is a very long method for the second part, but creating several html / php and csv files depending on your categories, and then adding the following code to each of your html / php files. This method will be extra work if you have many categories.

 <a href="Category 1.php">Category 1</a> <a href="Category 2.php">category 2</a> 

If you figured out the solution the way you tried it, then, if possible, update your answer. that would be helpful.

Thanks.