octaviomtz/index.html

## index.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Howework 2 | Octavio</title>

    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script src="script.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #dddddd;
            font-family: Helvetica, Arial, sans-serif;
        }

        #container {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            padding: 50px;
            background-color: #ffffff;
            box-shadow: 3px 3px 5px 6px #000;
        }

        #title {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        #someText {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            font-family: Helvetica, Arial, sans-serif;
        }
    </style>
</head>

<body>


    <h1 id="title">Points per game % of the 2015 All-NBA Team   </h1>

    <div id="container"></div>
    <p></p>
    <div id="someText">
        <p>The data was obtained from <a href="http://ww.nba.com">the nba website.</a>
            <br>I think this is not the best choice to represent this data but it was good to try stacked area charts

        </p>

    </div>


    <script src="script.js"></script>


</body>

</html>

## nba.csv

          
            playerName
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012
            2013
            2014

            
              Lebron
              20.9
              27.2
              31.4
              27.3
              30
              28.4
              29.7
              26.7
              27.1
              26.8
              27.1
              25.3

            
              Curry
              0
              0
              0
              0
              0
              11.9
              14.6
              11.7
              14.6
              14.1
              14.6
              17.4

            
              Harden
              0
              0
              0
              0
              0
              0
              9.9
              12.2
              16.8
              25.9
              25.4
              27.4

            
              Davis
              0
              0
              0
              0
              0
              0
              17.5
              18.6
              14.7
              22.9
              24
              23.8

            
              Gasol
              0
              0
              0
              0
              0
              0
              0
              0
              0
              13.5
              20.8
              24.4

## script.js
		var stack = d3.layout.stack()
		    .values(function (d) {
		        return d.points;
		    })
		    .order("reverse");


		var w = 800;
		var h = 600;
		var padding = [20, 10, 30, 120]; //Top, right, bottom, left

		var dateFormat = d3.time.format("%Y");

		var xScale = d3.time.scale()
		    .range([padding[3], w - padding[1] - padding[3]]);

		var yScale = d3.scale.linear()
		    .range([padding[0], h - padding[2]]);


		var xAxis = d3.svg.axis()
		    .scale(xScale)
		    .orient("bottom")
		    .ticks(8);


		var yAxis = d3.svg.axis()
		    .scale(yScale)
		    .orient("left")
		    .ticks(15);

		//Set up stack method


		//area geneerator
		var area = d3.svg.area()
		    .x(function (d) {
		        return xScale(dateFormat.parse(d.x));
		    })
		    .y0(function (d) {
		        return yScale(d.y0);
		    })
		    .y1(function (d) {
		        return yScale(d.y0 + d.y);
		    })

		var colors = ["#860038", "#FDB927", "#CE1141", "#002B5C", "#0F586C"];
		//Now SVG goes into #container instead of body
		var svg = d3.select("#container")
		    .append("svg")
		    .attr("width", w)
		    .attr("height", h);


		d3.csv("nba.csv", function (data) {


		    var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

		    var dataset = [];

		    for (var i = 0; i < data.length; i++) {
		        dataset[i] = {
		            player: data[i].playerName,
		            points: []
		        };

		        for (var j = 0; j < years.length; j++) {
		            //default value
		            var pergame = null;
		            if (data[i][years[j]]) {
		                pergame = +data[i][years[j]];
		            }

		            dataset[i].points.push({
		                x: years[j],
		                y: pergame
		            });

		        }
		    }

		    stack(dataset);

		    console.log(dataset);

		    xScale.domain([
					d3.min(years, function (d) {
		            return dateFormat.parse(d);
		        }),
					d3.max(years, function (d) {
		            return dateFormat.parse(d);
		        })
				]);

		    var totals = [];

		    for (i = 0; i < years.length; i++) {
		        totals[i] = 0;
		        for (j = 0; j < dataset.length; j++) {
		            totals[i] += dataset[j].points[i].y;
		        }
		    }


		    yScale.domain([d3.max(totals), 0]);

		    console.log(yScale(totals))

		    var paths = svg.selectAll("path")
		        .data(dataset)
		        .enter()
		        .append("path")
		        .attr("class", "area")
		        .attr("d", function (d) {
		            return area(d.points);
		        })
		        .attr("stroke", function (d, i) {
		            return colors[i];
		        })
		        .attr("fill", function (d, i) {
		            return colors[i];
		        })
		        .attr('src', function (d, i) {
		            return "image" + i + ".png";
		        });;

		    //Append a title with the player name (so we get easy tooltips)
		    paths.append("title")
		        .text(function (d) {
		            return d.player;
		        });

		    //Create axes
		    svg.append("g")
		        .attr("class", "x axis")
		        .attr("transform", "translate(0," + (h - padding[2]) + ")")
		        .call(xAxis);

		    svg.append("g")
		        .attr("class", "y axis")
		        .attr("transform", "translate(" + padding[3] + ",0)")
		        .call(yAxis);


		});
