pcasaretto/index.html

## readme.csv

          
            ranking
            date

            
              2
              2012-06-18 00:25:39

            
              3
              2012-05-31 18:57:12

            
              5
              2012-05-20 14:21:21

            
              4
              2012-05-05 14:43:36

            
              5
              2012-04-13 10:14:45

            
              6
              2012-03-25 18:25:14

            
              6
              2012-03-11 05:56:05

            
              7
              2012-02-24 08:15:35

            
              6
              2012-02-13 12:36:28

            
              6
              2012-02-02 18:53:56

            
              7
              2012-01-20 10:23:55

            
              11
              2011-12-29 06:45:15

            
              11
              2011-12-18 10:30:32

            
              16
              2011-12-07 10:26:53

            
              14
              2011-11-22 12:09:59

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v2.js"></script>
    <style type="text/css">

body {
  font: 10px sans-serif;
  margin: 0;
}

path.line {
  fill: none;
  stroke: #666;
  stroke-width: 3px;
}

path.area {
  fill: #e7e7e7;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: #fff;
}

.x.axis .minor {
  stroke-opacity: .5;
}

.x.axis path {
  display: none;
}

.y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var m = [80, 80, 80, 80],
    w = 960 - m[1] - m[3],
    h = 500 - m[0] - m[2],
    parse = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

var x = d3.time.scale().range([w, 0]),
    y = d3.scale.linear().range([0, h]),
    xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

// An area generator, for the light fill.
// var area = d3.svg.area()
//     .interpolate("monotone")
//     .x(function(d) { return x(d.date); })
//     .y0(h)
//     .y1(function(d) { return y(d.ranking); });

// A line generator, for the dark stroke.
var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.ranking); });

d3.csv("readme.csv", function(data) {
  // Filter to one symbol; the S&P 500.
  var values = data;

  // Parse dates and numbers. We assume values are sorted by date.
  values.forEach(function(d) {
    console.log(d.date);
    d.date = parse(d.date);
    d.ranking = +d.ranking;
  });

  console.log(values);

  // Compute the minimum and maximum date, and the maximum ranking.
  x.domain([values[0].date, values[values.length - 1].date]);
  y.domain([0, d3.max(values, function(d) { return d.ranking; })]).nice();

  // Add an SVG element with the desired dimensions and margin.
  var svg = d3.select("body").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
    .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

  // Add the clip path.
  svg.append("svg:clipPath")
      .attr("id", "clip")
    .append("svg:rect")
      .attr("width", w)
      .attr("height", h);

  // Add the area path.
  // svg.append("svg:path")
  //      .attr("class", "area")
  //      .attr("clip-path", "url(#clip)")
  //      .attr("d", area(values));

  // Add the x-axis.
  svg.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis);

  // Add the y-axis.
  svg.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + w + ",0)")
      .call(yAxis);

  // Add the line path.
  svg.append("svg:path")
      .attr("class", "line")
      .attr("clip-path", "url(#clip)")
      .attr("d", line(values));

  // Add a small label for the symbol name.
  svg.append("svg:text")
      .attr("x", w - 6)
      .attr("y", h - 6)
      .attr("text-anchor", "end")
      .text(values[0].symbol);

  // On click, update the x-axis.
  svg.on("click", function() {
    var n = values.length - 1,
        i = Math.floor(Math.random() * n / 2),
        j = i + Math.floor(Math.random() * n / 2) + 1;
    x.domain([values[i].date, values[j].date]);
    var t = svg.transition().duration(750);
    t.select(".x.axis").call(xAxis);
    // t.select(".area").attr("d", area(values));
    t.select(".line").attr("d", line(values));
  });
});

    </script>
  </body>
</html>
	ranking	date
	2	2012-06-18 00:25:39
	3	2012-05-31 18:57:12
	5	2012-05-20 14:21:21
	4	2012-05-05 14:43:36
	5	2012-04-13 10:14:45
	6	2012-03-25 18:25:14
	6	2012-03-11 05:56:05
	7	2012-02-24 08:15:35
	6	2012-02-13 12:36:28
	6	2012-02-02 18:53:56
	7	2012-01-20 10:23:55
	11	2011-12-29 06:45:15
	11	2011-12-18 10:30:32
	16	2011-12-07 10:26:53
	14	2011-11-22 12:09:59
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">

	body {
	font: 10px sans-serif;
	margin: 0;
	}

	path.line {
	fill: none;
	stroke: #666;
	stroke-width: 3px;
	}

	path.area {
	fill: #e7e7e7;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line {
	stroke: #fff;
	}

	.x.axis .minor {
	stroke-opacity: .5;
	}

	.x.axis path {
	display: none;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #000;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var m = [80, 80, 80, 80],
	w = 960 - m[1] - m[3],
	h = 500 - m[0] - m[2],
	parse = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

	var x = d3.time.scale().range([w, 0]),
	y = d3.scale.linear().range([0, h]),
	xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
	yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

	// An area generator, for the light fill.
	// var area = d3.svg.area()
	// .interpolate("monotone")
	// .x(function(d) { return x(d.date); })
	// .y0(h)
	// .y1(function(d) { return y(d.ranking); });

	// A line generator, for the dark stroke.
	var line = d3.svg.line()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.ranking); });

	d3.csv("readme.csv", function(data) {
	// Filter to one symbol; the S&P 500.
	var values = data;

	// Parse dates and numbers. We assume values are sorted by date.
	values.forEach(function(d) {
	console.log(d.date);
	d.date = parse(d.date);
	d.ranking = +d.ranking;
	});

	console.log(values);

	// Compute the minimum and maximum date, and the maximum ranking.
	x.domain([values[0].date, values[values.length - 1].date]);
	y.domain([0, d3.max(values, function(d) { return d.ranking; })]).nice();

	// Add an SVG element with the desired dimensions and margin.
	var svg = d3.select("body").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	// Add the clip path.
	svg.append("svg:clipPath")
	.attr("id", "clip")
	.append("svg:rect")
	.attr("width", w)
	.attr("height", h);

	// Add the area path.
	// svg.append("svg:path")
	// .attr("class", "area")
	// .attr("clip-path", "url(#clip)")
	// .attr("d", area(values));

	// Add the x-axis.
	svg.append("svg:g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);

	// Add the y-axis.
	svg.append("svg:g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + w + ",0)")
	.call(yAxis);

	// Add the line path.
	svg.append("svg:path")
	.attr("class", "line")
	.attr("clip-path", "url(#clip)")
	.attr("d", line(values));

	// Add a small label for the symbol name.
	svg.append("svg:text")
	.attr("x", w - 6)
	.attr("y", h - 6)
	.attr("text-anchor", "end")
	.text(values[0].symbol);

	// On click, update the x-axis.
	svg.on("click", function() {
	var n = values.length - 1,
	i = Math.floor(Math.random() * n / 2),
	j = i + Math.floor(Math.random() * n / 2) + 1;
	x.domain([values[i].date, values[j].date]);
	var t = svg.transition().duration(750);
	t.select(".x.axis").call(xAxis);
	// t.select(".area").attr("d", area(values));
	t.select(".line").attr("d", line(values));
	});
	});

	</script>
	</body>
	</html>