Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active August 29, 2015 14:04
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mpmckenna8/f6245adc7a3cd3930a11 to your computer and use it in GitHub Desktop.
reproject d3.carto.map

Trying to make a little page to reproject data using d3.carto jam and it kind of works.

Things which could make this a little nicer:

-Adding some graticules.

-Adding different kinds of layers.

-Figure out what the errors are about the paths which get multiplied when panning in globe mode.

For some much cleaner better javascript examples of how to do similar things w/ d3 please see Jason Davies stuff like http://www.jasondavies.com/maps/transition/ and Mike Bostocks stuff like http://bl.ocks.org/mbostock/3711652.

Really I'm just trying to figure out how to kind of do some things they did w/ d3-carto-map.

As always let me know if there is anything silly in my code or how I could make it better.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>reprojection selection</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/d3map.css" />
<link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
</head>
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
}
#map {
height: 90%;
width: 90%;
top: 10%;
position: absolute;
}
#title {
padding: 20px;
}
.bluesquare {
fill: green;
stroke: gray;
stroke-width: 1px;
}
button.marker {
position: fixed;
z-index: 1;
bottom: 150px;
left: 150px;
}
.countryborders{
fill:#99d8c9
}
.reproject{
margin-top:-10;
}
.reprojectshp{
margin-top:-10;
}
#projection-menu{
margin-top:10px;
}
</style>
<select id="projection-menu"></select>
<script>
function makeSomeMaps() {
var map =d3.carto.map();
d3.select('#map')
.call(map);
map.mode('globe');
map.zoom().scale(300)
map.refresh();
countryLayer = d3.carto.layer.geojson();
countryLayer
.path("./world.geojson")
.label("Countries")
.cssClass("countryborders")
.renderMode("svg");
map.addCartoLayer(countryLayer);
d3.select("#map").append("button").attr("class", "reproject").html("Projection Mode").on("click", reproject);
d3.select("#map").append("button").attr("class", "reprojectshp").html("Sphere mode").on("click", sphereit);
function reproject(){
var projection = d3.geo.conicEquidistant()
.center([0, 0])
.scale(200)
.translate(map.zoom().translate())
.precision(.1);
map.mode('projection')
map.projection(projection);
map.refresh();
};
// this is the funciton getting called by the sphere thing
function sphereit(){
map.mode('globe');
map.refresh;
};
// big list of d3.geo projections from http://bl.ocks.org/mbostock/3711652
var options = [
{name: "Aitoff", projection: d3.geo.aitoff()},
{name: "Albers", projection: d3.geo.albers().scale(145).parallels([20, 50])},
{name: "August", projection: d3.geo.august().scale(60)},
{name: "Baker", projection: d3.geo.baker().scale(100)},
{name: "Boggs", projection: d3.geo.boggs()},
{name: "Bonne", projection: d3.geo.bonne().scale(120)},
{name: "Bromley", projection: d3.geo.bromley()},
{name: "Collignon", projection: d3.geo.collignon().scale(93)},
{name: "Craster Parabolic", projection: d3.geo.craster()},
{name: "Eckert I", projection: d3.geo.eckert1().scale(165)},
{name: "Eckert II", projection: d3.geo.eckert2().scale(165)},
{name: "Eckert III", projection: d3.geo.eckert3().scale(180)},
{name: "Eckert IV", projection: d3.geo.eckert4().scale(180)},
{name: "Eckert V", projection: d3.geo.eckert5().scale(170)},
{name: "Eckert VI", projection: d3.geo.eckert6().scale(170)},
{name: "Eisenlohr", projection: d3.geo.eisenlohr().scale(60)},
{name: "Equirectangular (Plate Carrée)", projection: d3.geo.equirectangular()},
{name: "Hammer", projection: d3.geo.hammer().scale(165)},
{name: "Hill", projection: d3.geo.hill()},
{name: "Goode Homolosine", projection: d3.geo.homolosine()},
{name: "Kavrayskiy VII", projection: d3.geo.kavrayskiy7()},
{name: "Lambert cylindrical equal-area", projection: d3.geo.cylindricalEqualArea()},
{name: "Lagrange", projection: d3.geo.lagrange().scale(120)},
{name: "Larrivée", projection: d3.geo.larrivee().scale(95)},
{name: "Laskowski", projection: d3.geo.laskowski().scale(120)},
{name: "Loximuthal", projection: d3.geo.loximuthal()},
// {name: "Mercator", projection: d3.geo.mercator().scale(490 / 2 / Math.PI)},
{name: "Miller", projection: d3.geo.miller().scale(100)},
{name: "McBryde–Thomas Flat-Polar Parabolic", projection: d3.geo.mtFlatPolarParabolic()},
{name: "McBryde–Thomas Flat-Polar Quartic", projection: d3.geo.mtFlatPolarQuartic()},
{name: "McBryde–Thomas Flat-Polar Sinusoidal", projection: d3.geo.mtFlatPolarSinusoidal()},
{name: "Mollweide", projection: d3.geo.mollweide().scale(165)},
{name: "Natural Earth", projection: d3.geo.naturalEarth()},
{name: "Nell–Hammer", projection: d3.geo.nellHammer()},
{name: "Polyconic", projection: d3.geo.polyconic().scale(100)},
{name: "Robinson", projection: d3.geo.robinson()},
{name: "Sinusoidal", projection: d3.geo.sinusoidal()},
{name: "Sinu-Mollweide", projection: d3.geo.sinuMollweide()},
{name: "van der Grinten", projection: d3.geo.vanDerGrinten().scale(75)},
{name: "van der Grinten IV", projection: d3.geo.vanDerGrinten4().scale(120)},
{name: "Wagner IV", projection: d3.geo.wagner4()},
{name: "Wagner VI", projection: d3.geo.wagner6()},
{name: "Wagner VII", projection: d3.geo.wagner7()},
{name: "Winkel Tripel", projection: d3.geo.winkel3()}
];
var menu = d3.select("#projection-menu")
.on("change", change);
menu.selectAll("option")
.data(options)
.enter().append("option")
.text(function(d) { return d.name; });
function change(){
console.log(options[this.selectedIndex].projection);
var projector = options[this.selectedIndex].projection;
var projection = projector
.center([0, 0])
.scale(100)
// .translate(map.zoom().translate())
.precision(.1);
map.projection(projection);
map.refresh();
}
}
</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<footer>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="http://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="/mpmckenna8/raw/55557f2cc06ae603f242/tile.js" type="text/javascript">
</script>
<script src="/mpmckenna8/raw/55557f2cc06ae603f242/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/mpmckenna8/raw/55557f2cc06ae603f242/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment