Notes from the D3 talk

instructions

Prerequisites:

- a web server
- a web browser
- a text editor (Brackets, Sublime, whatever you want)



0. cd to your project directory
1. download https://github.com/chriscanipe/web-app-template-simple to your Desktop
2. Open http://bl.ocks.org/mbostock/3887118
	- [ ] copy the code between `<script>` and `</script>`
	- [ ] open `js/script.js` and paste the copied code in after everything that's already there.
	- [ ] copy the code between `<style>` and `</style>`
	- [ ] open `css/
	
3. Change where and how the scripts are looking for the data:
 	- [ ] replace this:
		d3.tsv("data.tsv", function(error, data) {
	- with this:
		d3.csv("js/mlb.csv", function(error, data) {
		
4. Change what data will be rendered.

	  data.forEach(function(d) {
	    d.sepalLength = +d.sepalLength;
	    d.sepalWidth = +d.sepalWidth;
	  });
	
	Becomes:
	
	  data.forEach(function(d) {
	    d.W = +d.W;
	    d.RA = +d.RA;
	  });

5. Also change `sepalLength` for `W` and `sepalWidth` for `RA` in other places in the code, like in the lines starting `x.domain` and `y.domain` and under `svg.selectAll(".dot")`. 
6. The `.nice()` finds the possible range of the output, finds the pixel values correspponding to that.
7. `svg` is an object that has already been appended to the page. Open the inspector in your browser (F12) and find the svg element. Inside of that, we're creating some info.
8. Keep scrolling down in `js/script.js`, and you'll find more `sepalWidth` and `sepalLength`. Replace those as before. `cx` and `cy` determine the center of the dot.
9. Change the text values used for the labels.
10. Change the source of the colors for the teams:  `.style("fill", function(d) { return color(d.TM); });

Setting up a server

0. Open a terminal
1. change to the directory where you've saved the project and start a web server.
	cd Desktop/
	cd web-app-template-simple
	python -m SimpleHTTPServer