marcprux/index.html

## index.html
<html>
  <head>
    <title>Vega Object Constancy Issue Demo</title>
    <script src="http://trifacta.github.com/vega/d3.v3.min.js"></script>
    <script src="http://trifacta.github.com/vega/vega.js"></script>
  </head>
  <body>
    <div id="vis"></div>
  </body>
<script type="text/javascript">

var viz = null;

function parse(spec) {
  vg.parse.spec(spec, function(chart) {
    viz = chart({el:"#vis"});
    viz.update();
  });
}

var data_values = [
        {"x": "A", "y": 28, "c":0}, {"x": "A", "y": 55, "c":1},
        {"x": "B", "y": 43, "c":0}, {"x": "B", "y": 91, "c":1},
        {"x": "C", "y": 81, "c":0}, {"x": "C", "y": 53, "c":1},
        {"x": "D", "y": 19, "c":0}, {"x": "D", "y": 87, "c":1},
        {"x": "E", "y": 52, "c":0}, {"x": "E", "y": 48, "c":1},
        {"x": "F", "y": 24, "c":0}, {"x": "F", "y": 49, "c":1},
        {"x": "G", "y": 87, "c":0}, {"x": "G", "y": 66, "c":1},
        {"x": "H", "y": 17, "c":0}, {"x": "H", "y": 27, "c":1},
        {"x": "I", "y": 68, "c":0}, {"x": "I", "y": 16, "c":1},
        {"x": "J", "y": 49, "c":0}, {"x": "J", "y": 15, "c":1}
      ];

var spec = {
  "width": 400,
  "height": 400,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": data_values
    }
  ],
  "scales": [
    {
      "name": "g",
      "type": "ordinal",
      "range": "height",
      "domain": {"data": "table", "field": "data.c"}
    },
    {
      "name": "x",
      "type": "ordinal",
      "range": "width",
      "domain": {"data": "table", "field": "data.x"}
    },
    {
      "name": "c",
      "type": "ordinal",
      "domain": [0, 1],
      "range": ["steelblue","green"],
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "data": "table",
        "transform": [
            {"type": "facet", "keys": ["data.c"]}
        ]
      },
      "properties": {
        "update": {
          "x": {"value": 0},
          "y": {"scale": "g", "field": "index"},
          "width": {"value": 400},
          "height": {"value": 200},
          "stroke": {"value": "#ccc"},
          "strokeWidth": {"value": 1}
        }
      },
      "scales": [
        {
          "name": "y",
          "type": "linear",
          "range": "height",
          "nice": true,
          "domain": {"data": "table", "field": "data.y"}
        }
      ],
      "axes": [
        {"type": "y", "scale": "y"}
      ],
      "marks": [
        {
          "type": "rect",
          "key": "data.x",
          "properties": {
            "update": {
              "fill": {"scale": "c", "field": "data.c"},
              "opacity":{"value":0.8},
              "x": {"scale": "x", "field": "data.x"},
              "width": {"scale": "x", "band": true, "offset": -1},
              "y": {"scale": "y", "field": "data.y"},
              "y2": {"scale": "y", "value": 0}
            },
          }
        }
      ]
    }
  ]
};

parse(spec);

var sort_directions = { };

function toggle_sort(field) {
    var ascending = sort_directions[field] ? true : false;
    sort_directions[field] = !ascending;

    data_values.sort(function(a,b) {
        if (a[field] < b[field]) return ascending ? 1 : -1;
        if (a[field] > b[field]) return ascending ? -1 : 1;
        return 0;
    });
    viz.data({ table: data_values }).update({ duration: 1000 });
}

</script>

<input type="button" value="Toggle Sort X" onclick="javascript:toggle_sort('x')" />
<input type="button" value="Toggle Sort Y" onclick="javascript:toggle_sort('y')" />
<input type="button" value="Toggle Sort C" onclick="javascript:toggle_sort('c')" />

