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

enter image description here

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?

So you need help to make your visualization or to adapt the contents of the csv file so that you can add a category column ? — Barnabé Monnot, Sep 02 '13 at 10:57

Barnabé Monnot · Accepted Answer · 2013-09-02T11:54:41.653

5

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.

edited Sep 02 '13 at 11:54

answered Sep 02 '13 at 11:02

Barnabé Monnot

1,163
1
9
19

Thanks that does answer my question. However, I've another query regarding the selectedCategory function. How do I get it to change on the drop-down selection. Sorry, still learning my way through js and d3. Cheers. – Harkanwal Singh Sep 02 '13 at 22:41
1

For that I would recommend jQuery, especially if you are using some Bootstrap components ([see dropdown here](http://getbootstrap.com/javascript/#dropdowns) and that's a good way to go if you are new to web applications (that's the path I took and it really helped me get things going fast). You'll have to check for which option of the dropdown menu is active. – Barnabé Monnot Sep 03 '13 at 08:44

score 0 · Answer 2 · answered Mar 07 '16 at 15:47

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.

Filtering data for d3.js sankey diagrams

2 Answers2