jspeis/test.html

## test.html
<!doctype html>
<meta charset="utf-8">

<!-- load D3js -->
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>


<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>

<!-- load D3plus after D3js -->
<script src="d3plus.js"></script>
<script src="FileSaver.js"></script>
<script src="canvas-toBlob.js"></script>

<!-- create container element for visualization -->
<input type="button" value="screencap" onclick="cap();"/>
<div id="viz"></div>
<canvas id="canvas" ></canvas>


<script>
</script>
<script>
  // sample data array
  var sample_data = [
    {"value": 100, "name": "alpha"},
    {"value": 70, "name": "beta"},
    {"value": 40, "name": "gamma"},
    {"value": 15, "name": "delta"},
    {"value": 5, "name": "epsilon"},
    {"value": 1, "name": "zeta"}
  ]
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data(sample_data)  // data to use with the visualization
    .type("tree_map")   // visualization type
    .id("name")         // key for which our data is unique on
    .size("value")      // sizing of blocks
    .draw()             // finally, draw the visualization!


function cap() {
      var svg = document.querySelector("svg");

      var canvas = document.querySelector("#canvas");
      //canvas.width = svg.width;
      if (d3plus.client.ie){
            console.log("we are in ie");
            alert("is IE");
            //svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
            //svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
            innr = (new XMLSerializer()).serializeToString(svg);

      }else{
              innr = svg.outerHTML;
        }

      canvg('canvas', innr);
      imgData = canvas.toDataURL('image/png');
        canvas.toBlob(function(blob) {
            saveAs(blob, "pretty_image.png");
    });
      //pdf.addHTML(document.body, function() {
      //    pdf.save('stacking-plan.pdf');
      //});
}


</script>
	<!doctype html>
	<meta charset="utf-8">

	<!-- load D3js -->
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>


	<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
	<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
	<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>

	<!-- load D3plus after D3js -->
	<script src="d3plus.js"></script>
	<script src="FileSaver.js"></script>
	<script src="canvas-toBlob.js"></script>

	<!-- create container element for visualization -->
	<input type="button" value="screencap" onclick="cap();"/>
	<div id="viz"></div>
	<canvas id="canvas" ></canvas>


	<script>
	</script>
	<script>
	// sample data array
	var sample_data = [
	{"value": 100, "name": "alpha"},
	{"value": 70, "name": "beta"},
	{"value": 40, "name": "gamma"},
	{"value": 15, "name": "delta"},
	{"value": 5, "name": "epsilon"},
	{"value": 1, "name": "zeta"}
	]
	// instantiate d3plus
	var visualization = d3plus.viz()
	.container("#viz") // container DIV to hold the visualization
	.data(sample_data) // data to use with the visualization
	.type("tree_map") // visualization type
	.id("name") // key for which our data is unique on
	.size("value") // sizing of blocks
	.draw() // finally, draw the visualization!


	function cap() {
	var svg = document.querySelector("svg");

	var canvas = document.querySelector("#canvas");
	//canvas.width = svg.width;
	if (d3plus.client.ie){
	console.log("we are in ie");
	alert("is IE");
	//svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
	//svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
	innr = (new XMLSerializer()).serializeToString(svg);

	}else{
	innr = svg.outerHTML;
	}

	canvg('canvas', innr);
	imgData = canvas.toDataURL('image/png');
	canvas.toBlob(function(blob) {
	saveAs(blob, "pretty_image.png");
	});
	//pdf.addHTML(document.body, function() {
	// pdf.save('stacking-plan.pdf');
	//});
	}


	</script>