aogriffiths/.AREADME

## .AREADME
An d3 qr code generator called d3qr

see it more clearly at http://bl.ocks.org/3152257

## .project
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>3152257-d3qr</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
	</buildSpec>
	<natures>
		<nature>com.aptana.projects.webnature</nature>
	</natures>
</projectDescription>

## index.html
<html lang="en">
  <head>
    <title>d3qr</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <!-- JS -->
    <!--
    <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
    -->
    <script type="text/javascript" src="../2902093/d3.v2.js"></script>
    <script type="text/javascript" src="../2902093/qrcode.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
  	<h1>qrd3</h1>
    <div id="vis"></div>
    <script type="text/javascript">
        main();
    </script>
  </body>
</html>

## main.js
var __S__ = 8;
function main() {
  var svg = d3.select("#vis").append("svg")
    .attr("width", 800)
    .attr("height", 600);

  var qr = create_qrcode("cool");
  var bin=[];
  var overides=[];
  for (var r = 0; r < qr.getModuleCount(); r += 1) {
    for (var c = 0; c < qr.getModuleCount(); c += 1) {
      var cell = {
          r:r,
          c:c,
          v:qr.isDark(r, c)
      }
      bin.push(cell);
    }
  }

  svg.selectAll("rect")
     .data(bin)
     .enter()
     .append("rect")
     .attr("x",function(d){return d.c*__S__})
     .attr("y",function(d){return d.r*__S__})
     .attr("width",__S__)
     .attr("height",__S__)
     .attr("fill",function(d){return d.v ? "black" : "white"})
     .attr("cursor", "crosshair")
     .on("mousedown",down)
     .on("mouseover",over)
     .on("mouseup",up)

  var changing = false;
  var changeto = false;
  function down(d, i){
    changing = true;
    if(overides[d.r] != undefined && overides[d.r][d.c] != undefined){
      changeto = ! overides[d.r][d.c];
    }else{
      changeto = ! d.v;
    }
    over.call(this,d,i);
  }
  function up(){
    changing = false;
  }
  function over(d,i){
    if(changing){
      var rect1 = d3.select(this);
      if(overides[d.r]==undefined)overides[d.r]=[];
      overides[d.r][d.c]=changeto;
      var colour = rect1.attr("fill");

      rect2=svg
        .append("rect")
        .datum(rect1.datum())
        .attr("x",function(d){return d.c*__S__})
        .attr("y",function(d){return d.r*__S__})
        .attr("height",__S__)
        .attr("fill", changeto ?  "black" : "white"  );

      rect2
        .transition(500)
        .attr("width",__S__)
        .each("end",makenext(rect1,rect2));

      function makenext(rect1,rect2){
        return function next(){
          rect1.attr("fill", changeto ?  "black" : "white"  );
          rect2.remove();
        }
      }


    }
  }
}


var create_qrcode = function(text, typeNumber, errorCorrectLevel, table) {
  var qr = qrcode(typeNumber || 4, errorCorrectLevel || 'M');
  qr.addData(text);
  qr.make();
  return qr;
};
	An d3 qr code generator called d3qr

	see it more clearly at http://bl.ocks.org/3152257
	<?xml version="1.0" encoding="UTF-8"?>
	<projectDescription>
	<name>3152257-d3qr</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
	</buildSpec>
	<natures>
	<nature>com.aptana.projects.webnature</nature>
	</natures>
	</projectDescription>
	<html lang="en">
	<head>
	<title>d3qr</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<!-- JS -->
	<!--
	<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
	-->
	<script type="text/javascript" src="../2902093/d3.v2.js"></script>
	<script type="text/javascript" src="../2902093/qrcode.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</head>
	<body>
	<h1>qrd3</h1>
	<div id="vis"></div>
	<script type="text/javascript">
	main();
	</script>
	</body>
	</html>
	var __S__ = 8;
	function main() {
	var svg = d3.select("#vis").append("svg")
	.attr("width", 800)
	.attr("height", 600);

	var qr = create_qrcode("cool");
	var bin=[];
	var overides=[];
	for (var r = 0; r < qr.getModuleCount(); r += 1) {
	for (var c = 0; c < qr.getModuleCount(); c += 1) {
	var cell = {
	r:r,
	c:c,
	v:qr.isDark(r, c)
	}
	bin.push(cell);
	}
	}

	svg.selectAll("rect")
	.data(bin)
	.enter()
	.append("rect")
	.attr("x",function(d){return d.c*__S__})
	.attr("y",function(d){return d.r*__S__})
	.attr("width",__S__)
	.attr("height",__S__)
	.attr("fill",function(d){return d.v ? "black" : "white"})
	.attr("cursor", "crosshair")
	.on("mousedown",down)
	.on("mouseover",over)
	.on("mouseup",up)

	var changing = false;
	var changeto = false;
	function down(d, i){
	changing = true;
	if(overides[d.r] != undefined && overides[d.r][d.c] != undefined){
	changeto = ! overides[d.r][d.c];
	}else{
	changeto = ! d.v;
	}
	over.call(this,d,i);
	}
	function up(){
	changing = false;
	}
	function over(d,i){
	if(changing){
	var rect1 = d3.select(this);
	if(overides[d.r]==undefined)overides[d.r]=[];
	overides[d.r][d.c]=changeto;
	var colour = rect1.attr("fill");

	rect2=svg
	.append("rect")
	.datum(rect1.datum())
	.attr("x",function(d){return d.c*__S__})
	.attr("y",function(d){return d.r*__S__})
	.attr("height",__S__)
	.attr("fill", changeto ? "black" : "white" );

	rect2
	.transition(500)
	.attr("width",__S__)
	.each("end",makenext(rect1,rect2));

	function makenext(rect1,rect2){
	return function next(){
	rect1.attr("fill", changeto ? "black" : "white" );
	rect2.remove();
	}
	}


	}
	}
	}


	var create_qrcode = function(text, typeNumber, errorCorrectLevel, table) {
	var qr = qrcode(typeNumber \|\| 4, errorCorrectLevel \|\| 'M');
	qr.addData(text);
	qr.make();
	return qr;
	};