The .icon( ) method specifies a specific key in the data that points to an image URL. These icons are used in Legends and Tooltips.
Additionally, in this example, advanced parameters of the icon can be set, including the "style", which defines whether or not to fill the background square with the object's color.
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="exports"></div> | |
| <script> | |
| var trade_data = [ | |
| {"group": "transportation", "usd": 12897429187, "product": "cars", "image": "trans.png"}, | |
| {"group": "transportation", "usd": 8974520985, "product": "airplanes", "image": "trans.png"}, | |
| {"group": "foodstuffs", "usd": 98723420, "product": "apples", "image": "food.png"}, | |
| {"group": "foodstuffs", "usd": 6897234098, "product": "bananas", "image": "food.png"}, | |
| {"group": "foodstuffs", "usd": 590834587, "product": "oranges", "image": "food.png"} | |
| ]; | |
| var visualization = d3plus.viz() | |
| .container("#exports") | |
| .data(trade_data) | |
| .type("tree_map") | |
| .icon({ | |
| "style": "knockout", | |
| "value": "image" | |
| }) | |
| .legend({"size": 50}) | |
| .color("group") | |
| .id(["group", "product"]) | |
| .depth(1) | |
| .size("usd") | |
| .draw(); | |
| </script> |
