unamandita/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Space Data Test</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				background-color: white;
				font-family: "Helvetica";
				padding-left: 20px;
				padding-top: 10px;
			}

			h1 {
				font-size: 24px;
				font-weight: lighter;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: white;
			}

			circle:hover {
				fill: orange;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.y.axis path,
			.y.axis line {
				opacity: 0;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			circle.usa{
				fill: #9966cc;
			}
			circle.china{
				fill: #66cccc;
			}
			circle.russia{
				fill: #ff9966;
			}
			circle.female{
				stroke: black;
			}

		</style>
	</head>
	<body>

		<h1>Data viz experiment</h1>

		<script type="text/javascript">


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


			//Set up date formatting and years
			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(5)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

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


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


			//main d3 function
			d3.csv("spaceTestData.csv", function(data) {

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

				yScale.domain([4, 1]);

				var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

				circles.attr("cx", function(d) {
						return xScale(dateFormat.parse(d.year));
					})
					.attr("cy", function(d){
						return yScale(d.position);
					})
					.attr("r", 4)
					.classed("usa", function(d) {

						if (d.nationality == "USA") {
							return true;
						} else {
							return false;
						}
					})
					.classed("russia", function(d) {

						if (d.nationality == "russia") {
							return true;
						} else {
							return false;
						}
					})
					.classed("china", function(d) {

						if (d.nationality == "china") {
							return true;
						} else {
							return false;
						}
					})
					.classed("female", function(d) {

						if (d.female == "yes") {
							return true;
						} else {
							return false;
						}
					})
					.append("title")
					.text(function(d) {
						return d.name;
					});

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

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

			});


		</script>

	</body>
</html>

## spaceTestData.csv

          
            name
            female
            year
            position
            nationality

            
              amanda
              yes
              1984
              1
              USA

            
              ricki
              yes
              1984
              2
              USA

            
              mike
              no
              1985
              1
              USA

            
              richard
              no
              1985
              1
              russia

            
              monica
              yes
              1987
              1
              russia

            
              robin
              yes
              1988
              1
              china

            
              jason
              no
              1988
              2
              china

            
              amber
              yes
              1988
              3
              USA

            
              gary
              no
              1989
              1
              USA

            
              jen
              yes
              1990
              1
              russia
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Space Data Test</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: "Helvetica";
	padding-left: 20px;
	padding-top: 10px;
	}

	h1 {
	font-size: 24px;
	font-weight: lighter;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	circle:hover {
	fill: orange;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	circle.usa{
	fill: #9966cc;
	}
	circle.china{
	fill: #66cccc;
	}
	circle.russia{
	fill: #ff9966;
	}
	circle.female{
	stroke: black;
	}

	</style>
	</head>
	<body>

	<h1>Data viz experiment</h1>

	<script type="text/javascript">


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



	//Set up date formatting and years
	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(5)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

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



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


	//main d3 function
	d3.csv("spaceTestData.csv", function(data) {

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

	yScale.domain([4, 1]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.attr("cy", function(d){
	return yScale(d.position);
	})
	.attr("r", 4)
	.classed("usa", function(d) {

	if (d.nationality == "USA") {
	return true;
	} else {
	return false;
	}
	})
	.classed("russia", function(d) {

	if (d.nationality == "russia") {
	return true;
	} else {
	return false;
	}
	})
	.classed("china", function(d) {

	if (d.nationality == "china") {
	return true;
	} else {
	return false;
	}
	})
	.classed("female", function(d) {

	if (d.female == "yes") {
	return true;
	} else {
	return false;
	}
	})
	.append("title")
	.text(function(d) {
	return d.name;
	});

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

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

	});


	</script>

	</body>
	</html>
name	female	year	position	nationality
amanda	yes	1984	1	USA
ricki	yes	1984	2	USA
mike	no	1985	1	USA
richard	no	1985	1	russia
monica	yes	1987	1	russia
robin	yes	1988	1	china
jason	no	1988	2	china
amber	yes	1988	3	USA
gary	no	1989	1	USA
jen	yes	1990	1	russia