Last active
May 24, 2016 14:11
-
-
Save Mavromatika/8ad5746f97751a2377b3 to your computer and use it in GitHub Desktop.
Rivers and lakes of the Earth
This file contains hidden or 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>Rivers of the Earth</title> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> | |
| <style type="text/css"> | |
| body { | |
| background-color: black; | |
| font-family: "Varela Round", sans-serif; | |
| } | |
| .text{ | |
| position: fixed; | |
| top: 0px; | |
| right: 0px; | |
| width: 300px; | |
| color: #c4d3dd; | |
| background-color: rgba(0, 0, 0, 0.49); | |
| text-align: left; | |
| padding: 0px 20px 10px 10px; | |
| border-left: 1px solid #a87c00; | |
| } | |
| h1, p{ | |
| clear: both; | |
| color: #c4d3dd; | |
| } | |
| a{ | |
| color: #c4d3dd; | |
| text-decoration: none; | |
| } | |
| .button { | |
| float: left; | |
| cursor: pointer; | |
| background-color: #a87c00; | |
| font-size: 120%; | |
| width: 120px; | |
| border-radius: 2px; | |
| padding: 5px; | |
| margin-bottom: 15px; | |
| text-align: center; | |
| } | |
| svg { | |
| background-color: black; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #c4d3dd | |
| } | |
| .ocean{ | |
| visibility: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="text"> | |
| <h1>The main rivers and lakes of the Earth</h1> | |
| <p>Geographic data by <a href="href","http://www.naturalearthdata.com/">Natural Earth.</a> | |
| Visualization by <a href="http://mavromatika.com">Mavromatika</a> (P. Massat).</p> | |
| <div class="button" id="showOcean">Show oceans</div> | |
| </div> | |
| <script type="text/javascript" src="rivers.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| function initrotate(){initP=d3.mouse(this),currRot=projection.rotate()}function rotate(){var t=d3.mouse(this),e=projection.invert(t);if(!isNaN(e[0])){var a=projection.invert(initP),r=[e[0]-a[0],e[1]-a[1]];projection.rotate([currRot[0]+r[0],currRot[1]+r[1]]),svg.selectAll("path").attr("d",path)}}var w=1200,h=600,ocean_visibility=!1,drag=d3.behavior.drag().on("drag",rotate).on("dragstart",initrotate),projection=d3.geo.orthographic().center([0,0]).translate([w/2,h/2]).scale([w/5]).clipAngle(90),path=d3.geo.path().projection(projection),svg=d3.select("body").append("svg").attr("width",w).attr("height",h),initP=[],currRot=[];d3.json("water.json",function(t,e){if(t)return console.error(t);var a=svg.selectAll(".ocean").data(topojson.feature(e,e.objects.ocean).features).enter().append("path").attr("class","ocean").style("stroke","none").style("fill","#c4d3dd").attr("d",path);svg.selectAll(".land").data(topojson.feature(e,e.objects.land).features).enter().append("path").attr("class","land").style("stroke","none").style("fill","black").attr("d",path);svg.selectAll(".lake").data(topojson.feature(e,e.objects.lakes).features).enter().append("path").attr("class","lake").style("fill","#c4d3dd").attr("d",path),svg.selectAll(".river").data(topojson.feature(e,e.objects.rivers).features).enter().append("path").attr("class","river").style("stroke","#c4d3dd").style("fill","none").attr("d",path);svg.append("circle").attr("cx",projection([0,0])[0]).attr("cy",projection([0,0])[1]).attr("r",projection([90,0])[0]-projection([0,0])[0]).attr("fill","rgba(255, 0, 0, 0)").style("cursor","pointer").call(drag);d3.select("#showOcean").on("click",function(){console.log("rien"),ocean_visibility?(a.style("visibility","hidden"),ocean_visibility=!1,d3.select(this).html("Show oceans")):(a.style("visibility","visible"),ocean_visibility=!0,d3.select(this).html("Hide oceans"))})}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment