Data can be drawn using a Box and Whisker Plot, which helps highlight outliers and give a quick snapshot of the different quartiles of the dataset. This example includes a .ui( ) control that shows the difference between a Box and Whisker and a standard Scatter Plot.
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 data = [ | |
| {"year": 1991, "name":"alpha", "value": 15}, | |
| {"year": 1992, "name":"alpha", "value": 34}, | |
| {"year": 1991, "name":"alpha2", "value": 17}, | |
| {"year": 1992, "name":"alpha2", "value": 65}, | |
| {"year": 1991, "name":"beta", "value": 10}, | |
| {"year": 1992, "name":"beta", "value": 10}, | |
| {"year": 1991, "name":"beta2", "value": 40}, | |
| {"year": 1992, "name":"beta2", "value": 38}, | |
| {"year": 1991, "name":"gamma", "value": 5}, | |
| {"year": 1992, "name":"gamma", "value": 10}, | |
| {"year": 1991, "name":"gamma2", "value": 20}, | |
| {"year": 1992, "name":"gamma2", "value": 34}, | |
| {"year": 1991, "name":"delta", "value": 50}, | |
| {"year": 1992, "name":"delta", "value": 43}, | |
| {"year": 1991, "name":"delta2", "value": 17}, | |
| {"year": 1992, "name":"delta2", "value": 35} | |
| ] | |
| var visualization = d3plus.viz() | |
| .container("#viz") | |
| .data(data) | |
| .type("box") | |
| .id("name") | |
| .x("year") | |
| .y("value") | |
| .time("year") | |
| .ui([{ | |
| "label": "Visualization Type", | |
| "method": "type", | |
| "value": ["scatter","box"] | |
| }]) | |
| .draw() | |
| </script> |
