When passing the .id( ) method an array instead of a single key, the Line Chart visualization will group lines based on the keys (and order) you pass it in the array.
The Y values for the lines are averaged, by default. This aggregation can be changed using the .aggs( ) method.
When clicking on a grouped line, the visusalization will automatically zoom into that group, showing the items within it. This feature can be toggled using the .zoom( ) method.
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": 15, "parent": "parent 1"}, | |
| {"year": 1992, "name":"alpha", "value": 20, "parent": "parent 1"}, | |
| {"year": 1993, "name":"alpha", "value": 30, "parent": "parent 1"}, | |
| {"year": 1994, "name":"alpha", "value": 60, "parent": "parent 1"}, | |
| {"year": 1991, "name":"beta", "value": 10, "parent": "parent 1"}, | |
| {"year": 1992, "name":"beta", "value": 10, "parent": "parent 1"}, | |
| {"year": 1993, "name":"beta", "value": 40, "parent": "parent 1"}, | |
| {"year": 1994, "name":"beta", "value": 60, "parent": "parent 1"}, | |
| {"year": 1991, "name":"gamma", "value": 5, "parent": "parent 2"}, | |
| {"year": 1992, "name":"gamma", "value": 10, "parent": "parent 2"}, | |
| {"year": 1993, "name":"gamma", "value": 20, "parent": "parent 2"}, | |
| {"year": 1994, "name":"gamma", "value": 25, "parent": "parent 2"}, | |
| {"year": 1991, "name":"delta", "value": 50, "parent": "parent 2"}, | |
| {"year": 1992, "name":"delta", "value": 43, "parent": "parent 2"}, | |
| {"year": 1993, "name":"delta", "value": 17, "parent": "parent 2"}, | |
| {"year": 1994, "name":"delta", "value": 32, "parent": "parent 2"} | |
| ] | |
| var visualization = d3plus.viz() | |
| .container("#viz") | |
| .data(sample_data) | |
| .type("line") | |
| .id(["parent","name"]) | |
| .y("value") | |
| .x("year") | |
| .draw() | |
| </script> |
