CODEWITHSUNDEEP
javascriptd3.js
tester931
tester931

Reputation: 37

Extract unique values of a key in a object - Javascript/d3 legend

Consider the following simplified csv file

x,y,names
1,2,group1
3,2,group2
4,3,group1
7,8,group3
3,5,group2

which I am reading in with d3.csv and afterwards apply a some function on it

d3.csv('file_name.csv').then(data => {
    render(dataset)
});

Could someone explain to me how I could extract the unique strings in the category names and store them in a list

---> iam_a_list = [group1, group2, group3]

The elements in this list will later be used as text for a legend in a plot.

Upvotes: 0

Views: 636

Answers (1)

Jacob Prouse
Jacob Prouse

Reputation: 21

You can use a set to get unique results. Just loop over your data and make an array of all the names. Then make a set, which will remove all the duplicates and give you a unique list.

Using .map() and d3.set().values()

let uniqueListOfNames= []
d3.csv('file_name.csv').then(data => {
    // listOfNames = ['group1', 'group2', 'group1', 'group3', 'group2']
    const listOfNames = data.map(row => row.names)
    // uniqueListOfNames = ['group1', 'group2', 'group3']
    uniqueListOfNames = d3.set(listOfNames).values()
});

Using a loop.

let uniqueListOfNames= []
d3.csv('file_name.csv').then(data => {
    const listOfNames= []

    for (const row of data) {
        listOfNames.push(row.names)
    }
    // listOfNames= ['group1', 'group2', 'group1', 'group3', 'group2']
    // uniqueListOfNames = ['group1', 'group2', 'group3']
    uniqueListOfNames = d3.set(listOfNames).values()
});

Upvotes: 2

Related Questions