markarios · August 29, 2015 14:04
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>Best Page Title Ever</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 <link href="http://thomasf.github.io/solarized-css/solarized-light.min.css" rel="stylesheet"></link>
 <style>
 li {
  padding:10px;
 }

 .chart {
  background-color: white;
  width:500px;
  height:500px;
  border:solid;
 }
 </style>
 </head>
 <body>
 <h2>Data Visualization</h2>
 <h1>D3.js</h1>
 <h3>Selections - Building Your First Beautiful Data Visualization</h3>
 <h6><p>
  Instructions: You're going to start at step one by opening your brower's console. Then you're going to type each subsequent piece of code into the console and press enter.  After running each piece of code, inspect the DOM (Document Object Model) and observe what your code did.   
  <p>
  Caution 1: Just copy and paste if it's a long string but it's better to type out the code to build muscle memory.  
  <p>
  Caution 2: Do not refresh your browser instance or you will have to reload all the code you had previously typed in!
 </p></h6>
 <ol>
  <li>Open Your Browser's Console <br>(keyboard shortcut: <em>alt + command + i or Chrome: View/Developer/Javascript Console</em>.
  <li> <code>var data = [], 
    dataPoints = 10;<code>

 <li> var width = 500,
     height = 500;

 <li>function rand(value) {
  return Math.floor(value*Math.random());
 }

 <li>var ballRadius = width/100;
 <li>var colorBrewer = ['rgba(141,211,199,.25)','rgba(255,255,179,.25)','rgba(190,186,218,.25)','rgba(251,128,114,.25)'];

 <li>function randColor(){
 return colorBrewer[Math.floor(Math.random()*4)];
 };


 <li>for (var i = dataPoints - 1; i >= 0; i--) {<br>
   data.push({radius : ballRadius,x: rand(width), y: rand(height), color: randColor() });
 };

 <li>var svg = d3.select("div")<br>
  .append("svg")<br>
  .attr("width",width)<br>
  .attr("height",height);



 <li>function render(data) {<br>
    d3.select("svg").selectAll("circle")<br>
            .data(data)<br>
           .enter()<br>
            .append("circle");<br><br>

     d3.select("svg").selectAll("circle")<br>
            .data(data)<br>
            .attr("r", function(d) {return d.radius;}) <br>
            .attr("cx",function(d) {return d.x})<br>
            .attr("cy",function(d) {return d.y})<br>
            .attr("fill",function(d){return d.color});<br><br>

     d3.select("body").selectAll("circle")<br>
            .data(data)<br>
            .exit()<br>
            .remove();<br>
  }<br>

 <li>setInterval(function () {<br>
  render(data);<br>
  for (var i = dataPoints - 1; i >= 0; i--) {<br>
   data.push({radius : ballRadius,x: rand(width), y: rand(height), color:randColor() });<br>
  };
 }, 10);

 </ol>


 <div class="chart"></div>

 <script>
 // javascript code
 </script>
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Best Page Title Ever</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<link href="http://thomasf.github.io/solarized-css/solarized-light.min.css" rel="stylesheet"></link>
	<style>
	li {
	padding:10px;
	}

	.chart {
	background-color: white;
	width:500px;
	height:500px;
	border:solid;
	}
	</style>
	</head>
	<body>
	<h2>Data Visualization</h2>
	<h1>D3.js</h1>
	<h3>Selections - Building Your First Beautiful Data Visualization</h3>
	<h6><p>
	Instructions: You're going to start at step one by opening your brower's console. Then you're going to type each subsequent piece of code into the console and press enter. After running each piece of code, inspect the DOM (Document Object Model) and observe what your code did.
	<p>
	Caution 1: Just copy and paste if it's a long string but it's better to type out the code to build muscle memory.
	<p>
	Caution 2: Do not refresh your browser instance or you will have to reload all the code you had previously typed in!
	</p></h6>
	<ol>
	<li>Open Your Browser's Console <br>(keyboard shortcut: <em>alt + command + i or Chrome: View/Developer/Javascript Console</em>.
	<li> <code>var data = [],
	dataPoints = 10;<code>

	<li> var width = 500,
	height = 500;

	<li>function rand(value) {
	return Math.floor(value*Math.random());
	}

	<li>var ballRadius = width/100;
	<li>var colorBrewer = ['rgba(141,211,199,.25)','rgba(255,255,179,.25)','rgba(190,186,218,.25)','rgba(251,128,114,.25)'];

	<li>function randColor(){
	return colorBrewer[Math.floor(Math.random()*4)];
	};


	<li>for (var i = dataPoints - 1; i >= 0; i--) {<br>
	data.push({radius : ballRadius,x: rand(width), y: rand(height), color: randColor() });
	};

	<li>var svg = d3.select("div")<br>
	.append("svg")<br>
	.attr("width",width)<br>
	.attr("height",height);



	<li>function render(data) {<br>
	d3.select("svg").selectAll("circle")<br>
	.data(data)<br>
	.enter()<br>
	.append("circle");<br><br>

	d3.select("svg").selectAll("circle")<br>
	.data(data)<br>
	.attr("r", function(d) {return d.radius;}) <br>
	.attr("cx",function(d) {return d.x})<br>
	.attr("cy",function(d) {return d.y})<br>
	.attr("fill",function(d){return d.color});<br><br>

	d3.select("body").selectAll("circle")<br>
	.data(data)<br>
	.exit()<br>
	.remove();<br>
	}<br>

	<li>setInterval(function () {<br>
	render(data);<br>
	for (var i = dataPoints - 1; i >= 0; i--) {<br>
	data.push({radius : ballRadius,x: rand(width), y: rand(height), color:randColor() });<br>
	};
	}, 10);

	</ol>


	<div class="chart"></div>

	<script>
	// javascript code
	</script>
	</body>
	</html>
No results found