CODEWITHSUNDEEP
d3.js
ee2Dev
ee2Dev

Reputation: 1998

Adjusting SVG size for rotating globe

In http://bl.ocks.org/ee2dev/71316923a9cd9fb4314a, you see a rotating globe covering a 250 x 250 area.

How do I need to change my code to set the surrounding SVG to let's say 300 x 250 (= the size of my globe + some horizontal space for the rotating city labels) ?

Any help would be greatly appreciated!

Upvotes: 1

Views: 512

Answers (1)

Ben Lyall
Ben Lyall

Reputation: 1976

You're going to have to apply a translate to your projection. As per https://github.com/mbostock/d3/wiki/Geo-Projections#translate you'll see that the projections have a default translate suitable for an svg of 960 x 500. Since your existing example has that size, the default translate matches perfectly.

Change your projection code to:

var width = 300,
    height = 250;

...

var projection = d3.geo.orthographic()
    .scale(125)
    .translate([width/2, height/2])
    .clipAngle(90);

Note the inclusion of the translate call to the projection which changes from the default to the new one based on the size of the svg.

Working example at http://bl.ocks.org/benlyall/272235d004c7afc8dc68

Upvotes: 2

Related Questions