wch/vega-newdata.html

## vega-newdata.html
<!DOCTYPE html>
<html>
<head>
  <script src="http://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
  <script src="http://trifacta.github.io/vega/vega.js"></script>
</head>
<body>

<script type="text/javascript">
var iris_spec = {
  "width": 200,
  "height": 200,
  "data": [
    {
      "name": "iris",
    }
  ],
  "scales": [
    {
      "name": "x",
      "nice": true,
      "range": "width",
      "domain": {"data": "iris", "field": "data.sepalWidth"}
    },
    {
      "name": "y",
      "nice": true,
      "range": "height",
      "domain": {"data": "iris", "field": "data.petalLength"}
    },
    {
      "name": "c",
      "type": "ordinal",
      "domain": {"data": "iris", "field": "data.species"},
      "range": "category10"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"},
    {"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"}
  ],
  "legends": [
    {
      "fill": "c",
      "title": "Species",
      "offset": 0,
      "properties": {
        "symbols": {
          "fillOpacity": {"value": 0.5},
          "stroke": {"value": "transparent"}
        }
      }
    }
  ],
  "marks": [
    {
      "type": "symbol",
      "from": {"data": "iris"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.sepalWidth"},
          "y": {"scale": "y", "field": "data.petalLength"},
          "fill": {"scale": "c", "field": "data.species"},
          "fillOpacity": {"value": 0.5}
        },
        "update": {
          "x": {"scale": "x", "field": "data.sepalWidth"},
          "y": {"scale": "y", "field": "data.petalLength"},
          "fill": {"scale": "c", "field": "data.species"},
          "size": {"value": 100},
          "stroke": {"value": "transparent"}
        },
        "hover": {
          "size": {"value": 300},
          "stroke": {"value": "white"}
        }
      }
    }
  ]
}

var iris_data = {
  "iris" : [
    {"sepalWidth": 1, "petalLength": 9, "species": "setosa"},
    {"sepalWidth": 2, "petalLength": 8, "species": "setosa1"},
    {"sepalWidth": 3, "petalLength": 7, "species": "setosa1"}
  ]
};


var iris_data2 = {
  "iris" : [
    {"sepalWidth": 1, "petalLength": 9, "species": "setosa"},
    {"sepalWidth": 2, "petalLength": 8, "species": "setosa1"},
    {"sepalWidth": 3, "petalLength": 7, "species": "setosa1"},
    {"sepalWidth": 4, "petalLength": 6, "species": "versicolor"},
    {"sepalWidth": 5, "petalLength": 5, "species": "versicolor"},
    {"sepalWidth": 6, "petalLength": 4, "species": "versicolor1"},
    {"sepalWidth": 7, "petalLength": 3, "species": "virginica"},
    {"sepalWidth": 8, "petalLength": 2, "species": "virginica1"},
    {"sepalWidth": 9, "petalLength": 1, "species": "virginica1"}
  ]
};

var vis;
vg.parse.spec(iris_spec, function(chart) {
  vis = chart({el:"#vis", renderer: "canvas"});
  vis.data(iris_data);
  vis.update();
});


function load_data(data, duration) {
  vis.data(data);
  vis.update({duration: duration});
}


function display_item_size() {
  var str = vis.model().scene().items[0].items[0].items
    .map(function(item) { return item.size; }).toString();

  document.getElementById('textout').innerHTML = str;
}

setInterval(display_item_size, 100);


</script>
<div>
When loading a new, larger data with nonzero transition duration, the <code>size</code> of the resulting points is NaN. In some other cases, some fields have a possibly-related issue where numbers are treated as strings.
<br><br>
<a href="#" onclick="load_data(iris_data, 0);">load original data, 0ms duration</a>
<br><br>
<a href="#" onclick="load_data(iris_data2, 0);">load new, larger data, 0ms duration</a>
<br><br>
<a href="#" onclick="load_data(iris_data, 500);">load original data, 500ms duration</a>
<br><br>
<a href="#" onclick="load_data(iris_data2, 500);">load new, larger data, 500ms duration (this is the problematic one)</a>
<br><br>

<div id="vis"></div>

<hr>
<div>
Output of <code>vis.model().scene().items[0].items[0].items.map(function(item) { return item.size; }).toString()</code> updated every 100ms:

