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:
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;
})))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With