Passing an element of an array to be stored in a variable

Question

Just started with D3.js, I'm trying to color a chart with many categorical levels. The following code is aimed to extract the element of colorExtra (20 elements of color codes) by dataset(d) with index i to be stored in variable fill. However, the following code did not turn out to store the color code of colorExtra in fill.

   var colorExtra = d3.schemeCategory20; //add
   console.log(colorExtra);
   var fill = function (d, i) { return colorExtra[i]}; //add
   console.log(fill);

Could someone help me to code for the variable fill accurately?

To be clear, there are 20 color code elements in colorExtra:

["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", 
"#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", 
"#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"]

I have a variable, race, with the following levels of race_code, and I'm trying to make a pie graph with all available levels in a different color. In the code, d stands for race_code, and i stands for the index of that race_code, and I want to extract the color element from colorExtra by i. For example, race_code "A" will have fill value = "#1f77b4", "B" -> fill = #aec7e8", "C"-> fill = "#ff7f0e" and so on..

The objective here is not helping me to make the graph, but more on extracting the color code by i. So that each race_code gets its own color.

Here is my complete code: https://bl.ocks.org/lydiawawa/38243015ab2ac96b6086d3bae56572b9/40326b1fb9b0b2db89d3d7601c824d18f97a5e95

There are some problems in this snippet, the biggest one being the fact that the anonymous function gets passed the two (actually three) arguments by D3 methods, while here it gets none. But, before anything else, I have to say that this is clearly an XY problem... So, instead of showing us your attempted solution, please edit your question explaining us in details what's exactly your objective here ("to extract the element of colorExtra by dataset with index" is not very clear, I'm afraid). — Gerardo Furtado
– Gerardo Furtado, Commented Apr 18, 2019 at 6:34
@GerardoFurtado I edited my post, I hope it is more clear now. — lydias
– lydias, Commented Apr 18, 2019 at 6:46
If I understand your problem correctly you don't need to populate any fill variable, just use an ordinal scale to set the fill attribute (or style) of each SVG element: bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9 — Gerardo Furtado
– Gerardo Furtado, Commented Apr 18, 2019 at 6:51
@GerardoFurtado This is the script I'm working on: bl.ocks.org/lydiawawa/38243015ab2ac96b6086d3bae56572b9/… . The race category is not functioning properly because of the invalid fill. — lydias
– lydias, Commented Apr 18, 2019 at 6:58

Gerardo Furtado · Accepted Answer · 2019-04-18 10:13:09Z

1

As I briefly explained in the comments I'm not sure what is your goal with that cumbersome color function. Since you said that you're new to D3, here is an advice: don't do that, that's not the idiomatic D3. Get rid of that awful function, create an ordinal scale for each category and bob is your uncle.

However, addressing your specific function and trying to fix the code you have right now with minimal changes, you have to pass the index of each element to color...

.style("fill", function(d, i) { return color(d.data[key], i);})

...and then, using that index, you get the color inside the d3.schemeCategory20 array:

var fill = colorExtra[i];

Here is your updated bl.ocks: https://bl.ocks.org/GerardoFurtado/539c94a544d09045cef50fafd83548f8/fd3336588c4098d7143865277d60ae0276ed04cd

answered Apr 18, 2019 at 10:13

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

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

1 Comment

lydias Over a year ago

Thank you for the suggestion. I think my main struggle was not realizing that I need to pass i to the color function and later on calling i again in .style(). I need to work on my understanding of function. This effect was created with the help of @Coola. He suggested to use ordinal scale as well. The reason why I kept the color function was that I wanted to stay in the color range of the Gender pie graph, and I believe I can add .range() with ordinal scale to achieve that. Thank you so much!

Collectives™ on Stack Overflow

Passing an element of an array to be stored in a variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related