WilliamQLiu/index.html

## index.html
<!DOCTYPE html>
<!-- D3 Template, can run with: python -m SimpleHTTPServer 8000
     Reference: https://github.com/mbostock/d3/wiki/API-Reference
-->
<html>
  <head>
    <!-- Load D3 from site -->
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


    <!-- CSS (Styling) -->
    <style type="text/css">

    /* Applied to all <p> tags */
    p {
      color: blue;
    }

    /* Applied to all tags with the class "red" */
    .red {
      background: red;
    }

    /* Applied to the tag with the id "some-id" */
    #some-id {
      font-style: italic;
    }

    /* Applied only to <p> tags that are inside <li> tags */
    li pi {
      color: #0C0;
    }

    </style>
    <!-- End CSS (Styling) -->

    </head>

  <body>

  <div>
    <p>Normal Paragraph</p>
    <p class="red">Red paragraph</p>
  </div>

  <ol>
    <li id="some-id">Unique element</li>
    <li>Another list element</li>
    <li>
      <p>Paragraph inside list element</p>
      <p>Second paragraph</p>
    </li>
  </ol>

  <!-- Using listeners -->
  <h1 id="click-me">Click on me!</h1>
  <p class="hover-me">Hover over me!</p>

  <!-- Begin Javascript -->
  <script type="text/javascript">

  /* Basic D3 Updating Pattern for taking data and binding to elements */
  var dataset = [8, 48, 14, 31, 23];

  svg = d3.select("body").append("svg").attr({
    width: 600,
    height: 400
  });

  svg.selectAll("rect")  // Begin by selecting a set of elements (say 'rect.bars', rect with class bars)
    .data(dataset)  // Bind our dataset to the data() method, can be say d3.range(5)
    .enter()  // Returns placeholders for our missing elements
    .append("rect")  // Creates the new rectangles
    .attr({  // Give attributes
      x: function(d, i) { return i * 101; },
      y: function(d, i) { return 400 - (d * 5)},  // Notice that y is upside down
      width: 100,
      height: function(d) { return d * 5},
      fill: "orange"
    });

  /* Add more data */
  var moreData = d3.range(4);  // Sets properties, but doesn't come in until enter() method
  var rects = svg.selectAll("rect").data(moreData);

  rects.attr("fill", "#ccc");  // Changes color, but only for the ones we've selected
  rects.enter();  // Only gets the data you selected
  rects.exit().attr("fill", "blue");  // Fill color for data that you didn't select
  //rects.exit().remove();  // Remove elements that you no longer need


  /*
  // DOM API for Selection - Example 1
  document.getElementById('some-id');  // <li id="some-id">Unique element</li>
  document.getElementsByTagName('p').length;  // 4
  var reds = document.getElementsByClassName('red');
  reds[0].innerText // "Red paragraph"
  */

  // D3 API for Selection - Example 1
  d3.select('p').size(); // select() only finds one (e.g. 1)
  d3.selectAll('p').size(); // selectAll() finds all (e.g. 4)
  var reds = d3.selectAll('.red');  // [ > Array[1]]
  reds.text();  // "Red paragraph"

  /*
  // DOM API for Hover - Example 2
  var clickMe = document.getElementById('click-me');
  clickMe.onclick = function() {
    if (this.style.backgroundColor) {
      this.style.backgroundColor = '';
    } else {
      this.style.backgroundColor = 'red';
    }
  }
  */

  // D3 API for Hover - Example 2
  d3.selectAll('.hover-me')
    .on('mouseover', function() {
      this.style.backgroundColor = 'yellow';
    })
    .on('mouseleave', function() {
      this.style.backgroundColor = '';
    });

  </script>
  <!-- End Javascript -->

  </body>
</html>
	<!DOCTYPE html>
	<!-- D3 Template, can run with: python -m SimpleHTTPServer 8000
	Reference: https://github.com/mbostock/d3/wiki/API-Reference
	-->
	<html>
	<head>
	<!-- Load D3 from site -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


	<!-- CSS (Styling) -->
	<style type="text/css">

	/* Applied to all <p> tags */
	p {
	color: blue;
	}

	/* Applied to all tags with the class "red" */
	.red {
	background: red;
	}

	/* Applied to the tag with the id "some-id" */
	#some-id {
	font-style: italic;
	}

	/* Applied only to <p> tags that are inside <li> tags */
	li pi {
	color: #0C0;
	}

	</style>
	<!-- End CSS (Styling) -->

	</head>

	<body>

	<div>
	<p>Normal Paragraph</p>
	<p class="red">Red paragraph</p>
	</div>

	<ol>
	<li id="some-id">Unique element</li>
	<li>Another list element</li>
	<li>
	<p>Paragraph inside list element</p>
	<p>Second paragraph</p>
	</li>
	</ol>

	<!-- Using listeners -->
	<h1 id="click-me">Click on me!</h1>
	<p class="hover-me">Hover over me!</p>

	<!-- Begin Javascript -->
	<script type="text/javascript">

	/* Basic D3 Updating Pattern for taking data and binding to elements */
	var dataset = [8, 48, 14, 31, 23];

	svg = d3.select("body").append("svg").attr({
	width: 600,
	height: 400
	});

	svg.selectAll("rect") // Begin by selecting a set of elements (say 'rect.bars', rect with class bars)
	.data(dataset) // Bind our dataset to the data() method, can be say d3.range(5)
	.enter() // Returns placeholders for our missing elements
	.append("rect") // Creates the new rectangles
	.attr({ // Give attributes
	x: function(d, i) { return i * 101; },
	y: function(d, i) { return 400 - (d * 5)}, // Notice that y is upside down
	width: 100,
	height: function(d) { return d * 5},
	fill: "orange"
	});

	/* Add more data */
	var moreData = d3.range(4); // Sets properties, but doesn't come in until enter() method
	var rects = svg.selectAll("rect").data(moreData);

	rects.attr("fill", "#ccc"); // Changes color, but only for the ones we've selected
	rects.enter(); // Only gets the data you selected
	rects.exit().attr("fill", "blue"); // Fill color for data that you didn't select
	//rects.exit().remove(); // Remove elements that you no longer need


	/*
	// DOM API for Selection - Example 1
	document.getElementById('some-id'); // <li id="some-id">Unique element</li>
	document.getElementsByTagName('p').length; // 4
	var reds = document.getElementsByClassName('red');
	reds[0].innerText // "Red paragraph"
	*/

	// D3 API for Selection - Example 1
	d3.select('p').size(); // select() only finds one (e.g. 1)
	d3.selectAll('p').size(); // selectAll() finds all (e.g. 4)
	var reds = d3.selectAll('.red'); // [ > Array[1]]
	reds.text(); // "Red paragraph"

	/*
	// DOM API for Hover - Example 2
	var clickMe = document.getElementById('click-me');
	clickMe.onclick = function() {
	if (this.style.backgroundColor) {
	this.style.backgroundColor = '';
	} else {
	this.style.backgroundColor = 'red';
	}
	}
	*/

	// D3 API for Hover - Example 2
	d3.selectAll('.hover-me')
	.on('mouseover', function() {
	this.style.backgroundColor = 'yellow';
	})
	.on('mouseleave', function() {
	this.style.backgroundColor = '';
	});

	</script>
	<!-- End Javascript -->

	</body>
	</html>