Skip to content

Instantly share code, notes, and snippets.

@ejfox

ejfox/index.htm

Created October 17, 2011 21:00
Show Gist options
  • Save ejfox/1293790 to your computer and use it in GitHub Desktop.
Save ejfox/1293790 to your computer and use it in GitHub Desktop.
Download ZIP
MineralViz
Raw
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Mine the Gap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="d3.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://raw.github.com/mbostock/d3/master/d3.js" type="text/javascript" chartset="utf-8"></script>
<style type="text/css" media="screen">
#tophalf {
padding: 0;
margin: 0;
}
#bottomhalf {
padding: 0;
margin: 0;
}
.life {
stroke: #999;
}
.innercircle {
fill: red;
}
.outercircle {
fill: black;
}
</style>
</head>
<body>
<div id="container">
<div id="tophalf">
</div>
<div id="bottomhalf">
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var data = [
{"mineralname": "Aluminium", "reserves": "75000000000", "raw_static": "1, 812", "raw_growth": 81, "sqrt_growth": 212, "sqrt_static": 1000},
{"mineralname": "Antimony", "reserves": "1800000", "raw_static": 13, "raw_growth": 10, "sqrt_growth": 76, "sqrt_static": 86},
{"mineralname": "Cadmium", "reserves": "660000", "raw_static": 30, "raw_growth": 25, "sqrt_growth": 117, "sqrt_static": 129},
{"mineralname": "Chromium", "reserves": "350000000", "raw_static": 16, "raw_growth": 12, "sqrt_growth": 80, "sqrt_static": 94},
{"mineralname": "Cobalt", "reserves": "7300000", "raw_static": 83, "raw_growth": 21, "sqrt_growth": 109, "sqrt_static": 214},
{"mineralname": "Copper", "reserves": "630000000", "raw_static": 39, "raw_growth": 28, "sqrt_growth": 125, "sqrt_static": 146},
{"mineralname": "Gold", "reserves": "51000", "raw_static": 20, "raw_growth": 21, "sqrt_growth": 107, "sqrt_static": 106},
{"mineralname": "Graphite", "reserves": "71000000", "raw_static": 65, "raw_growth": 23, "sqrt_growth": 113, "sqrt_static": 189},
{"mineralname": "Indium", "reserves": "11000", "raw_static": 19, "raw_growth": 13, "sqrt_growth": 84, "sqrt_static": 103},
{"mineralname": "Lead", "reserves": "80000000", "raw_static": 20, "raw_growth": 15, "sqrt_growth": 92, "sqrt_static": 104},
{"mineralname": "Manganese", "reserves": "630000000", "raw_static": 48, "raw_growth": 22, "sqrt_growth": 110, "sqrt_static": 164},
{"mineralname": "Molybdenum", "reserves": "9800000", "raw_static": 42, "raw_growth": 20, "sqrt_growth": 105, "sqrt_static": 152},
{"mineralname": "Nickel", "reserves": "76000000", "raw_static": 49, "raw_growth": 33, "sqrt_growth": 134, "sqrt_static": 164},
{"mineralname": "Platinum", "reserves": "66000", "raw_static": 361, "raw_growth": 108, "sqrt_growth": 244, "sqrt_static": 446},
{"mineralname": "Phosphorus", "reserves": "65000000000", "raw_static": 369, "raw_growth": 84, "sqrt_growth": 216, "sqrt_static": 451},
{"mineralname": "Rare earths ", "reserves": "110000000", "raw_static": 846, "raw_growth": 78, "sqrt_growth": 207, "sqrt_static": 683},
{"mineralname": "Silver", "reserves": "510000", "raw_static": 23, "raw_growth": 18, "sqrt_growth": 101, "sqrt_static": 113},
{"mineralname": "Tantalum", "reserves": "110000", "raw_static": 164, "raw_growth": 58, "sqrt_growth": 179, "sqrt_static": 301},
{"mineralname": "Tin", "reserves": "5200000", "raw_static": 20, "raw_growth": 17, "sqrt_growth": 97, "sqrt_static": 105},
{"mineralname": "Titanium", "reserves": "690000000", "raw_static": 110, "raw_growth": 47, "sqrt_growth": 161, "sqrt_static": 246},
{"mineralname": "Tungsten", "reserves": "2900000", "raw_static": 48, "raw_growth": 21, "sqrt_growth": 107, "sqrt_static": 162},
{"mineralname": "Uranium", "reserves": "5469000", "raw_static": 102, "raw_growth": 32, "sqrt_growth": 133, "sqrt_static": 237},
{"mineralname": "Yttrium", "reserves": "540000", "raw_static": 61, "raw_growth": 13, "sqrt_growth": 84, "sqrt_static": 183},
{"mineralname": "Zinc", "reserves": "250000000", "raw_static": 21, "raw_growth": 16, "sqrt_growth": 93, "sqrt_static": 107},
{"mineralname": "Oil ", "reserves": "1333100000000", "raw_static": 43, "raw_growth": 36, "sqrt_growth": 140, "sqrt_static": 155},
{"mineralname": "Gas ", "reserves": "187490000000000", "raw_static": 64, "raw_growth": 39, "sqrt_growth": 146, "sqrt_static": 188},
{"mineralname": "Coal ", "reserves": "412441000000", "raw_static": 126, "raw_growth": 46, "sqrt_growth": 159, "sqrt_static": 263}
];
var sqrtgrowth = [];
for (var i = data.length - 1; i >= 0; i--){
sqrtgrowth[i] = data[i].sqrt_growth;
};
var sqrtstatic = [];
for (var i = data.length - 1; i >= 0; i--){
sqrtstatic[i] = data[i].sqrt_static;
};
//console.log(sqrtgrowth);
//console.log(sqrtstatic);
</script>
<script type="text/javascript" charset="utf-8">
var outerdata = sqrtstatic;
var innerdata = sqrtgrowth;
var w = 3400;
var h = 100;
var topy = 100;
var spacing = 120;
function makeCircleRadius(d) {
return d/10;
}
var tophalf =
d3.select("#tophalf")
.append("svg:svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);
var thOuterCircles =
tophalf.selectAll(".outercircle")
.data(outerdata)
.enter()
.append("svg:circle")
.attr("id", function(d,i){ return 'thoutercircle'+i; })
.attr("cx", function(d,i){
var prevradius = makeCircleRadius(outerdata[i-1]);
var prevelement = d3.select("#thoutercircle" + (i-1));
console.log(prevelement);
return (i * spacing)+100;
})
.attr("class", "outercircle")
.attr("cy", topy)
.attr("r", function(d,i){ return makeCircleRadius(d); });
var thInnerCircles =
tophalf.selectAll(".innercircle")
.data(innerdata)
.enter()
.append("svg:circle")
.attr("id", function(d,i){ return 'thinnercircle'+i; })
.attr("cx", function(d,i){ return (i * spacing)+100; })
.attr("class", "innercircle")
.attr("cy", topy)
.attr("r", function(d,i){ return makeCircleRadius(d); });
var thLifeCircles =
tophalf.selectAll(".life")
.data(data)
.enter()
.append("svg:circle")
.attr("id", function(d,i){ return 'thlifecircle'+i; })
.attr("cx", function(d,i){ return (i * spacing)+100; })
.attr("class", "life")
.attr("fill", "none")
.attr("cy", topy)
.attr("r", 203/10);
/************* BOTTOM HALF ****************/
var bottomy = 0;
var bottomhalf =
d3.select("#bottomhalf")
.append("svg:svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h);
var bhOutercircles =
bottomhalf.selectAll(".outercircle")
.data(outerdata)
.enter()
.append("svg:circle")
.attr("id", function(d,i){ return 'bhoutercircle'+i; })
.attr("cx", function(d,i){ return (i * spacing)+100; })
.attr("class", "outercircle")
.attr("cy", 0)
.attr("r", function(d,i){ return makeCircleRadius(d); });
var bhInnercircles =
bottomhalf.selectAll(".innercircle")
.data(innerdata)
.enter()
.append("svg:circle")
.attr("id", function(d,i){ return 'bhinnercircle'+i; })
.attr("cx", function(d,i){ return (i * spacing)+100; })
.attr("class", "innercircle")
.attr("cy", 0)
.attr("r", function(d,i){ return makeCircleRadius(d); });
var bhLifeCircles =
bottomhalf.selectAll(".life")
.data(data)
.enter()
.append("svg:circle")
.attr("id", function(d,i){ return 'bhlifecircle'+i; })
.attr("cx", function(d,i){ return (i * spacing)+100; })
.attr("class", "life")
.attr("fill", "none")
.attr("cy", 0)
.attr("r", 203/10);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment