meilivh · September 10, 2016 17:46
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/epi2014.csv b/epi2014.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 </head>
 <h1>Select a country</h1>
 <div id="combobox"></div>
 <div id="map" style="width: 900px; height: 550px"></div>
 <div id="chart"></div>
 <body>
  
  <script src="vis.js"></script>
 </body>
diff --git a/style.css b/style.css
 .leaflet-container{
  background-color:#c5e8ff;
 }

 body { 
   margin:0;
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
 }

 rect {
  fill: steelblue;
 }

diff --git a/vis.js b/vis.js
 var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 900 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

 var xScale = d3.scaleOrdinal()
 	.range([0, width]);

 var yScale = d3.scaleLinear()
 	.range([height,0]);

 var colScale = d3.scaleOrdinal(d3.schemeCategory20);
  
 var BAR_HEIGHT = 4;

 var svg = d3.select("#chart").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 + ")");

 var xAxis = svg.append("g")
 	.attr("class", "axis x--axis");
 var yAxis = svg.append("g")
 	.attr("class", "axis y--axis");  
  
 
 function filter(myData, attr, value) {
 	myData = myData.filter(function (d) {
  	return d[attr] = value;
  });
 }
  
 function update(myData, attrX, attrY) {

 	var fnAccX = function(d) { return d[attrX]; };
  var fnAccY = function(d) { return d[attrY]; };

 	xScale.domain(myData.map(fnAccX));
  yScale.domain([0, d3.max(myData, fnAccY) ]);
  
 	var bars = svg.selectAll(".bars")
  	.data(myData);
  
  //Enter
  var barsEnter = bars.enter()
  	.append("rect")
    .attr("class", "bars")
    .attr("width", 0);
  
  //Exit
 	bars.exit()
  	.transition()
    .duration(1000)
    .attr("width", 0)
  	.remove();
  
  //Update
  bars.merge(barsEnter)
  	.attr("x", function(d,i) {return i * (BAR_HEIGHT+1);})
    .attr("y", height)
    .style("fill", function(d,i) { return colScale(i); })
    .attr("width", 2)
  	.transition().duration(1000)
  	.attr("y", function(d) {return (yScale(fnAccY(d))); })
    .attr("height", function(d) {return (height - yScale(fnAccY(d))); });
  	
  xAxis
  	.transition()
    .duration(1000)
  	.call(d3.axisBottom()
  		.scale(xScale)
      .tickArguments(function(d) {return xScale(fnAccX(d));}));
    
  yAxis
  	.transition()
    .duration(1000)
  	.call(d3.axisLeft()
  		.scale(yScale)
    	.ticks(10));
    
 }

 function selectedCountry(myData, attrX) {
  
  var fnAccX = function(d) { return d[attrX]; };
    
  orderedData = myData.sort(function (a, b) {
  	return d3.ascending(fnAccX(a), fnAccX(b));
  });
  
  var select  = d3.select("#combobox").append("select").on("change", change), 				options = select.selectAll('option').data(orderedData);
 	
  options.enter().append("option").text(function(d) { return fnAccX(d);});
     
  function change() {
 		var si = select.property('selectedIndex');
    console.log(myData[si]);
  	update(myData[si], "Country","EPI Score");
 	}
 }

 var myGeoJSONPath = "world.json";
 	$.getJSON(myGeoJSONPath,function(data){
 		var map = L.map('map').setView([39, -1], 1.6);
 		L.geoJson(data, {
 			clickable: true,
 			style: {
        stroke: false,
 				fill: true,
 				fillColor: '#FFF',
 				fillOpacity: 1
      }
 		}).addTo(map);
 	});

 d3.csv("epi2014.csv", function(err, data) {
  if(err) {
  	console.err(err);
    alert(err);
    return;
  }
  selectedCountry(data, "Country", "EPI Score");
 });


diff --git a/world.json b/world.json
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	</head>
	<h1>Select a country</h1>
	<div id="combobox"></div>
	<div id="map" style="width: 900px; height: 550px"></div>
	<div id="chart"></div>
	<body>

	<script src="vis.js"></script>
	</body>
	.leaflet-container{
	background-color:#c5e8ff;
	}

	body {
	margin:0;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	}

	rect {
	fill: steelblue;
	}
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 900 - margin.left - margin.right,
	height = 300 - margin.top - margin.bottom;

	var xScale = d3.scaleOrdinal()
	.range([0, width]);

	var yScale = d3.scaleLinear()
	.range([height,0]);

	var colScale = d3.scaleOrdinal(d3.schemeCategory20);

	var BAR_HEIGHT = 4;

	var svg = d3.select("#chart").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 + ")");

	var xAxis = svg.append("g")
	.attr("class", "axis x--axis");
	var yAxis = svg.append("g")
	.attr("class", "axis y--axis");


	function filter(myData, attr, value) {
	myData = myData.filter(function (d) {
	return d[attr] = value;
	});
	}

	function update(myData, attrX, attrY) {

	var fnAccX = function(d) { return d[attrX]; };
	var fnAccY = function(d) { return d[attrY]; };

	xScale.domain(myData.map(fnAccX));
	yScale.domain([0, d3.max(myData, fnAccY) ]);

	var bars = svg.selectAll(".bars")
	.data(myData);

	//Enter
	var barsEnter = bars.enter()
	.append("rect")
	.attr("class", "bars")
	.attr("width", 0);

	//Exit
	bars.exit()
	.transition()
	.duration(1000)
	.attr("width", 0)
	.remove();

	//Update
	bars.merge(barsEnter)
	.attr("x", function(d,i) {return i * (BAR_HEIGHT+1);})
	.attr("y", height)
	.style("fill", function(d,i) { return colScale(i); })
	.attr("width", 2)
	.transition().duration(1000)
	.attr("y", function(d) {return (yScale(fnAccY(d))); })
	.attr("height", function(d) {return (height - yScale(fnAccY(d))); });

	xAxis
	.transition()
	.duration(1000)
	.call(d3.axisBottom()
	.scale(xScale)
	.tickArguments(function(d) {return xScale(fnAccX(d));}));

	yAxis
	.transition()
	.duration(1000)
	.call(d3.axisLeft()
	.scale(yScale)
	.ticks(10));

	}

	function selectedCountry(myData, attrX) {

	var fnAccX = function(d) { return d[attrX]; };

	orderedData = myData.sort(function (a, b) {
	return d3.ascending(fnAccX(a), fnAccX(b));
	});

	var select = d3.select("#combobox").append("select").on("change", change), options = select.selectAll('option').data(orderedData);

	options.enter().append("option").text(function(d) { return fnAccX(d);});

	function change() {
	var si = select.property('selectedIndex');
	console.log(myData[si]);
	update(myData[si], "Country","EPI Score");
	}
	}

	var myGeoJSONPath = "world.json";
	$.getJSON(myGeoJSONPath,function(data){
	var map = L.map('map').setView([39, -1], 1.6);
	L.geoJson(data, {
	clickable: true,
	style: {
	stroke: false,
	fill: true,
	fillColor: '#FFF',
	fillOpacity: 1
	}
	}).addTo(map);
	});

	d3.csv("epi2014.csv", function(err, data) {
	if(err) {
	console.err(err);
	alert(err);
	return;
	}
	selectedCountry(data, "Country", "EPI Score");
	});