blaklaybul/index.html

## index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>hochemoche</title>


  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>

 </head>

  <body>
	  <div class = "container">

		  <div id = "viz">
			  <script type = "text/javascript">

			  var w = 940;
			  var h = 300;
			  var margin = 60;
			  var count = 1;
			  var data =
			  [
			  				{"let" : "h", "val" : 1},
							{"let" : "o", "val" : 2},
							{"let" : "c", "val" : 3},
							{"let" : "h", "val" : 4},
							{"let" : "e", "val" : 5},
							{"let" : "m", "val" : 6},
							{"let" : "o", "val" : 7},
							{"let" : "c", "val" : 8},
							{"let" : "h", "val" : 9},
							{"let" : "e", "val" : 10}
						];


			  var scale = d3.scale.linear()
			  				.domain([1,data.length])
							.range([margin, w-margin]);


			  var svg = d3.select("#viz")
			  			.append("svg")
			 		   	.attr("width",w)
						.attr("height",h);


				svg.selectAll("circle")
					.data(data)
					.enter()
					.append("circle")
					.style("stroke", "gray")
					.style("fill", "white")
					.attr("cx", function(d){return scale(d.val);})
					.attr("cy", h/2)
					.attr("r", 20);

					svg.selectAll("text")
						.data(data)
						.enter()
						.append("text")
						.attr("x", function(d) {return scale(d.val);})
						.attr("y", h/2 + 4)
						.attr("text-anchor", "middle")
						.text(function(d){return d.let;})
						.attr("fill", "black")
						.style("font-family", "Shadows Into Light");


					d3.selectAll("circle")
					.on("mouseover", function(){


					svg.selectAll("circle")
						.data(data)
						.transition()
						.duration(500)
						.ease("linear")
						.attr("r", function(){return Math.random() * 50})
						.style("fill", function(d){return d3.rgb(Math.random()*255,Math.random()*255 ,Math.random()*255).brighter();});

				});


			  </script>
		  </div>
		  </div>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>hochemoche</title>


	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>

	</head>

	<body>
	<div class = "container">

	<div id = "viz">
	<script type = "text/javascript">

	var w = 940;
	var h = 300;
	var margin = 60;
	var count = 1;
	var data =
	[
	{"let" : "h", "val" : 1},
	{"let" : "o", "val" : 2},
	{"let" : "c", "val" : 3},
	{"let" : "h", "val" : 4},
	{"let" : "e", "val" : 5},
	{"let" : "m", "val" : 6},
	{"let" : "o", "val" : 7},
	{"let" : "c", "val" : 8},
	{"let" : "h", "val" : 9},
	{"let" : "e", "val" : 10}
	];


	var scale = d3.scale.linear()
	.domain([1,data.length])
	.range([margin, w-margin]);



	var svg = d3.select("#viz")
	.append("svg")
	.attr("width",w)
	.attr("height",h);


	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.style("stroke", "gray")
	.style("fill", "white")
	.attr("cx", function(d){return scale(d.val);})
	.attr("cy", h/2)
	.attr("r", 20);

	svg.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.attr("x", function(d) {return scale(d.val);})
	.attr("y", h/2 + 4)
	.attr("text-anchor", "middle")
	.text(function(d){return d.let;})
	.attr("fill", "black")
	.style("font-family", "Shadows Into Light");


	d3.selectAll("circle")
	.on("mouseover", function(){


	svg.selectAll("circle")
	.data(data)
	.transition()
	.duration(500)
	.ease("linear")
	.attr("r", function(){return Math.random() * 50})
	.style("fill", function(d){return d3.rgb(Math.random()255,Math.random()255 ,Math.random()*255).brighter();});

	});


	</script>
	</div>
	</div>
	</body>
	</html>