</html>
	<html>
	<head>
	<title>Vega Object Constancy Issue Demo</title>
	<script src="http://trifacta.github.com/vega/d3.v3.min.js"></script>
	<script src="http://trifacta.github.com/vega/vega.js"></script>
	</head>
	<body>
	<div id="vis"></div>
	</body>
	<script type="text/javascript">

	var viz = null;

	function parse(spec) {
	vg.parse.spec(spec, function(chart) {
	viz = chart({el:"#vis"});
	viz.update();
	});
	}

	var data_values = [
	{"x": "A", "y": 28, "c":0}, {"x": "A", "y": 55, "c":1},
	{"x": "B", "y": 43, "c":0}, {"x": "B", "y": 91, "c":1},
	{"x": "C", "y": 81, "c":0}, {"x": "C", "y": 53, "c":1},
	{"x": "D", "y": 19, "c":0}, {"x": "D", "y": 87, "c":1},
	{"x": "E", "y": 52, "c":0}, {"x": "E", "y": 48, "c":1},
	{"x": "F", "y": 24, "c":0}, {"x": "F", "y": 49, "c":1},
	{"x": "G", "y": 87, "c":0}, {"x": "G", "y": 66, "c":1},
	{"x": "H", "y": 17, "c":0}, {"x": "H", "y": 27, "c":1},
	{"x": "I", "y": 68, "c":0}, {"x": "I", "y": 16, "c":1},
	{"x": "J", "y": 49, "c":0}, {"x": "J", "y": 15, "c":1}
	];

	var spec = {
	"width": 400,
	"height": 400,
	"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
	"data": [
	{
	"name": "table",
	"values": data_values
	}
	],
	"scales": [
	{
	"name": "g",
	"type": "ordinal",
	"range": "height",
	"domain": {"data": "table", "field": "data.c"}
	},
	{
	"name": "x",
	"type": "ordinal",
	"range": "width",
	"domain": {"data": "table", "field": "data.x"}
	},
	{
	"name": "c",
	"type": "ordinal",
	"domain": [0, 1],
	"range": ["steelblue","green"],
	}
	],
	"axes": [
	{"type": "x", "scale": "x"},
	],
	"marks": [
	{
	"type": "group",
	"from": {
	"data": "table",
	"transform": [
	{"type": "facet", "keys": ["data.c"]}
	]
	},
	"properties": {
	"update": {
	"x": {"value": 0},
	"y": {"scale": "g", "field": "index"},
	"width": {"value": 400},
	"height": {"value": 200},
	"stroke": {"value": "#ccc"},
	"strokeWidth": {"value": 1}
	}
	},
	"scales": [
	{
	"name": "y",
	"type": "linear",
	"range": "height",
	"nice": true,
	"domain": {"data": "table", "field": "data.y"}
	}
	],
	"axes": [
	{"type": "y", "scale": "y"}
	],
	"marks": [
	{
	"type": "rect",
	"key": "data.x",
	"properties": {
	"update": {
	"fill": {"scale": "c", "field": "data.c"},
	"opacity":{"value":0.8},
	"x": {"scale": "x", "field": "data.x"},
	"width": {"scale": "x", "band": true, "offset": -1},
	"y": {"scale": "y", "field": "data.y"},
	"y2": {"scale": "y", "value": 0}
	},
	}
	}
	]
	}
	]
	};

	parse(spec);

	var sort_directions = { };

	function toggle_sort(field) {
	var ascending = sort_directions[field] ? true : false;
	sort_directions[field] = !ascending;

	data_values.sort(function(a,b) {
	if (a[field] < b[field]) return ascending ? 1 : -1;
	if (a[field] > b[field]) return ascending ? -1 : 1;
	return 0;
	});
	viz.data({ table: data_values }).update({ duration: 1000 });
	}

	</script>

	<input type="button" value="Toggle Sort X" onclick="javascript:toggle_sort('x')" />
	<input type="button" value="Toggle Sort Y" onclick="javascript:toggle_sort('y')" />
	<input type="button" value="Toggle Sort C" onclick="javascript:toggle_sort('c')" />

	</html>