<div id="textout"></div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
	<script src="http://trifacta.github.io/vega/vega.js"></script>
	</head>
	<body>

	<script type="text/javascript">
	var iris_spec = {
	"width": 200,
	"height": 200,
	"data": [
	{
	"name": "iris",
	}
	],
	"scales": [
	{
	"name": "x",
	"nice": true,
	"range": "width",
	"domain": {"data": "iris", "field": "data.sepalWidth"}
	},
	{
	"name": "y",
	"nice": true,
	"range": "height",
	"domain": {"data": "iris", "field": "data.petalLength"}
	},
	{
	"name": "c",
	"type": "ordinal",
	"domain": {"data": "iris", "field": "data.species"},
	"range": "category10"
	}
	],
	"axes": [
	{"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"},
	{"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"}
	],
	"legends": [
	{
	"fill": "c",
	"title": "Species",
	"offset": 0,
	"properties": {
	"symbols": {
	"fillOpacity": {"value": 0.5},
	"stroke": {"value": "transparent"}
	}
	}
	}
	],
	"marks": [
	{
	"type": "symbol",
	"from": {"data": "iris"},
	"properties": {
	"enter": {
	"x": {"scale": "x", "field": "data.sepalWidth"},
	"y": {"scale": "y", "field": "data.petalLength"},
	"fill": {"scale": "c", "field": "data.species"},
	"fillOpacity": {"value": 0.5}
	},
	"update": {
	"x": {"scale": "x", "field": "data.sepalWidth"},
	"y": {"scale": "y", "field": "data.petalLength"},
	"fill": {"scale": "c", "field": "data.species"},
	"size": {"value": 100},
	"stroke": {"value": "transparent"}
	},
	"hover": {
	"size": {"value": 300},
	"stroke": {"value": "white"}
	}
	}
	}
	]
	}

	var iris_data = {
	"iris" : [
	{"sepalWidth": 1, "petalLength": 9, "species": "setosa"},
	{"sepalWidth": 2, "petalLength": 8, "species": "setosa1"},
	{"sepalWidth": 3, "petalLength": 7, "species": "setosa1"}
	]
	};


	var iris_data2 = {
	"iris" : [
	{"sepalWidth": 1, "petalLength": 9, "species": "setosa"},
	{"sepalWidth": 2, "petalLength": 8, "species": "setosa1"},
	{"sepalWidth": 3, "petalLength": 7, "species": "setosa1"},
	{"sepalWidth": 4, "petalLength": 6, "species": "versicolor"},
	{"sepalWidth": 5, "petalLength": 5, "species": "versicolor"},
	{"sepalWidth": 6, "petalLength": 4, "species": "versicolor1"},
	{"sepalWidth": 7, "petalLength": 3, "species": "virginica"},
	{"sepalWidth": 8, "petalLength": 2, "species": "virginica1"},
	{"sepalWidth": 9, "petalLength": 1, "species": "virginica1"}
	]
	};

	var vis;
	vg.parse.spec(iris_spec, function(chart) {
	vis = chart({el:"#vis", renderer: "canvas"});
	vis.data(iris_data);
	vis.update();
	});


	function load_data(data, duration) {
	vis.data(data);
	vis.update({duration: duration});
	}


	function display_item_size() {
	var str = vis.model().scene().items[0].items[0].items
	.map(function(item) { return item.size; }).toString();

	document.getElementById('textout').innerHTML = str;
	}

	setInterval(display_item_size, 100);


	</script>
	<div>
	When loading a new, larger data with nonzero transition duration, the <code>size</code> of the resulting points is NaN. In some other cases, some fields have a possibly-related issue where numbers are treated as strings.
	<br><br>
	<a href="#" onclick="load_data(iris_data, 0);">load original data, 0ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(iris_data2, 0);">load new, larger data, 0ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(iris_data, 500);">load original data, 500ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(iris_data2, 500);">load new, larger data, 500ms duration (this is the problematic one)</a>
	<br><br>

	<div id="vis"></div>

	<hr>
	<div>
	Output of <code>vis.model().scene().items[0].items[0].items.map(function(item) { return item.size; }).toString()</code> updated every 100ms:

	<div id="textout"></div>
	</div>
	</body>
	</html>