/*

		locationPhoto = [10, 20, 30, 40, 50]
	svg
		    .selectAll("image")
		    .data(locationPhoto)
		    .enter()
		    .append("image")
		    .attr("x", 680)
		    .attr("y", function (d, i) {
		        return d*11.5-100;
		    })
		    .attr("width", 110)
		    .attr("height", 110)
		    .attr("xlink:href", function (d, i) {
		        return "image" + i + ".png";
		    });
*/
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Howework 2 \| Octavio</title>

	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script src="script.js"></script>
	<style type="text/css">
	body {
	margin: 0;
	background-color: #dddddd;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: #ffffff;
	box-shadow: 3px 3px 5px 6px #000;
	}

	#title {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

	#someText {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	font-family: Helvetica, Arial, sans-serif;
	}
	</style>
	</head>

	<body>



	<h1 id="title">Points per game % of the 2015 All-NBA Team </h1>

	<div id="container"></div>
	<p></p>
	<div id="someText">
	<p>The data was obtained from <a href="http://ww.nba.com">the nba website.</a>
	<br>I think this is not the best choice to represent this data but it was good to try stacked area charts

	</p>

	</div>




	<script src="script.js"></script>




	</body>

	</html>
playerName	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014
Lebron	20.9	27.2	31.4	27.3	30	28.4	29.7	26.7	27.1	26.8	27.1	25.3
Curry	0	0	0	0	0	11.9	14.6	11.7	14.6	14.1	14.6	17.4
Harden	0	0	0	0	0	0	9.9	12.2	16.8	25.9	25.4	27.4
Davis	0	0	0	0	0	0	17.5	18.6	14.7	22.9	24	23.8
Gasol	0	0	0	0	0	0	0	0	0	13.5	20.8	24.4
	var stack = d3.layout.stack()
	.values(function (d) {
	return d.points;
	})
	.order("reverse");


	var w = 800;
	var h = 600;
	var padding = [20, 10, 30, 120]; //Top, right, bottom, left

	var dateFormat = d3.time.format("%Y");

	var xScale = d3.time.scale()
	.range([padding[3], w - padding[1] - padding[3]]);

	var yScale = d3.scale.linear()
	.range([padding[0], h - padding[2]]);



	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(8);


	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(15);

	//Set up stack method


	//area geneerator
	var area = d3.svg.area()
	.x(function (d) {
	return xScale(dateFormat.parse(d.x));
	})
	.y0(function (d) {
	return yScale(d.y0);
	})
	.y1(function (d) {
	return yScale(d.y0 + d.y);
	})

	var colors = ["#860038", "#FDB927", "#CE1141", "#002B5C", "#0F586C"];
	//Now SVG goes into #container instead of body
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	d3.csv("nba.csv", function (data) {


	var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

	var dataset = [];

	for (var i = 0; i < data.length; i++) {
	dataset[i] = {
	player: data[i].playerName,
	points: []
	};

	for (var j = 0; j < years.length; j++) {
	//default value
	var pergame = null;
	if (data[i][years[j]]) {
	pergame = +data[i][years[j]];
	}

	dataset[i].points.push({
	x: years[j],
	y: pergame
	});

	}
	}

	stack(dataset);

	console.log(dataset);

	xScale.domain([
	d3.min(years, function (d) {
	return dateFormat.parse(d);
	}),
	d3.max(years, function (d) {
	return dateFormat.parse(d);
	})
	]);

	var totals = [];

	for (i = 0; i < years.length; i++) {
	totals[i] = 0;
	for (j = 0; j < dataset.length; j++) {
	totals[i] += dataset[j].points[i].y;
	}
	}



	yScale.domain([d3.max(totals), 0]);

	console.log(yScale(totals))

	var paths = svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("class", "area")
	.attr("d", function (d) {
	return area(d.points);
	})
	.attr("stroke", function (d, i) {
	return colors[i];
	})
	.attr("fill", function (d, i) {
	return colors[i];
	})
	.attr('src', function (d, i) {
	return "image" + i + ".png";
	});;

	//Append a title with the player name (so we get easy tooltips)
	paths.append("title")
	.text(function (d) {
	return d.player;
	});

	//Create axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);



	});
	/*

	locationPhoto = [10, 20, 30, 40, 50]
	svg
	.selectAll("image")
	.data(locationPhoto)
	.enter()
	.append("image")
	.attr("x", 680)
	.attr("y", function (d, i) {
	return d*11.5-100;
	})
	.attr("width", 110)
	.attr("height", 110)
	.attr("xlink:href", function (d, i) {
	return "image" + i + ".png";
	});
	*/