Filtering data for d3.js sankey diagrams

Question

I'm trying to have a d3.js Sankey visualisation filter a data set according to categories.

I'm using d3.csv method to input the data as shown in this example - http://bl.ocks.org/timelyportfolio/5052095

I would however like to upload a data set with four columns -

source, target, value, category

My aim is to have a visualisation with the ability to switch between categories. So each Sankey visualisation will only represent one particular category. Then user can switch from the dropdown to another one.

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

Answer 1

Would 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 wouldn't have to reload your csv file each time.

Answer 2

This a very long method for the second part but, creating multiple html/php and csv files depending on your categories and then adding the following code in each of your html/php files. This method would be extra work if you have a lot of categories.

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

If you figured out a solution the way you were trying it, then if possible please update your answer. it would be helpful.

Thanks.