Last active
January 8, 2018 07:27
-
-
Save JulienAssouline/2e7577cca4711b4d9c948342c27a37de to your computer and use it in GitHub Desktop.
Drag Orthographic
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Mexico</title> | |
<style> | |
.boundary { | |
fill: #ccc; | |
stroke: #888; | |
stroke-linejoin: round; | |
} | |
svg { | |
border-style: solid; | |
border-width: 1px; | |
border-color: #ccc; | |
} | |
.overlay { | |
fill: none; | |
pointer-events: all; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<!-- <script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> --> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script> | |
(function(){ | |
var h = 600; | |
var w = 900; | |
var i = 0; | |
var map = void 0; | |
var world = void 0; | |
var US = void 0; | |
var margin = { | |
top: 10, | |
bottom: 40, | |
left: 0, | |
right: 30 | |
}; | |
var width = w - margin.left - margin.right; | |
var height = h - margin.top - margin.bottom; | |
var dragging = function(d){ | |
var c = projection.rotate(); | |
projection.rotate([c[0] + d3.event.dx/6, c[1] - d3.event.dy/6]) | |
map.selectAll('path').attr('d', path); | |
} | |
var drag = d3.drag() | |
.on("drag", dragging) | |
var projection = d3.geoOrthographic().clipAngle(90); | |
var path = d3.geoPath().projection(projection); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("id", "chart") | |
.attr("width", w) | |
.attr("height", h) | |
d3.json("world.json", function(json){ | |
var countries = topojson.feature(json, json.objects.countries) | |
var US = countries.features[168] | |
map = svg.append('g').attr('class', 'boundary'); | |
world = map.selectAll('path').data(countries.features); | |
US = map.selectAll('.mexico').data([US]); | |
console.log(countries.features[168]) | |
world.enter() | |
.append("path") | |
.attr("class", "boundary") | |
.attr("d", path) | |
US.enter() | |
.append("path") | |
.attr("class", "mexico") | |
.attr("d", path) | |
.style("fill", "lightyellow") | |
.style("stroke", "orange") | |
svg.append("rect") | |
.attr("class", "overlay") | |
.attr("width", w) | |
.attr("height", h) | |
.call(drag) | |
}) | |
})(); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment