mapearlson/README

## README
Basically copied the code, but used it for something I was working on for balance of payments versus currency fluctuation.

## data2a.tsv

          
            date
            close
            open

            
              1998
              0.2324
              3.766

            
              1999
              0.2556
              6.646

            
              2000
              0.2952
              16.092

            
              2001
              0.3039
              8.918

            
              2002
              0.2887
              3.152

            
              2003
              0.2409
              5.598

            
              2004
              0.2191
              6.094

            
              2005
              0.219
              12.427

            
              2006
              0.2169
              16.303

            
              2007
              0.1989
              6.931

            
              2008
              0.186
              7.062

            
              2009
              0.1957
              3.096

            
              2010
              0.2054
              2.532

            
              2011
              0.1957
              14.664

            
              2012
              0.2118
              18.522

            
              2013
              0.205
              16.077

            
              2014
              0.2051
              11.119

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body { font: 12px Arial;}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

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

</style>
<body>
<h2 style="padding-left:60px;">AED/EURO and Balance of Payments(UAE)</h2>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 30, right: 40, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

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

var x = d3.time.scale().range([0, width]);
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxisLeft = d3.svg.axis().scale(y0)
    .orient("left").ticks(5);

var yAxisRight = d3.svg.axis().scale(y1)
    .orient("right").ticks(5);

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y0(d.close); });

var valueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y1(d.open); });

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.tsv("data2a.tsv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
        d.open = +d.open;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y0.domain([0, d3.max(data, function(d) {
		return Math.max(d.close); })]);
    y1.domain([0, d3.max(data, function(d) {
		return Math.max(d.open); })]);

    svg.append("path")        // Add the valueline path.
        .attr("d", valueline(data));

    svg.append("path")        // Add the valueline2 path.
        .style("stroke", "red")
        .attr("d", valueline2(data));

    svg.append("g")            // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .style("fill", "steelblue")
        .call(yAxisLeft);

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + width + " ,0)")
        .style("fill", "red")
        .call(yAxisRight);

});

</script>
</body>
date	close	open
1998	0.2324	3.766
1999	0.2556	6.646
2000	0.2952	16.092
2001	0.3039	8.918
2002	0.2887	3.152
2003	0.2409	5.598
2004	0.2191	6.094
2005	0.219	12.427
2006	0.2169	16.303
2007	0.1989	6.931
2008	0.186	7.062
2009	0.1957	3.096
2010	0.2054	2.532
2011	0.1957	14.664
2012	0.2118	18.522
2013	0.205	16.077
2014	0.2051	11.119
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body { font: 12px Arial;}

	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}

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

	</style>
	<body>
	<h2 style="padding-left:60px;">AED/EURO and Balance of Payments(UAE)</h2>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	var margin = {top: 30, right: 40, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

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

	var x = d3.time.scale().range([0, width]);
	var y0 = d3.scale.linear().range([height, 0]);
	var y1 = d3.scale.linear().range([height, 0]);

	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

	var yAxisLeft = d3.svg.axis().scale(y0)
	.orient("left").ticks(5);

	var yAxisRight = d3.svg.axis().scale(y1)
	.orient("right").ticks(5);

	var valueline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y0(d.close); });

	var valueline2 = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y1(d.open); });

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	// Get the data
	d3.tsv("data2a.tsv", function(error, data) {
	data.forEach(function(d) {
	d.date = parseDate(d.date);
	d.close = +d.close;
	d.open = +d.open;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y0.domain([0, d3.max(data, function(d) {
	return Math.max(d.close); })]);
	y1.domain([0, d3.max(data, function(d) {
	return Math.max(d.open); })]);

	svg.append("path") // Add the valueline path.
	.attr("d", valueline(data));

	svg.append("path") // Add the valueline2 path.
	.style("stroke", "red")
	.attr("d", valueline2(data));

	svg.append("g") // Add the X Axis
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.style("fill", "steelblue")
	.call(yAxisLeft);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + width + " ,0)")
	.style("fill", "red")
	.call(yAxisRight);

	});

	</script>
	</body>