basilesimon/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Business quote demo</title>
  <meta charset="utf-8">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript" src="d3.js" charset="utf-8"></script>
  <style>
    body {
      font: 12px sans-serif;
      background-color: #fafafa;
      padding: 0;
      margin: 0;
      color: #353535;
    }
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
    .axis path, .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    .x.axis path {
      display: none;
    }
    svg {
      float: left;
      margin-left: 10px;
    }
    #info {
      float: right;
      width: 40%;
      background-color: inherit;
      height: 100vh;
    }
    header {
      display: block;
      background-color: #cd0102;
      width: 100%;
      height: 50px;
    }
    header img {
      padding: 5px;
    }
    h1 {
      margin-bottom: -20px;
    }
    .grid .tick {
      stroke: lightgrey;
      opacity: 0.7;
    }
    .grid path {
      stroke-width: 0;
    }
    .grid .tick {
      stroke: lightgrey;
      opacity: 0.7;
    }
    .grid path {
      stroke-width: 0;
    }
    #loading {
      float: left;
      padding-left: 10em;
      padding-top: 10em;
      position: absolute;
    }
  </style>
</head>

<body>


<script>
  var myQuery = "http://query.yahooapis.com/v1/public/yql?q=select * from yahoo.finance.historicaldata where symbol in (\"AAPL\") and startDate = \"2013-01-01\" and endDate = \"2014-01-01\"&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json";
  var data = $.getJSON(myQuery, draw);

  var margin = 50,
    width = 700,
    height = 600;

  var format = d3.time.format("%Y-%m-%d");

 function draw(data) {

  data.query.results.quote.forEach(function(d) {
    d.date = format.parse(d.Date);
    d.Close = +d.Close;
  });
  data.query.results.quote.sort(function(a,b) {
      return d3.ascending(a.date, b.date);
  });

  var line = d3.svg.line()
  .x(function(d){ return x_scale(d.date); })
  .y(function(d){ return y_scale(d.Close); })
  .interpolate("linear");

  /* Extents */
  var x_extent = d3.extent(data.query.results.quote.map(function(d) { return d.date; }));
  var y_extent = d3.extent(data.query.results.quote.map(function(d) { return +d.Close; }));

  /* Scales */
  var y_scale = d3.scale.linear()
    .domain(y_extent)
    .range([height-margin,margin]);
  var x_scale = d3.time.scale()
    .domain(x_extent)
    .range([margin, width-margin]);

  /* Axis */
  var x_axis = d3.svg.axis()
    .scale(x_scale);
  var y_axis = d3.svg.axis()
    .scale(y_scale).orient('left');

  /*Contain the viz in a SVG element, width/height already defined*/
  var vis = d3.select("body")
    .append("svg")
      .attr("width", width)
      .attr("height", height);

  d3.select("svg")
    .append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height-margin) + ")")
    .call(x_axis);

  d3.select("svg")
    .append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + margin + ", 0 )")
    .call(y_axis);

  var path = vis.append("path")
    .datum(data.query.results.quote)
    .style("fill", "none")
    .attr("class", "line")
    .attr("d", line);

  //Adding transition to the line drawing
  var totalLength = path.node().getTotalLength();
  path
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
      .duration(2000)
      .ease("linear")
      .attr("stroke-dashoffset", 0);

  d3.select(".y.axis")
    .append("text")
    .text("lol much text")
    .attr("transform", "rotate (-90, -43, 0) translate(-280)");

  d3.select(".x.axis")
    .append("text")
    .text("such axis")
    .attr("x", function(){return (width / 2) - margin;})
    .attr("y", margin/1.5);

  } /*ends function draw*/
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Business quote demo</title>
	<meta charset="utf-8">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="d3.js" charset="utf-8"></script>
	<style>
	body {
	font: 12px sans-serif;
	background-color: #fafafa;
	padding: 0;
	margin: 0;
	color: #353535;
	}
	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}
	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.x.axis path {
	display: none;
	}
	svg {
	float: left;
	margin-left: 10px;
	}
	#info {
	float: right;
	width: 40%;
	background-color: inherit;
	height: 100vh;
	}
	header {
	display: block;
	background-color: #cd0102;
	width: 100%;
	height: 50px;
	}
	header img {
	padding: 5px;
	}
	h1 {
	margin-bottom: -20px;
	}
	.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	}
	.grid path {
	stroke-width: 0;
	}
	.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	}
	.grid path {
	stroke-width: 0;
	}
	#loading {
	float: left;
	padding-left: 10em;
	padding-top: 10em;
	position: absolute;
	}
	</style>
	</head>

	<body>


	<script>
	var myQuery = "http://query.yahooapis.com/v1/public/yql?q=select * from yahoo.finance.historicaldata where symbol in (\"AAPL\") and startDate = \"2013-01-01\" and endDate = \"2014-01-01\"&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json";
	var data = $.getJSON(myQuery, draw);

	var margin = 50,
	width = 700,
	height = 600;

	var format = d3.time.format("%Y-%m-%d");

	function draw(data) {

	data.query.results.quote.forEach(function(d) {
	d.date = format.parse(d.Date);
	d.Close = +d.Close;
	});
	data.query.results.quote.sort(function(a,b) {
	return d3.ascending(a.date, b.date);
	});

	var line = d3.svg.line()
	.x(function(d){ return x_scale(d.date); })
	.y(function(d){ return y_scale(d.Close); })
	.interpolate("linear");

	/* Extents */
	var x_extent = d3.extent(data.query.results.quote.map(function(d) { return d.date; }));
	var y_extent = d3.extent(data.query.results.quote.map(function(d) { return +d.Close; }));

	/* Scales */
	var y_scale = d3.scale.linear()
	.domain(y_extent)
	.range([height-margin,margin]);
	var x_scale = d3.time.scale()
	.domain(x_extent)
	.range([margin, width-margin]);

	/* Axis */
	var x_axis = d3.svg.axis()
	.scale(x_scale);
	var y_axis = d3.svg.axis()
	.scale(y_scale).orient('left');

	/Contain the viz in a SVG element, width/height already defined/
	var vis = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.select("svg")
	.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (height-margin) + ")")
	.call(x_axis);

	d3.select("svg")
	.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + margin + ", 0 )")
	.call(y_axis);

	var path = vis.append("path")
	.datum(data.query.results.quote)
	.style("fill", "none")
	.attr("class", "line")
	.attr("d", line);

	//Adding transition to the line drawing
	var totalLength = path.node().getTotalLength();
	path
	.attr("stroke-dasharray", totalLength + " " + totalLength)
	.attr("stroke-dashoffset", totalLength)
	.transition()
	.duration(2000)
	.ease("linear")
	.attr("stroke-dashoffset", 0);

	d3.select(".y.axis")
	.append("text")
	.text("lol much text")
	.attr("transform", "rotate (-90, -43, 0) translate(-280)");

	d3.select(".x.axis")
	.append("text")
	.text("such axis")
	.attr("x", function(){return (width / 2) - margin;})
	.attr("y", margin/1.5);

	} /ends function draw/
	</script>
	</body>
	</html>