test/cmap-groups3.html

<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Idescat Visual sample page</title>
		<link href="../visual.css" rel="stylesheet" type="text/css" />
		<script src="../lazyvisual.js"></script>
		<script src="../visual.setup.js"></script>
	</head>

	<body>
		<div id="visual" class="visual"></div>
		<script>
			visual(
				{
					title : "United States presidential election",
					time : "2012",
					type : "cmap",
					by : "usastates",
					grouped: { label: ["Obama","Romney"], color: ["#2a488a", "#eb4d44"]},
					data : [{id: "01", group: 2}, {id: "02", group: 2}, {id: "04", group: 2}, {id: "05", group: 2}, {id: "06", group: 1}, {id: "08", group: 1}, {id: "09", group: 1}, {id: "10", group: 1}, {id: "11", group: 1}, {id: "12", group: 1}, {id: "13", group: 2}, {id: "15", group: 1}, {id: "16", group: 2}, {id: "17", group: 1}, {id: "18", group: 2}, {id: "19", group: 1}, {id: "20", group: 2}, {id: "21", group: 2}, {id: "22", group: 2}, {id: "23", group: 1}, {id: "24", group: 1}, {id: "25", group: 1}, {id: "26", group: 1}, {id: "27", group: 1}, {id: "28", group: 2}, {id: "29", group: 2}, {id: "30", group: 2}, {id: "31", group: 2}, {id: "32", group: 1}, {id: "33", group: 1}, {id: "34", group: 1}, {id: "35", group: 1}, {id: "36", group: 1}, {id: "37", group: 2}, {id: "38", group: 2}, {id: "39", group: 1}, {id: "40", group: 2}, {id: "41", group: 1}, {id: "42", group: 1}, {id: "44", group: 1}, {id: "45", group: 2}, {id: "46", group: 2}, {id: "47", group: 2}, {id: "48", group: 2}, {id: "49", group: 2}, {id: "50", group: 1}, {id: "51", group: 1}, {id: "53", group: 1}, {id: "54", group: 2}, {id: "55", group: 1}, {id: "56", group: 2}],
				}
			);
		</script>
	</body>
</html>