ijlyttle · August 29, 2015 14:03
diff --git a/vega_url_transitions.html b/vega_url_transitions.html
 <!DOCTYPE html>
 <html>
 <head>
  <script src="https://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
  <script src="https://trifacta.github.io/vega/vega.js"></script>
 </head>
 <body>
 
 <script type="text/javascript">
 var url_spec = {
  	"width" : 400,
  	"height" : 200,
  	"data" : [
    	{
      		"name": "url",
    	}
  	],
 	"scales" : [
 		{
 			"name" : "x",
 			"domainMin" : 0,
 			"domainMax" : 3,
 			"nice" : true,
 			"range" : "width"
 		},
 		{
 			"name" : "y",
 			"domainMin" : 0,
 			"domainMax" : 3,
 			"nice" : true,
 			"range" : "height"
 		}
 	],
 	"marks" : [
 		{
 			"type" : "image",
 			"properties" : {
 				"update" : {
 					"fill" : {
 						"value" : "#000000"
 					},
 					"x" : {
 						"scale" : "x",
 						"field" : "data.x"
 					},
 					"y" : {
 						"scale" : "y",
 						"field" : "data.y"
 					},
 					"width" : {
 						"value" : 100
 					},
 					"height" : {
 						"value" : 100
 					},
 					"url" : {
 						"field" : "data.url_img"
 					},
 					"baseline" : {
 						"value" : "middle"
 					},
 					"align" : {
 						"value" : "center"
 					}
 				},
 			},
 			"from" : {
 				"data" : "url"
 			}
 		}
 	],
 	"legends" : [],
 	"axes" : [
 		{"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "x"},
 		{"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "y"}
 	]
 }
 
 var url_se = {
  "url" : [
    {"x": 1, "y": 2, "url_img": "http://www.schneider-electric.com/navigation/images/se_logo.gif"}
  ]
 };
 
 var url_rstudio_ball = {
  "url" : [
    {"x": 1, "y": 1, "url_img": "http://www.rstudio.com/wp-content/uploads/2014/06/RStudio-Ball.png"}
  ]
 };
  
 var url_rstudio = {
  "url" : [
    {"x": 2, "y": 2, "url_img": "http://www.rstudio.com/wp-content/uploads/2014/03/blue-250.png"}
  ]
 };
 
 
 var vis;
 vg.parse.spec(url_spec, function(chart) {
  vis = chart({el:"#vis", renderer: "canvas"});
  vis.data(url_se);
  vis.update();
 });
 
 
 function load_data(data, duration) {
  vis.data(data);
  vis.update({duration: duration});
 }
 
 
 function display_item_url() {
  var str = vis.model().scene().items[0].items[0].items
    .map(function(item) { return item.url; }).toString();
 
  document.getElementById('textout').innerHTML = str;
 }
 
 setInterval(display_item_url, 100);
 
 
 </script>
 <div>
 When switching between images, using a non-zero duration, if the image urls are "close" enough, the urls seem to be "interpolated" during the transition, resulting in invalid urls. 
 <p>The url for Schneider Electric logo is "far" from the urls for RStudio. The two urls for RStudio are "close".
 <p>
 Apologies to Schneider Electric and RStudio for not preventing distortion of the logos. Thanks to Winston Chang for "donating" his html code to use as a template for this. 
 <br><br>
 <a href="#" onclick="load_data(url_se, 0);">1. Schneider Electric logo, 0ms duration</a>
 <br><br>
 <a href="#" onclick="load_data(url_rstudio, 0);">2. RStudio logo 0ms duration</a>
 <br><br>
 <a href="#" onclick="load_data(url_rstudio_ball, 0);">3. RStudio Ball logo, 0ms duration</a>
 <br><br>
 <a href="#" onclick="load_data(url_se, 300);">4. Schneider Electric logo, 300ms duration</a>
 <br><br>
 <a href="#" onclick="load_data(url_rstudio, 300);">5. RStudio logo 300ms duration</a>
 <br><br>
 <a href="#" onclick="load_data(url_rstudio_ball, 300);">6. RStudio Ball logo, 300ms duration</a>
 <br><br>
 
 <div id="vis"></div>
 
 <hr>
 <div>
 Hi There!
 Output of <code>vis.model().scene().items[0].items[0].items.map(function(item) { return item.url; }).toString()</code> updated every 100ms:
 
 <div id="textout"></div>
 </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
	<script src="https://trifacta.github.io/vega/vega.js"></script>
	</head>
	<body>

	<script type="text/javascript">
	var url_spec = {
	"width" : 400,
	"height" : 200,
	"data" : [
	{
	"name": "url",
	}
	],
	"scales" : [
	{
	"name" : "x",
	"domainMin" : 0,
	"domainMax" : 3,
	"nice" : true,
	"range" : "width"
	},
	{
	"name" : "y",
	"domainMin" : 0,
	"domainMax" : 3,
	"nice" : true,
	"range" : "height"
	}
	],
	"marks" : [
	{
	"type" : "image",
	"properties" : {
	"update" : {
	"fill" : {
	"value" : "#000000"
	},
	"x" : {
	"scale" : "x",
	"field" : "data.x"
	},
	"y" : {
	"scale" : "y",
	"field" : "data.y"
	},
	"width" : {
	"value" : 100
	},
	"height" : {
	"value" : 100
	},
	"url" : {
	"field" : "data.url_img"
	},
	"baseline" : {
	"value" : "middle"
	},
	"align" : {
	"value" : "center"
	}
	},
	},
	"from" : {
	"data" : "url"
	}
	}
	],
	"legends" : [],
	"axes" : [
	{"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "x"},
	{"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "y"}
	]
	}

	var url_se = {
	"url" : [
	{"x": 1, "y": 2, "url_img": "http://www.schneider-electric.com/navigation/images/se_logo.gif"}
	]
	};

	var url_rstudio_ball = {
	"url" : [
	{"x": 1, "y": 1, "url_img": "http://www.rstudio.com/wp-content/uploads/2014/06/RStudio-Ball.png"}
	]
	};

	var url_rstudio = {
	"url" : [
	{"x": 2, "y": 2, "url_img": "http://www.rstudio.com/wp-content/uploads/2014/03/blue-250.png"}
	]
	};


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


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


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

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

	setInterval(display_item_url, 100);


	</script>
	<div>
	When switching between images, using a non-zero duration, if the image urls are "close" enough, the urls seem to be "interpolated" during the transition, resulting in invalid urls.
	<p>The url for Schneider Electric logo is "far" from the urls for RStudio. The two urls for RStudio are "close".
	<p>
	Apologies to Schneider Electric and RStudio for not preventing distortion of the logos. Thanks to Winston Chang for "donating" his html code to use as a template for this.
	<br><br>
	<a href="#" onclick="load_data(url_se, 0);">1. Schneider Electric logo, 0ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(url_rstudio, 0);">2. RStudio logo 0ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(url_rstudio_ball, 0);">3. RStudio Ball logo, 0ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(url_se, 300);">4. Schneider Electric logo, 300ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(url_rstudio, 300);">5. RStudio logo 300ms duration</a>
	<br><br>
	<a href="#" onclick="load_data(url_rstudio_ball, 300);">6. RStudio Ball logo, 300ms duration</a>
	<br><br>

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

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

	<div id="textout"></div>
	</div>
	</body>
	</html>
No results found