Sometimes, data may already have inherit color values that you may wish to use.
In this example, we pass an attribute list to .attrs( ) and tell the .color( ) method to use the "hex" key for the color value. Attribute lists are beneficial when you have attributal data that matches to multiple data points, in this case each year's value has the same color.
Additionally, when a custom Color Parameters is defined, a Legend will display that shows each color group.
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 = [ | |
| {"year": 1991, "name":"alpha", "value": 29}, | |
| {"year": 1992, "name":"alpha", "value": 18}, | |
| {"year": 1993, "name":"alpha", "value": 2}, | |
| {"year": 1994, "name":"alpha", "value": 7}, | |
| {"year": 1991, "name":"beta", "value": 11}, | |
| {"year": 1992, "name":"beta", "value": 15}, | |
| {"year": 1993, "name":"beta", "value": 37}, | |
| {"year": 1994, "name":"beta", "value": 54} | |
| ] | |
| var attributes = [ | |
| {"name": "alpha", "hex": "#CC0000"}, | |
| {"name": "beta", "hex": "#00CC00"} | |
| ] | |
| var visualization = d3plus.viz() | |
| .container("#viz") | |
| .data(sample_data) | |
| .type("line") | |
| .id("name") | |
| .y("value") | |
| .x("year") | |
| .attrs(attributes) | |
| .color("hex") | |
| .draw() | |
| </script> |
