Skip to content

Instantly share code, notes, and snippets.

@jiwonkim

jiwonkim/README.md

Created January 15, 2013 19:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jiwonkim/4541384 to your computer and use it in GitHub Desktop.
Save jiwonkim/4541384 to your computer and use it in GitHub Desktop.
Download ZIP
D3GL Demo: Landings on Mars
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>D3GL Mars Landings</title>
<style type="text/css">
.mars {
width: 400px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://dcpos.ch/d3gl/js/d3gl.min.js"></script>
<script type="text/javascript">
$(function(){
// get some data
var landings = [
{name: 'Mars 3', year: 1971, site_name: 'Sirenum Terra', lat: -45, lon: 158},
{name: 'Viking 1', year: 1976, site_name: 'Chryse Planitia', lat: 23, lon: -48},
{name: 'Viking 2', year: 1976, site_name: 'Utopia Planitia', lat: 48, lon: 134},
{name: 'Mars Pathfinder & Sojourner', year: 1997, site_name: 'Ares Vallis', lat: 19.3, lon: -33.5},
{name: 'Spirit rover (MER-A)', year: 2004, site_name: 'Gusev crater', lat: -14.6, lon: 175.5},
{name: 'Opportunity rover (MER-B)', year: 2004, site_name: 'Meridiani Planum', lat: -1.9462, lon: -5.5},
{name: 'Phoenix Mars Lander', year: 2008, site_name: 'Vastitas Borealis', lat: 68.15, lon: -125.9},
{name: 'Curiosity', year: 2012, site_name: 'Aeolis Palus in Gale Crater', lat: -4.5, lon: 137.2}
];
// create a d3gl globe that represents mars...
var globe = d3.gl.globe()
.width(400).height(400)
.texture("http://dcpos.ch/d3gl/img/mars-tex.jpg");
// scales year of landing to color and size
var scaleColor = d3.scale.linear()
.domain([1971, 2012]).range(['#333', '#0ff']);
var scaleRadius = d3.scale.linear()
.domain([1971, 2012]).range([1, 5]);
// place points on mars
var points = globe.points()
.data(landings)
.radius(function(d) {
// more recent landings are bigger
return scaleRadius(d.year);
})
.color(function(d) {
// color based on year
return scaleColor(d.year);
})
.latitude(function(d) {
return d.lat;
})
.longitude(function(d) {
return d.lon;
});
// "mars" is almost a placeholder here; it might as well been "pug",
// since we don't use it to customize the globe instance
d3.select("body").selectAll("div")
.data(["mars"]).enter()
.append("div").attr("class", "mars")
.call(globe);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment