In D3plus, all methods support passing a function that will handle the logic of fetching a given attribute. By passing .color( ) a function, the returned color can be determined based off special conditions that the data may meet.
Featured on D3plus.org
| <!doctype html> | |
| <meta charset="utf-8"> | |
| <script src="//d3plus.org/js/d3.js"></script> | |
| <script src="//d3plus.org/js/d3plus.js"></script> | |
| <div id="viz"></div> | |
| <script> | |
| var sample_data = [ | |
| {"value": 100, "name": "alpha", "growth": 0.9}, | |
| {"value": 70, "name": "beta", "growth": 0.4}, | |
| {"value": 40, "name": "gamma", "growth": -0.3}, | |
| {"value": 15, "name": "delta", "growth": -0.65}, | |
| {"value": 5, "name": "epsilon", "growth": 0.7}, | |
| {"value": 1, "name": "zeta", "growth": 0.2} | |
| ]; | |
| var visualization = d3plus.viz() | |
| .container("#viz") | |
| .data(sample_data) | |
| .type("tree_map") | |
| .id("name") | |
| .size("value") | |
| .color(function(d){ | |
| return d.growth > 0 ? "#008800" : "#880000"; | |
| }) | |
| .draw(); | |
| </script> |
