marcprux · June 29, 2013 14:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html
  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Visualization</title>
    <meta
      charset="UTF-8" />
    <meta
      http-equiv="Content-type"
      content="text/html;charset=UTF-8" />
    <script
      id="viz-script-d3"
      type="text/javascript"
      src="http://d3js.org/d3.v3.min.js">
    </script>
    <script
      id="viz-script-vega"
      type="text/javascript"
      src="http://trifacta.github.io/vega/vega.min.js">
    </script>
    <script
      id="viz-script-spec"
      type="text/javascript">
 //<![CDATA[
 
 Number.prototype.formatMoney = function(c, d, t){
 var n = this, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
    j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

 function random_value() {
   return Math.random() * 60;
 }
 
 function randomized_data() {
   var a = [];
   a.push({ "color": "red", "datum": random_value() });
   a.push({ "color": "orange", "datum": random_value() });
   a.push({ "color": "yellow", "datum": random_value() });
   a.push({ "color": "green", "datum": random_value() });
   a.push({ "color": "blue", "datum": random_value() });
   a.push({ "color": "indigo", "datum": random_value() });
   a.push({ "color": "violet", "datum": random_value() });
   return a;
 }

 var viz_vega_spec = {
  "name": "treemap",
  "width": 900,
  "height": 300,
  "padding": {"top":0, "bottom":0, "left":0, "right":0},
  "data": [
    {
      "name": "table",
      "values": randomized_data(),
      "transform": [
        {"type": "facet", "keys": ["data.color"]},
        {"type": "treemap", "value": "data.datum", "sticky": false, "ratio": 1},
        {"type": "filter", "test": "!d.children"}
      ]
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "update": {
          "fill": {"field": "data.color"},
          "opacity": {"value": 0.7},
          "x": {"field": "x"},
          "y": {"field": "y"},
          "width": {"field": "width"},
          "height": {"field": "height"},
          "stroke": {"value": "red"},
          "strokeWidth": {"value": 0}
        },
        "hover": {
          "strokeWidth": {"value": 10}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "table"},
      "interactive": false,
      "properties": {
        "update": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "dx": {"value": 4},
          "dy": {"value": 4},
          "font": {"value": "Helvetica Neue"},
          "fontSize": {"field": "data.datum"},
          "align": {"value": "left"},
          "baseline": {"value": "top"},
          "fill": {"value": "#FFF"},
          "text": {"field": "data.color"}
        }
      }
    }
  ]
 };
 
 viz_render = function() {
  viz_view.width(window.innerWidth-viz_vega_spec.padding.left-viz_vega_spec.padding.right).height(window.innerHeight-viz_vega_spec.padding.top - viz_vega_spec.padding.bottom).renderer('canvas').update();
 }
 
 vg.parse.spec(viz_vega_spec, function(chart) {
  self.viz_chart = chart;
  self.viz_view = viz_chart({el:'#viz-visualization'});
  viz_render();
 });
 
 window.onresize = viz_render;
 
 var viz_interval = setInterval(function(){
  console.log("redrawing");
  viz_view.data({table:randomized_data()}).update({duration:1000 });
 },1000);

 //]]>
 </script>
    <style
      id="viz-styles"
      type="text/css">
    </style>
  </head>
  <body
    style="padding:0; margin:0; overflow:hidden;">
    <div
      id="viz-visualization">
    </div>
  </body>
 </html>
	<!DOCTYPE html>
	<html
	xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Visualization</title>
	<meta
	charset="UTF-8" />
	<meta
	http-equiv="Content-type"
	content="text/html;charset=UTF-8" />
	<script
	id="viz-script-d3"
	type="text/javascript"
	src="http://d3js.org/d3.v3.min.js">
	</script>
	<script
	id="viz-script-vega"
	type="text/javascript"
	src="http://trifacta.github.io/vega/vega.min.js">
	</script>
	<script
	id="viz-script-spec"
	type="text/javascript">
	//<![CDATA[

	Number.prototype.formatMoney = function(c, d, t){
	var n = this,
	c = isNaN(c = Math.abs(c)) ? 2 : c,
	d = d == undefined ? "." : d,
	t = t == undefined ? "," : t,
	s = n < 0 ? "-" : "",
	i = parseInt(n = Math.abs(+n \|\| 0).toFixed(c)) + "",
	j = (j = i.length) > 3 ? j % 3 : 0;
	return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
	};

	function random_value() {
	return Math.random() * 60;
	}

	function randomized_data() {
	var a = [];
	a.push({ "color": "red", "datum": random_value() });
	a.push({ "color": "orange", "datum": random_value() });
	a.push({ "color": "yellow", "datum": random_value() });
	a.push({ "color": "green", "datum": random_value() });
	a.push({ "color": "blue", "datum": random_value() });
	a.push({ "color": "indigo", "datum": random_value() });
	a.push({ "color": "violet", "datum": random_value() });
	return a;
	}

	var viz_vega_spec = {
	"name": "treemap",
	"width": 900,
	"height": 300,
	"padding": {"top":0, "bottom":0, "left":0, "right":0},
	"data": [
	{
	"name": "table",
	"values": randomized_data(),
	"transform": [
	{"type": "facet", "keys": ["data.color"]},
	{"type": "treemap", "value": "data.datum", "sticky": false, "ratio": 1},
	{"type": "filter", "test": "!d.children"}
	]
	}
	],
	"marks": [
	{
	"type": "rect",
	"from": {"data": "table"},
	"properties": {
	"update": {
	"fill": {"field": "data.color"},
	"opacity": {"value": 0.7},
	"x": {"field": "x"},
	"y": {"field": "y"},
	"width": {"field": "width"},
	"height": {"field": "height"},
	"stroke": {"value": "red"},
	"strokeWidth": {"value": 0}
	},
	"hover": {
	"strokeWidth": {"value": 10}
	}
	}
	},
	{
	"type": "text",
	"from": {"data": "table"},
	"interactive": false,
	"properties": {
	"update": {
	"x": {"field": "x"},
	"y": {"field": "y"},
	"dx": {"value": 4},
	"dy": {"value": 4},
	"font": {"value": "Helvetica Neue"},
	"fontSize": {"field": "data.datum"},
	"align": {"value": "left"},
	"baseline": {"value": "top"},
	"fill": {"value": "#FFF"},
	"text": {"field": "data.color"}
	}
	}
	}
	]
	};

	viz_render = function() {
	viz_view.width(window.innerWidth-viz_vega_spec.padding.left-viz_vega_spec.padding.right).height(window.innerHeight-viz_vega_spec.padding.top - viz_vega_spec.padding.bottom).renderer('canvas').update();
	}

	vg.parse.spec(viz_vega_spec, function(chart) {
	self.viz_chart = chart;
	self.viz_view = viz_chart({el:'#viz-visualization'});
	viz_render();
	});

	window.onresize = viz_render;

	var viz_interval = setInterval(function(){
	console.log("redrawing");
	viz_view.data({table:randomized_data()}).update({duration:1000 });
	},1000);

	//]]>
	</script>
	<style
	id="viz-styles"
	type="text/css">
	</style>
	</head>
	<body
	style="padding:0; margin:0; overflow:hidden;">
	<div
	id="viz-visualization">
	</div>
	</body>
	</html>