Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3.js, using d3.extent to find min/max of nest json values

Tags:

json

d3.js

I'm building a bubble chart in d3 and I'd like the color of the bubbles to be based off of logFC values I have in a local json file.

My json file looks like this:

{
   "name": "genes",
   "children": [    
     {
       "value": "9.57E-06",
       "logFC": "-5.51658163",
       "symbol": "BCHE",
     },
     {
       "value": "0.0227",
       "logFC": "3.17853632",
       "symbol": "GRIA2",
     },
     {
       "value": "0.00212",
       "logFC": "-2.8868275",
       "symbol": "GRIN2A",
     }   
   ]
}

The file is not flat which is why I think I'm having trouble referencing the leaf nodes with d3.extent. I know I could use:

var color1 = d3.scale.linear()
        .domain([-5.51658163,3.17853632])   //manually putting in min/max into the domain
        .range(["lightgreen", "green"]);

But my data will change, and to make the code dynamic - I've tried the following along with many other variations:

var color1 = d3.scale.linear()
        .domain([d3.extent(d3.values(data, function(data) { return +d.logFC;}))])
        .range(["lightgreen", "green"]);

Basically, Im having trouble using d3.extent on leaf nodes. Is there a simple way to find the min and max values using d3.extent to find the min and max values of logFC?

Thank you!

(PS if there are any problems with parenthesis it was a mistake I made when copying my data into the question box)

When I look in the console editor, I see:

enter image description here

like image 218
gsol Avatar asked Aug 09 '16 19:08

gsol


1 Answers

d3.extent accepts an array of values and return the bounds as an array. So I guess your code should be more like:

.domain(d3.extent(d3.values(data, function(data) { 
  return +d.logFC;
})))

(no square brackets)

Not 100% sure, because I don't know what the data variable is in your example.


Update:

If the data variable is the loaded JSON object, do the following:

.domain(d3.extent(data.children.map(function(child) { 
  return +child.logFC;
})))
like image 58
Quarter2Twelve Avatar answered Oct 11 '22 18:10

Quarter2Twelve