Assigning colors to a d3.js bar chart?

0
votes

I'm trying to create a color-coded bar chart using d3. I am SO CLOSE. Here's my bl.ocks chart:

http://bl.ocks.org/sconnors37/b99070b055f125c9dff1/1cb53954be3f20e3c4492066eccd749b5cf04bbe

What I'm trying to do is assign color values based on the "teams" field in my .tsv file. So grey for Mercedes, red for Ferrari, etc. I have the teams in the var color domain and the colors in the var color range, and I'm pulling var color into the bar attrib.

For some reason though, the entire chart is just taking on the first item in the range - I changed it from grey to red just to see if that was what was going on, and it is.

So! How do I get the rest of my colors to pull through onto the bar chart? Help me, stackoverflow, you're my only hope.

1
javascriptd3.jscharts
you have 8 values in the domain, 9 in the range, and also when you append the rectangles the first selectAll should be selectAll("rect") and not '.bars' - tomtomtom
try with the RGB values of the colors, instead of names. - Prerak Sola
@tomtomtom actually there's nine values in each, you have to scroll to the right to see them all. Ill try changing the selectAll and see if that works, thanks! - sconnors37
@tomtom The selectAll(".bar") is correct. The rect added are classed with bar. Making it selectAll("rect") would be making things worse because it could select some other rect elements which aren't part of the chart. - cyon
yup I saw your reply and that's almost 100% what was going wrong. I just thought that maybe the selection could somehow be bugged and consider the whole class as one element and so return just the grey. In his/her case tho there are no other rect elements so it's not that much of a problem I guess - tomtomtom

1 Answers

1
votes

In your .tsv file the last column team is not separated from the previous column by a tab, but rather through two spaces. If you look at the data passed to the d3.tsv callback I think you will find that you have one date team column instead of a date and team column.

This means that the field d.team is undefined and ordinal(undefined) will just return the first value from the range.