philgyford · August 29, 2015 14:00
diff --git a/exports.csv b/exports.csv
diff --git a/imports.csv b/imports.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Import/Export</title>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
  <body>
 	<div id="wait">Loading data…</div>
 
 	<!--<select name="countries" id="countries"></select>-->

 	<div id="container"></div>

 	<p><span class="imports">Imports</span> and <span class="exports">exports</span> of goods and services in current US$</p>

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

diff --git a/script.js b/script.js
 var impexp = {};

 impexp.dataManager = function module() {
  var exports = {},
    // Custom events:
    dispatch = d3.dispatch('dataReady', 'dataLoading'),
    data;

  exports.loadCsvData = function(_file, _cleaningFunc) {
    var loadCsv = d3.csv(_file);

    loadCsv.on('progress', function() {
                                    dispatch.dataLoading(d3.event.loaded); });

    loadCsv.get(function(_error, _response) {
      // Apply the cleaning function supplied in the _cleaningFunc parameter.
      _response.forEach(function(d) {
        _cleaningFunc(d);
      });

      // Assign cleaned response to data.
      data = _response;

      dispatch.dataReady(_response);
    });
  };

  exports.getCleanedData = function() {
    return data;
  };

  d3.rebind(exports, dispatch, 'on');

  return exports;
 };

 /**
 * For combining our sets of import and export data into one data structure.
 *  var combiner = impexp.dataCombiner();
 *  var data = combiner.combine(imports_data, exports_data);
 */
 impexp.dataCombiner = function module() {
  var exports = {};

  /**
   * Both imports_data and exports_data are like:
   * [
   *  {1999: '15', 2000: '25', 2001: '30', 'Country': 'France'}
   *  {1999: '16', 2000: '18', 2001: '22', 'Country': 'UK'}
   * ]
   * and it returns this:
   * {
   *  'France': [
   *    {
   *      year: 1999,
   *      imports: 15,
   *      exports: 33
   *    }...
   *  ],
   *  'UK': [
   *    ...
   *  ]
   * }
   */
  exports.combine = function(imports_data, exports_data) {

    // The basis for what we'll return:
    combined_data = keyByCountryWithArrays('imports', imports_data);
    // So we can access its data more easily:
    exports_by_country = keyByCountry(exports_data);

    // Add the export data to the transformed import data:
    d3.keys(combined_data).forEach(function(country) {
      if (country in exports_by_country) {
        combined_data[country].forEach(function(year_data, n) {
          var year = year_data['year'];
          if (year in exports_by_country[country]) {
            combined_data[country][n]['exports'] = exports_by_country[country][year];
          };
        });
      };
    });
    return combined_data;
  };

  /**
   * `kind` is one of 'imports' or 'exports'.
   * `rows` is an array or objects.
   *
   * Changes from:
   * [
   *  {1999: '15', 2000: '25', 2001: '30', 'Country': 'France'}
   *  {1999: '16', 2000: '18', 2001: '22', 'Country': 'UK'}
   * ]
   *
   * to (if `kind` is 'imports'):
   * {
   *  'France': [
   *    {'year': 1999, 'imports': 15},
   *    {'year': 2000, 'imports': 25}, ...
   *  ],
   *  'UK': [ ...
   * }
   */
  keyByCountryWithArrays = function(kind, rows) {
    var countries = {};
    rows.forEach(function(row) {
      var years = [];
      // k will be either a year or 'Country':
      d3.keys(row).forEach(function(k) {
        if (k !== 'Country') {
          var year_data = {year: new Date(+k, 0, 1)};
          // Make missing data null, ensure everything else is a number.
          year_data[kind] = row[k] === '' ? null : +row[k];
          // year_data will be like {'year': DateObj, 'imports': 15}
          years.push(year_data);
        };
      });
      countries[row['Country']] = years;
    });
    return countries;
  };

  /**
   * Takes this:
   * [
   *  {1999: '15', 2000: '25', 2001: '30', 'Country': 'France'}
   *  {1999: '16', 2000: '18', 2001: '22', 'Country': 'UK'}
   * ]
   * and returns this:
   * { 
   *  'France': {1999: 15, 2000: 25, 2001: 30},
   *  'UK':     {1999: 16, 2000: 18, 2001: 22}
   * }
   */
  keyByCountry = function(rows) {
    var countries = {};
    rows.forEach(function(row) {
      // Get the country name and remove from the row's data.
      var country = row['Country'];
      delete row['Country'];

      // Make sure all years and values are numeric:
      var year_data = {};
      d3.keys(row).forEach(function(k) {
        // Make a Date object for 1st Jan for the corresponding year.
        var year = new Date(+k, 0, 1);
        // Make missing data null, ensure everything else is a number.
        year_data[year] = row[k] === '' ? null : +row[k];
      });

      countries[country] = year_data;
    })
    return countries;
  };

  return exports;
 };

 impexp.chart = function module() {
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 400,
      height = 300,
      inner_width = width - margin.left - margin.right,
      inner_height = height - margin.top - margin.bottom,
      xValue = function(d) { return d[0]; },
      yValue = function(d) { return d[1]; },
      xScale = d3.time.scale(),
      yScale = d3.scale.linear(),
      xAxis = d3.svg.axis().scale(xScale).orient('bottom')
                  .tickFormat(d3.time.format('%Y'))
                  .ticks(d3.time.years, 5),
      yAxis = d3.svg.axis().scale(yScale).orient('left')
                  .tickFormat(function(d){
                    return d3.format(',')(d / 1000000000);
                  }),
      // defined() ensures we only draw the lines where there is data.
      imports_line = d3.svg.line().x(X).y(YImports)
                        .defined(function(d){ return d.imports !== null; }),
      exports_line = d3.svg.line().x(X).y(YExports)
                        .defined(function(d){ return d.exports !== null; }),
      // defined() ensures we draw the area only when both lines have data.
      area = d3.svg.area().x(X).y1(YImports)
                        .defined(function(d){
                          return d.imports !== null && d.exports !== null; });

  var dispatch = d3.dispatch('customHover');

  function exports(_selection) {
    _selection.each(function(data) {

      inner_width = width - margin.left - margin.right;
      inner_height = height - margin.top - margin.bottom;

      // Update scales.

      // Use min/max of the years from all countries we're displaying.
      xScale.domain([
        d3.min(data, function(country){
          return d3.min(country.values, function(v) { return v.year; })
        }),
        d3.max(data, function(country){
          return d3.max(country.values, function(v) { return v.year; })
        })
      ]).range([0, inner_width]);

      // Use maximum value of all imports or exports from all countries.
      yScale.domain([
        0,
        d3.max(data, function(country){
          return d3.max(country.values, function(v) {
            return Math.max(v.imports, v.exports);
          })
        }),
      ]).range([inner_height, 0]);

      // Select svg element if it exists.
      var svg = d3.select(this)
                  .selectAll('svg')
                  .data([data]);

      // Or create skeletal chart, with no data applied.
      var gEnter = svg.enter().append('svg').append('g');

      //gEnter.append('clipPath')
              //.attr('id', 'clip-surplus')
            //.append('path')
              //.attr('class', 'clip surplus');

      //gEnter.append('clipPath')
              //.attr('id', 'clip-deficit')
            //.append('path')
              //.attr('class', 'clip deficit');

      //gEnter.append('path')
              //.attr('class', 'area surplus')
              //.attr('clip-path', 'url("#clip-surplus")');

      //gEnter.append('path')
              //.attr('class', 'area deficit')
              //.attr('clip-path', 'url("#clip-deficit")');

      gEnter.append('path').attr('class', 'line imports');
      gEnter.append('path').attr('class', 'line exports');
      gEnter.append('g').attr('class', 'x axis');
      gEnter.append('g').attr('class', 'y axis');

      // Update outer dimensions.
      svg.transition()
          .attr({ width: width, height: height });
      // Update inner dimensions.
      var g = svg.select('g')
                .attr('transform',
                  'translate(' + margin.left + ',' + margin.right + ')');

      // Update lines/areas.
      //g.select('.clip.surplus').attr('d', area.y0(0));
      //g.select('.clip.deficit').attr('d', area.y0(inner_height));
      //g.select('.area.surplus').attr('d', area.y0(
                                //function(d) { return yScale(d['exports']); }));
      //g.select('.area.deficit').attr('d', area);



      // Hello - HERE IS WHERE IT'S CURRENTLY FAILING.

      // The d[0].values is wrong, but it does at least draw the first pair of lines.
      // Each element of array d is like:
      //   {name: 'United Kingdom', values: [{imports: 3, exports: 4, year: 1960}, {}, {}...]}

      g.select('.line.imports').attr('d', function(d){
                                            return imports_line(d[0].values); });
      g.select('.line.exports').attr('d', function(d){
                                            return exports_line(d[0].values); });


      // Update axes.
      g.select('.x.axis')
        .attr('transform', 'translate(0,' + yScale.range()[0] + ')')
        .call(xAxis);
      g.select('.y.axis')
        .call(yAxis);
    });
  };

  // The x-accessor for the path generator; xScale âˆ˜ xValue.
  function X(d) {
    return xScale(d.year);
  }

  // The x-accessor for the path generator; yScale âˆ˜ yValue.
  function YImports(d) {
    return yScale(d.imports);
  }
  function YExports(d) {
    return yScale(d.exports);
  }

  exports.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return this;
  };

  exports.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return this;
  };

  exports.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return this;
  };

  exports.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return chart;
  };

  exports.y = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return chart;
  };
  
  d3.rebind(exports, dispatch, "on");

  return exports;
 };


 impexp.controller = function module() {
  var exports = {},
      chart,
      data,
      container,
      default_country = 'United Kingdom',
      importsDataManager = impexp.dataManager(),
      exportsDataManager = impexp.dataManager();

  /**
   * Call this to start everything going.
   */
  exports.init = function() {
    // Could be used to clean the data, but we don't need to.
    var csvCleaner = function(d){};

    // Load both files.
    // After this you could do importsDataManager.getCleanedData() to see
    // what was loaded.
    importsDataManager.loadCsvData('imports.csv', csvCleaner);
    exportsDataManager.loadCsvData('exports.csv', csvCleaner);

    // Once the data has loaded, each manager will send 'dataReady' events.
    // So, once both have happened, we want to draw the chart:

    var loaded = 0;

    importsDataManager.on('dataReady', function() {
      loaded++;
      if (loaded == 2) {
        draw_chart();
      };
    });

    exportsDataManager.on('dataReady', function() {
      loaded++;
      if (loaded == 2) {
        draw_chart();
      };
    });
  };

  /**
   * Called once all the CSV data has been loaded.
   */
  var draw_chart = function() {
    $('#wait').hide();

    var combiner = impexp.dataCombiner();
    data = combiner.combine(importsDataManager.getCleanedData(),
                            exportsDataManager.getCleanedData());

    init_form();

    chart = impexp.chart()
                  .width(800).height(400)
                  .margin({top: 50, right: 50, bottom: 50, left: 50});

    container = d3.select('#container')
                  .datum([{
                        name: 'United Kingdom',
                        values: data['United Kingdom']
                      },
                      {
                        name: 'United States',
                        values: data['United States']
                      }])
                  .call(chart);
  };

  var init_form = function() {
    // Add all the countries we have data for to the select field.
    d3.keys(data).forEach(function(country) {
      var option = $('<option/>').attr('value', country).text(country);
      if (country == default_country) {
        option.attr('selected', 'selected');
      };
      $('#countries').append(option);
    });

    // When a new country is selected, change the chart.
    $('#countries').on('change', on_country_select_change);
  };

  var on_country_select_change = function(ev) {
    change_country(ev.target.selectedOptions[0].value);
  };

  /**
   * `country` is the name of the country, eg 'United States'.
   * Should match a key in the combined data structure.
   */
  var change_country = function(country) {
    update_chart(data[country]);
  };

  var update_chart = function(country_data) {
    container.datum(country_data)
              .transition()
              .ease('linear')
              .call(chart);
  };

  return exports;
 }

 // Let's go!
 var controller = impexp.controller();
 controller.init();
diff --git a/style.css b/style.css
 body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

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

 .area.surplus {
  fill: #cfc;
 }

 .area.deficit {
  fill: #fcc;
 }

 .line {
  fill: none;
  stroke-width: 1.5px;
 }
 .line.imports {
  stroke: #900;
 }
 .line.exports {
  stroke: #090;
 }

 .imports {
 	color: #900;
 }
 .exports {
 	color: #090;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Import/Export</title>
	<link rel="stylesheet" href="style.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<div id="wait">Loading data…</div>

	<!--<select name="countries" id="countries"></select>-->

	<div id="container"></div>

	<p><span class="imports">Imports</span> and <span class="exports">exports</span> of goods and services in current US$</p>

	<script src="script.js"></script>
	</body>
	</html>
	var impexp = {};

	impexp.dataManager = function module() {
	var exports = {},
	// Custom events:
	dispatch = d3.dispatch('dataReady', 'dataLoading'),
	data;

	exports.loadCsvData = function(_file, _cleaningFunc) {
	var loadCsv = d3.csv(_file);

	loadCsv.on('progress', function() {
	dispatch.dataLoading(d3.event.loaded); });

	loadCsv.get(function(_error, _response) {
	// Apply the cleaning function supplied in the _cleaningFunc parameter.
	_response.forEach(function(d) {
	_cleaningFunc(d);
	});

	// Assign cleaned response to data.
	data = _response;

	dispatch.dataReady(_response);
	});
	};

	exports.getCleanedData = function() {
	return data;
	};

	d3.rebind(exports, dispatch, 'on');

	return exports;
	};

	/**
	* For combining our sets of import and export data into one data structure.
	* var combiner = impexp.dataCombiner();
	* var data = combiner.combine(imports_data, exports_data);
	*/
	impexp.dataCombiner = function module() {
	var exports = {};

	/**
	* Both imports_data and exports_data are like:
	* [
	* {1999: '15', 2000: '25', 2001: '30', 'Country': 'France'}
	* {1999: '16', 2000: '18', 2001: '22', 'Country': 'UK'}
	* ]
	* and it returns this:
	* {
	* 'France': [
	* {
	* year: 1999,
	* imports: 15,
	* exports: 33
	* }...
	* ],
	* 'UK': [
	* ...
	* ]
	* }
	*/
	exports.combine = function(imports_data, exports_data) {

	// The basis for what we'll return:
	combined_data = keyByCountryWithArrays('imports', imports_data);
	// So we can access its data more easily:
	exports_by_country = keyByCountry(exports_data);

	// Add the export data to the transformed import data:
	d3.keys(combined_data).forEach(function(country) {
	if (country in exports_by_country) {
	combined_data[country].forEach(function(year_data, n) {
	var year = year_data['year'];
	if (year in exports_by_country[country]) {
	combined_data[country][n]['exports'] = exports_by_country[country][year];
	};
	});
	};
	});
	return combined_data;
	};

	/**
	* `kind` is one of 'imports' or 'exports'.
	* `rows` is an array or objects.
	*
	* Changes from:
	* [
	* {1999: '15', 2000: '25', 2001: '30', 'Country': 'France'}
	* {1999: '16', 2000: '18', 2001: '22', 'Country': 'UK'}
	* ]
	*
	* to (if `kind` is 'imports'):
	* {
	* 'France': [
	* {'year': 1999, 'imports': 15},
	* {'year': 2000, 'imports': 25}, ...
	* ],
	* 'UK': [ ...
	* }
	*/
	keyByCountryWithArrays = function(kind, rows) {
	var countries = {};
	rows.forEach(function(row) {
	var years = [];
	// k will be either a year or 'Country':
	d3.keys(row).forEach(function(k) {
	if (k !== 'Country') {
	var year_data = {year: new Date(+k, 0, 1)};
	// Make missing data null, ensure everything else is a number.
	year_data[kind] = row[k] === '' ? null : +row[k];
	// year_data will be like {'year': DateObj, 'imports': 15}
	years.push(year_data);
	};
	});
	countries[row['Country']] = years;
	});
	return countries;
	};

	/**
	* Takes this:
	* [
	* {1999: '15', 2000: '25', 2001: '30', 'Country': 'France'}
	* {1999: '16', 2000: '18', 2001: '22', 'Country': 'UK'}
	* ]
	* and returns this:
	* {
	* 'France': {1999: 15, 2000: 25, 2001: 30},
	* 'UK': {1999: 16, 2000: 18, 2001: 22}
	* }
	*/
	keyByCountry = function(rows) {
	var countries = {};
	rows.forEach(function(row) {
	// Get the country name and remove from the row's data.
	var country = row['Country'];
	delete row['Country'];

	// Make sure all years and values are numeric:
	var year_data = {};
	d3.keys(row).forEach(function(k) {
	// Make a Date object for 1st Jan for the corresponding year.
	var year = new Date(+k, 0, 1);
	// Make missing data null, ensure everything else is a number.
	year_data[year] = row[k] === '' ? null : +row[k];
	});

	countries[country] = year_data;
	})
	return countries;
	};

	return exports;
	};

	impexp.chart = function module() {
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 400,
	height = 300,
	inner_width = width - margin.left - margin.right,
	inner_height = height - margin.top - margin.bottom,
	xValue = function(d) { return d[0]; },
	yValue = function(d) { return d[1]; },
	xScale = d3.time.scale(),
	yScale = d3.scale.linear(),
	xAxis = d3.svg.axis().scale(xScale).orient('bottom')
	.tickFormat(d3.time.format('%Y'))
	.ticks(d3.time.years, 5),
	yAxis = d3.svg.axis().scale(yScale).orient('left')
	.tickFormat(function(d){
	return d3.format(',')(d / 1000000000);
	}),
	// defined() ensures we only draw the lines where there is data.
	imports_line = d3.svg.line().x(X).y(YImports)
	.defined(function(d){ return d.imports !== null; }),
	exports_line = d3.svg.line().x(X).y(YExports)
	.defined(function(d){ return d.exports !== null; }),
	// defined() ensures we draw the area only when both lines have data.
	area = d3.svg.area().x(X).y1(YImports)
	.defined(function(d){
	return d.imports !== null && d.exports !== null; });

	var dispatch = d3.dispatch('customHover');

	function exports(_selection) {
	_selection.each(function(data) {

	inner_width = width - margin.left - margin.right;
	inner_height = height - margin.top - margin.bottom;

	// Update scales.

	// Use min/max of the years from all countries we're displaying.
	xScale.domain([
	d3.min(data, function(country){
	return d3.min(country.values, function(v) { return v.year; })
	}),
	d3.max(data, function(country){
	return d3.max(country.values, function(v) { return v.year; })
	})
	]).range([0, inner_width]);

	// Use maximum value of all imports or exports from all countries.
	yScale.domain([
	0,
	d3.max(data, function(country){
	return d3.max(country.values, function(v) {
	return Math.max(v.imports, v.exports);
	})
	}),
	]).range([inner_height, 0]);

	// Select svg element if it exists.
	var svg = d3.select(this)
	.selectAll('svg')
	.data([data]);

	// Or create skeletal chart, with no data applied.
	var gEnter = svg.enter().append('svg').append('g');

	//gEnter.append('clipPath')
	//.attr('id', 'clip-surplus')
	//.append('path')
	//.attr('class', 'clip surplus');

	//gEnter.append('clipPath')
	//.attr('id', 'clip-deficit')
	//.append('path')
	//.attr('class', 'clip deficit');

	//gEnter.append('path')
	//.attr('class', 'area surplus')
	//.attr('clip-path', 'url("#clip-surplus")');

	//gEnter.append('path')
	//.attr('class', 'area deficit')
	//.attr('clip-path', 'url("#clip-deficit")');

	gEnter.append('path').attr('class', 'line imports');
	gEnter.append('path').attr('class', 'line exports');
	gEnter.append('g').attr('class', 'x axis');
	gEnter.append('g').attr('class', 'y axis');

	// Update outer dimensions.
	svg.transition()
	.attr({ width: width, height: height });
	// Update inner dimensions.
	var g = svg.select('g')
	.attr('transform',
	'translate(' + margin.left + ',' + margin.right + ')');

	// Update lines/areas.
	//g.select('.clip.surplus').attr('d', area.y0(0));
	//g.select('.clip.deficit').attr('d', area.y0(inner_height));
	//g.select('.area.surplus').attr('d', area.y0(
	//function(d) { return yScale(d['exports']); }));
	//g.select('.area.deficit').attr('d', area);



	// Hello - HERE IS WHERE IT'S CURRENTLY FAILING.

	// The d[0].values is wrong, but it does at least draw the first pair of lines.
	// Each element of array d is like:
	// {name: 'United Kingdom', values: [{imports: 3, exports: 4, year: 1960}, {}, {}...]}

	g.select('.line.imports').attr('d', function(d){
	return imports_line(d[0].values); });
	g.select('.line.exports').attr('d', function(d){
	return exports_line(d[0].values); });


	// Update axes.
	g.select('.x.axis')
	.attr('transform', 'translate(0,' + yScale.range()[0] + ')')
	.call(xAxis);
	g.select('.y.axis')
	.call(yAxis);
	});
	};

	// The x-accessor for the path generator; xScale âˆ˜ xValue.
	function X(d) {
	return xScale(d.year);
	}

	// The x-accessor for the path generator; yScale âˆ˜ yValue.
	function YImports(d) {
	return yScale(d.imports);
	}
	function YExports(d) {
	return yScale(d.exports);
	}

	exports.margin = function(_) {
	if (!arguments.length) return margin;
	margin = _;
	return this;
	};

	exports.width = function(_) {
	if (!arguments.length) return width;
	width = _;
	return this;
	};

	exports.height = function(_) {
	if (!arguments.length) return height;
	height = _;
	return this;
	};

	exports.x = function(_) {
	if (!arguments.length) return xValue;
	xValue = _;
	return chart;
	};

	exports.y = function(_) {
	if (!arguments.length) return yValue;
	yValue = _;
	return chart;
	};

	d3.rebind(exports, dispatch, "on");

	return exports;
	};


	impexp.controller = function module() {
	var exports = {},
	chart,
	data,
	container,
	default_country = 'United Kingdom',
	importsDataManager = impexp.dataManager(),
	exportsDataManager = impexp.dataManager();

	/**
	* Call this to start everything going.
	*/
	exports.init = function() {
	// Could be used to clean the data, but we don't need to.
	var csvCleaner = function(d){};

	// Load both files.
	// After this you could do importsDataManager.getCleanedData() to see
	// what was loaded.
	importsDataManager.loadCsvData('imports.csv', csvCleaner);
	exportsDataManager.loadCsvData('exports.csv', csvCleaner);

	// Once the data has loaded, each manager will send 'dataReady' events.
	// So, once both have happened, we want to draw the chart:

	var loaded = 0;

	importsDataManager.on('dataReady', function() {
	loaded++;
	if (loaded == 2) {
	draw_chart();
	};
	});

	exportsDataManager.on('dataReady', function() {
	loaded++;
	if (loaded == 2) {
	draw_chart();
	};
	});
	};

	/**
	* Called once all the CSV data has been loaded.
	*/
	var draw_chart = function() {
	$('#wait').hide();

	var combiner = impexp.dataCombiner();
	data = combiner.combine(importsDataManager.getCleanedData(),
	exportsDataManager.getCleanedData());

	init_form();

	chart = impexp.chart()
	.width(800).height(400)
	.margin({top: 50, right: 50, bottom: 50, left: 50});

	container = d3.select('#container')
	.datum([{
	name: 'United Kingdom',
	values: data['United Kingdom']
	},
	{
	name: 'United States',
	values: data['United States']
	}])
	.call(chart);
	};

	var init_form = function() {
	// Add all the countries we have data for to the select field.
	d3.keys(data).forEach(function(country) {
	var option = $('<option/>').attr('value', country).text(country);
	if (country == default_country) {
	option.attr('selected', 'selected');
	};
	$('#countries').append(option);
	});

	// When a new country is selected, change the chart.
	$('#countries').on('change', on_country_select_change);
	};

	var on_country_select_change = function(ev) {
	change_country(ev.target.selectedOptions[0].value);
	};

	/**
	* `country` is the name of the country, eg 'United States'.
	* Should match a key in the combined data structure.
	*/
	var change_country = function(country) {
	update_chart(data[country]);
	};

	var update_chart = function(country_data) {
	container.datum(country_data)
	.transition()
	.ease('linear')
	.call(chart);
	};

	return exports;
	}

	// Let's go!
	var controller = impexp.controller();
	controller.init();
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

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

	.area.surplus {
	fill: #cfc;
	}

	.area.deficit {
	fill: #fcc;
	}

	.line {
	fill: none;
	stroke-width: 1.5px;
	}
	.line.imports {
	stroke: #900;
	}
	.line.exports {
	stroke: #090;
	}

	.imports {
	color: #900;
	}
	.exports {
	color: #090;
	}