d3.js Color coding grid based on data from a csv file

Question

I built a grid of squares based on the example given in http://bl.ocks.org/bunkat/2605010. Now i am trying to color code each of the cells in the grid based on the data from csv file. Say for example, i have a csv file with data as

cell, col1

1,2

2,3

3,2

4,1

cells are colored based on data in col1. Like cell 1 colored with blue, cell 2 colored with green, cell 3 colored again with blue, cell 4 colored with red.

I have been trying something like this, but it doesn't work. Please help?

d3.text("frame.csv", function(datasetText) {

var parsedCSV = d3.csv.parseRows(datasetText);    
    var col = row.selectAll(".cell")    
                 .data(function (d) { return d; })    
                .enter().append("svg:rect")    
                 .attr("class", "cell")    
                 .attr("x", function(d) { return d.x; })    
                 .attr("y", function(d) { return d.y; })    
                 .attr("width", function(d) { return d.width; })    
                 .attr("height", function(d) { return d.height; })    
         .style("fill", function(d) { return color(parsedCSV[d].col1); })    
         .style("fill", '#FFF')    
                 .style("stroke", '#555');    

});

First of all you seem to be setting the fill style twice, one after the other, with the second setting the fill color to pure white everytime. — Nick Mitchinson, Feb 23 '13 at 01:07
Thank you nick for your reply. You are right. I removed the second fill setting to white. But still i don't get it. Appreciate your help. — user2100513, Feb 23 '13 at 02:30
Have you tried adding in some logs to see what values your color function is returning? — Nick Mitchinson, Feb 23 '13 at 02:48

score 0 · Answer 1 · edited May 23 '17 at 12:27

There is a 'fill' attribute that you can use to set the fill color of the item. Like other d3 functions, you can pass it either a value, or a function which returns the value. It sounds like you would want to use a function which will determine what colour you want, then return that value. Note that you will have to return it as a string (so wrapped in quotes) as either '#660066' or 'rgb(166,0,166)'. You could also use rgba if you wish.

After this it is just a matter of writing your function to return the right colour, which I can't really help you with as I don't know what you want.

Also this may be a duplicate of d3js fill color.

score 0 · Answer 2 · answered Feb 24 '13 at 02:09

0

I found my mistake. I had to use d3.csv.parse(string) instead of d3.csv.parseRows(string[, accessor]) function since my csv file contained column names. Thanks for the help. Appreciate it.

answered Feb 24 '13 at 02:09

user2100513

101
8

d3.js Color coding grid based on data from a csv file

2 Answers2