Last active
October 10, 2016 15:13
-
-
Save stephanebachelier/2dd298230d83a07027358e3dada75c49 to your computer and use it in GitHub Desktop.
D3 geo experiments
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"id": 62, | |
"loc": [ | |
12.34, | |
55.4 | |
], | |
"state": 2, | |
"gender": 0, | |
"coinType": "Lisbon", | |
"visibilityArea": { | |
"lat": 55.4, | |
"lng": 13.340000000000014, | |
"radius": 1.0000000000000002 | |
} | |
}, | |
{ | |
"id": 48, | |
"loc": [ | |
10.2, | |
53.33 | |
], | |
"state": 2, | |
"gender": 0, | |
"coinType": "Lisbon", | |
"visibilityArea": { | |
"radius": 1.0000000000000002, | |
"lng": 11.200000000000014, | |
"lat": 53.33 | |
} | |
}, | |
{ | |
"id": 36, | |
"loc": [ | |
13.25, | |
52.3 | |
], | |
"state": 2, | |
"gender": 0, | |
"coinType": "Lisbon", | |
"visibilityArea": { | |
"radius": 3.1999999999999966, | |
"lng": 16.450000000000045, | |
"lat": 52.3 | |
} | |
} | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
svg { | |
background: #eee; | |
} | |
.sphere { | |
fill: #fff; | |
} | |
.land { | |
fill: #000; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
vector-effect: non-scaling-stroke; | |
} | |
.overlay { | |
fill: none; | |
pointer-events: all; | |
} | |
</style> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<body> | |
<script> | |
// radius 2.5 is used for centered coin (user's coin) | |
function addCircleToElement (element, center, radius, style) { | |
element.append('circle') | |
.attr('cx', center.x) | |
.attr('cy', center.y) | |
.attr('r', radius) | |
.attr('fill', style.fill) | |
.attr('stroke', style.stroke) | |
.attr('stroke-width', style.strokeWidth) | |
} | |
</script> | |
<script> | |
var coin = { | |
id: 3, | |
loc: [ | |
8.49, | |
53.5 | |
] | |
}; | |
var width = 960, | |
height = 960; | |
var projection = d3.geo.mercator() | |
.translate([width / 2, height / 2]) | |
.scale((width - 1) / 2 / Math.PI); | |
var zoom = d3.behavior.zoom() | |
.scaleExtent([1, 8]) | |
.on("zoom", zoomed); | |
var path = d3.geo.path() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g"); | |
var g = svg.append("g"); | |
svg.append("rect") | |
.attr("class", "overlay") | |
.attr("width", width) | |
.attr("height", height); | |
svg | |
.call(zoom) | |
.call(zoom.event); | |
d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) { | |
if (error) throw error; | |
g.append("path") | |
.datum({type: "Sphere"}) | |
.attr("class", "sphere") | |
.attr("d", path); | |
g.append("path") | |
.datum(topojson.merge(world, world.objects.countries.geometries)) | |
.attr("class", "land") | |
.attr("d", path); | |
g.append("path") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "boundary") | |
.attr("d", path); | |
}); | |
d3.json("/stephanebachelier/raw/2dd298230d83a07027358e3dada75c49/coins.json", function(error, coins) { | |
if (error) throw error; | |
// coins should be appened as circle | |
// append `coin` to map and center the map on it. This is the coin owned by | |
// append coins to map | |
}) | |
function zoomed() { | |
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
} | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment