Skip to content

Instantly share code, notes, and snippets.

@js418

js418/.block

Last active March 18, 2017 21:26
Show Gist options
  • Save js418/f338b6ed29d613bd6db3ab88a2ccb580 to your computer and use it in GitHub Desktop.
Save js418/f338b6ed29d613bd6db3ab88a2ccb580 to your computer and use it in GitHub Desktop.
Download ZIP
yearly export
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Yearly Export</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
*, body{
font-family: Helvetica, sans-serif;
margin: 0;
}
#content {
margin: auto;
width: 800px;
}
#viz {
border: solid 1px red;
height: 400px;
}
select, input,lable {
display: block;
margin: 10px 0 10px 0;
}
.tooltip{
border: 1px solid #dedede;
position: absolute;
display: none;
}
.tooltip p.subtitle{
font-size:smaller;
}
.tooltip table{
margin: 10px 0 0 0;
text-align: left;
vertical-align: top;
}
.tooltip table tr:first-child th,
.tooltip table tr:first-child td{
border-bottom 1 solid #ccc;
padding: 5px 0;
}
.tooltip table td:nth-child(2){
padding: 0 0 0 10px;
text-align: right;
}
</style>
</head>
<body>
<div id="content">
<div id = "viz"></div>
<form>
<label for = "xaxis">X Axis</label>
<select id = "xaxis">
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
</select>
<label for = "yaxis">Y Axis</label>
<select id = "yaxis">
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
</select>
<label for = "labels">Labels?</label>
<input type = "checkbox" id = "labels" value = "labels"/>
<input type = "submit" id = "labels" value = "Update"/>
</form>
<div class = "tooltip">
<h2>Ghana</h2>
<p class = "subtitle" id = "abbrv">GHA</p>
<p class = "subtitle" id = "cont">Africa</p>
<table>
<tr id = "val_2010">
<th>2010 Export Value</th>
<td>$12,334,254,555 USD</td>
</tr>
<tr id = "val_2011">
<th>2011 Export Value</th>
<td>$1,934,254,555 USD</td>
</tr>
</table>
</div>
</div>
<script>
var data = {};
var country_attrs = null;
var width = 800,
height = 400
padding = 20;
var format_usd = d3.format("$,.0f");
var x_scale = d3.scaleLog()
.range([0,width]);
var y_scale = d3.scaleLog()
.range([height,0]);
var x_axis = d3.axisBottom(x_scale)
.ticks(5)
.tickFormat(function(d){return d3.format(".2s")(d).replace("G","B");});
var y_axis = d3.axisLeft(y_scale)
.ticks(5)
.tickFormat(function(d){return d3.format(".2s")(d).replace("G","B");});
var svg = d3.select("#viz").append("svg")
.style("margin", padding/2)
.attr("width", width-padding)
.attr("height", height-padding);
svg.append("g")
.attr("class","axis")
.attr("transform", "translate(30," + (height - 50) + ")")
.attr("id", "x_axis");
svg.append("g")
.attr("class","axis")
.attr("transform", "translate(30,-50)")
.attr("id", "y_axis");
d3.select("form").on ("submit", function(d){
var x_year = document.getElementById("xaxis").value;
console.log(x_year);
var y_year = document.getElementById("yaxis").value;
//console.log(y_year);
var show_labels = document.getElementById("labels").checked;
//console.log(show_labels);
fetch_data(x_year,y_year,show_labels);
d3.event.preventDefault();
});
function fetch_data(x_year,y_year,show_labels){
if (!country_attrs){
country_attrs ={};
d3.json("http://atlas.media.mit.edu/attr/country/", function(error,countries){
if(error) return console.warn(error);
countries.data.forEach(function(d){
country_attrs[d.id] = d;
})
});
d3.json("http://atlas.media.mit.edu/hs/export/" +x_year+"/show/all/all/",function(error_x,json_x){
if (error_x) return console.warn(error_x);
d3.json("http://atlas.media.mit.edu/hs/export/" +y_year+"/show/all/all/",function(error_y,json_y){
if (error_y) return console.warn(error_y);
console.log(json_x,json_y, country_attrs, show_labels);
update(json_x,json_y,country_attrs, show_labels);
});
});
};
}
function update(x_data,y_data, attrs, show_labels){
var x_year = x_data.data[0].year;
var y_year = y_data.data[0].year;
data = {};
x_data.data.forEach(function(d){
data[d.origin_id] = {
id: d.origin_id
};
data[d.origin_id]["export_val_"+ x_year] = d.export_val;
});
y_data.data.forEach(function(d){
if (data[d.origin_id]){
data[d.origin_id]["export_val_"+ y_year] = d.export_val;
}
});
//console.log(data);
x_scale.domain(d3.extent(d3.values(data),function(d){return d["export_val_" + x_year];}));
y_scale.domain(d3.extent(d3.values(data),function(d){return d["export_val_" + y_year];}));
d3.select("g#x_axis").call(x_axis);
d3.select("g#y_axis").call(y_axis);
var country_g = svg.selectAll("g.country")
.data(d3.values(data))
var country_g_enter = country_g.enter()
.append("g")
.attr("class","country")
.attr("transform", "translate(30,-50)");
country_g_enter.append("circle");
country_g_enter.append("text");
country_g_enter.select("circle")
.attr("cx", function(d){return x_scale(d["export_val_" + x_year])})
.attr("cy", function(d){
if (d["export_val_" + y_year]){
return y_scale(d["export_val_" + y_year]);}
return y_scale(0.01);
})
.attr("r", 5)
.attr("fill", function(d){return country_attrs[d.id]["color"];})
.on("mouseover", function(d,i){
d3.select(".tooltip h2")
.text(function(){
return country_attrs[d.id]["name"];
});
d3.select(".tooltip p#abbrv")
.text(function(){
if(country_attrs[d.id]["display_id"]){
return country_attrs[d.id]["display_id"];
}
return "-";
});
d3.select(".tooltip p#cont")
.text(function(){
var contenent_id = d.id.substr(0,2);
return country_attrs[contenent_id]["name"];
});
d3.select(".tooltip #val_2010 td")
.text(function(){
return format_usd(d["export_val_" + x_year]);
});
d3.select(".tooltip #val_2011 td")
.text(function(){
if (d["export_val_" + y_year]){
return format_usd(d["export_val_" + y_year]);
}
return "-";
});
d3.select(".tooltip")
.style("display","block")
.style("left", (d3.event.pageX) + "px")
.style("top", d3.event.pageY + "px");})
.on("mouseout", function(d,i){
d3.select(".tooltip")
.style("display","none");});
country_g_enter.select("text")
.attr("x", function(d){return x_scale(d["export_val_" + x_year])})
.attr("y", function(d){
if (d["export_val_" + y_year]){
return y_scale(d["export_val_" + y_year]);}
return y_scale(0.01);
})
.attr("fill", function(d){return country_attrs[d.id]["color"];})
.text(function(d){
if (show_labels){
if (country_attrs[d.id]["display_id"]){
return country_attrs[d.id]["display_id"].toUpperCase();
}
}
});
country_g.exit().remove();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment