Built with blockbuilder.org
Created
May 29, 2017 04:24
-
-
Save nohevog1/7e9f3a0a170cd644cbd020f94ba9aa39 to your computer and use it in GitHub Desktop.
Nohemi_Voglozin_ GES778_FP_FV
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
| license: mit |
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"> | |
| <title>Nohemi's GES 778 Final Project</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| top: 250px; | |
| right: 10px; | |
| text-align: left; | |
| vertical-align: top; | |
| width: 280px; | |
| height: 360px; | |
| padding: 5px; | |
| color: #000; | |
| font-family: "Helvetica Neue", serif; | |
| font-size: 12px; | |
| font-weight: bold; | |
| background: #fec44f; | |
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); | |
| border: 2px; | |
| border-radius: 2px; | |
| z-index: 6; | |
| visibility: hidden; | |
| } | |
| div2.tooltip2 { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| text-align: left; | |
| vertical-align: center; | |
| width: 200px; | |
| height: 200px; | |
| padding: 5px; | |
| color: #000; | |
| font-family: "Bradley Hand ITC", serif; | |
| font-size: 24px; | |
| font-weight: bold; | |
| background: #fea73e; | |
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 1); | |
| border: 2px; | |
| border-radius: 2px; | |
| z-index: 6; | |
| opacity: .8; | |
| visibility: active; | |
| } | |
| img.center { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: 250px; | |
| width: 270px; | |
| object-fit:contain; | |
| } | |
| img.bottom { | |
| vertical-align: text-bottom; | |
| } | |
| h1 { | |
| display: block; | |
| font-size: 1.5em; | |
| font-family: "Cambria", serif; | |
| font-size: 18px; | |
| text-align: CENTER; | |
| margin-top: 0.67em; | |
| margin-bottom: 0.67em; | |
| margin-left: 0; | |
| margin-right: 0; | |
| font-weight: bold; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #1e1e1e; | |
| stroke-linejoin: round; | |
| stroke-width: 1.5px; | |
| } | |
| .info { | |
| position: absolute; | |
| font-family: "Cambria", serif; | |
| background-color: rgba(127, 205, 187, .7); | |
| visibility: hidden; | |
| padding: 0.5em; | |
| bottom: 200px; | |
| right: 50px; | |
| text-align: center | |
| } | |
| .info2 { | |
| color: #000; | |
| position: absolute; | |
| font-family: "Cambria", serif; | |
| background-color: rgba(200, 200, 200, .7); | |
| visibility: hidden; | |
| padding: 0.5em; | |
| bottom: 100px; | |
| right: 100px; | |
| text-align: center | |
| } | |
| .action-button { | |
| border-radius: 2px; | |
| border: 1px solid #19380D; | |
| padding: 3px 12px; | |
| background-color: rgba(175, 209, 183, 0.6); | |
| text-decoration: none; | |
| display: inline-block | |
| } | |
| .action-button:active { | |
| box-shadow: inset 0 0 3px 0px #0077b3; | |
| } | |
| .action-button.destroy { | |
| border: 1px solid #863636; | |
| background-color: rgba(197, 86, 86, 0.6); | |
| } | |
| </style> | |
| <svg> | |
| </svg> | |
| <div class='info'></div> | |
| <div class='info2'></div> | |
| <div id="AddAndDelete" style="text-align: center;"> | |
| <p class="value">Click buttons to Add or Remove layers</p> | |
| <a href="javascript:void(0)" class="add-research-areas action-button">Add Research Areas</a> | |
| <a href="javascript:void(0)" class="remove-research-areas action-button destroy">Remove | |
| Research Areas</a> | |
| <a href="javascript:void(0)" class="add-parks action-button">Add Parks</a> | |
| <a href="javascript:void(0)" class="remove-parks action-button destroy">Remove | |
| Parks</a> | |
| <a href="javascript:void(0)" class="add-cynegetic-zones action-button">Add Cynegetic Zones</a> | |
| <a href="javascript:void(0)" class="remove-cynegetic-zones action-button destroy">Remove Cynegetic Zones</a> | |
| </div> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <script src="http://d3js.org/d3-tile.v0.0.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var tooltip = d3.select('body').append('div') | |
| .attr('class', 'tooltip') | |
| .attr("width", 170) | |
| .attr("height", 105) | |
| //.attr("opacity", .5) | |
| .attr('visibility', 'hidden'); | |
| var tooltip2 = d3.select('body').append('div2') | |
| .attr('class', 'tooltip2') | |
| .attr("opacity", .5) | |
| //.attr('visibility', 'hidden'); | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style('visibility', 'hidden'); | |
| var div2 = d3.select("body").append("div2") | |
| .attr("class", "tooltip2") | |
| .style("opacity", .8) | |
| .style('visibility', 'active'); | |
| div2.html('<p> <img class="bottom" src="https://raw.githubusercontent.com/nohevog1/Final_Project/master/Drapeau%20du%20Benin2.jpg" alt="BENIN" width="50" height="50"> Unleash your<br>adventurous spirit<br>and come discover<br>BENIN prolific<br>touristic sites!</p>'); | |
| var pi = Math.PI, | |
| tau = 2 * pi; | |
| var width = Math.max(800, window.innerWidth), | |
| height = Math.max(400, window.innerHeight); | |
| // opacity= "0.5" | |
| // Initialize the projection to fit the world in a 1×1 square centered at the | |
| // origin. | |
| var projection = d3.geoMercator() | |
| .scale(1 / tau) | |
| .translate([0, 0]); | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var tile = d3.tile() | |
| .size([width, height]); | |
| // Define the extent of the zoom | |
| var zoom = d3.zoom() | |
| .scaleExtent([1 << 12, 1 << 20]) | |
| .on("zoom", zoomed); | |
| var svg = d3.select("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var raster = svg.append("g"); | |
| var africa = svg.append("g"); | |
| var west_africa = svg.append("g"); | |
| var departments = svg.append("g"); | |
| var alibori = svg.append("g"); | |
| var collines = svg.append("g"); | |
| var parks = svg.append("g"); | |
| var cynegetic_zones =svg.append("g"); | |
| var villages = svg.append("g"); | |
| var research_communes =svg.append("g"); | |
| // MODIFIED: Title has been put here so that it is on top of other layers | |
| // rect under the title | |
| var rect = svg.append("rect") | |
| .attr("x", width / 5) | |
| .attr("y", ".15em") | |
| .attr("width", width /1.5) | |
| .attr("height", "3em") | |
| .style("fill", "#e7e1ef") | |
| .style("fill-opacity", "1") | |
| .attr('stroke', '#636363') | |
| .attr('stroke-dasharray', '10') | |
| .attr('shape-rendering', "crispEdges") | |
| .attr('stroke-linecap', 'round') | |
| .style("stroke-width", "2px"); | |
| var titleText = 'POINTS OF INTERESTS IN BENIN (WEST AFRICA)'; | |
| var title = svg.append('text') | |
| .attr('x', width / 2) | |
| .attr('y', "1.5em") | |
| .style('font-family', 'Paerpetua Titling MT') | |
| .style('font-size', '28px') | |
| .style("font-weight", "bold") | |
| .style('text-anchor', 'middle') | |
| .style('fill', 'Magenta') | |
| .text(titleText); | |
| var endpoint = "https://raw.githubusercontent.com/umbcvis/projects/master/nohevog1/data/"; | |
| var endpoint2 = "https://raw.githubusercontent.com/nohevog1/Classes/master/" | |
| var alibori_file = "Alibori_communes_surveys.json"; | |
| var collines_file = "Collines_communes_surveys.json"; | |
| var africa_file ="Africa_with_islands.json"; | |
| var departments_file = "Departments.json" | |
| var research_communes_file = "Communes.json" | |
| var parks_file ="National_Parks.json" | |
| var cynegetic_zones_file ="Cynegetic_Zones.json" | |
| var west_africa_file = "West_Africa.json" | |
| var villages_file = "Villages.json" | |
| // They have been projected onto (UTM Transverse Mercator = | |
| // WGS_1984_UTM_Zone_31N) | |
| // The following file has been fixed | |
| // var file = "Benin.json"; // This does not work | |
| // The following file no longer exists | |
| // var file = "Parcs_Nationaux.json"; // Ditto | |
| // Local testing | |
| // endpoint = "http://localhost/~pbogden/umbcvis/projects/nohevog1/data/"; | |
| var data_villages = endpoint2 + villages_file; | |
| d3.queue() | |
| .defer(d3.json, endpoint + africa_file)// json1 | |
| .defer(d3.json, endpoint2 + west_africa_file)// json2 | |
| .defer(d3.json, endpoint2 + departments_file)// json3 | |
| .defer(d3.json, endpoint2 + parks_file)// json4 | |
| .defer(d3.json, endpoint2 + cynegetic_zones_file)// json5 | |
| .defer(d3.json, endpoint + research_communes_file)// json6 | |
| .defer(d3.json, endpoint2 + alibori_file)// json7 | |
| .defer(d3.json, endpoint2 + collines_file)// json8 | |
| .defer(d3.json, data_villages)// json9 | |
| .await(ready); | |
| function ready(error, json1, json2, json3, json4, json5, json6, json7, json8, json9) { | |
| if (error) throw error; | |
| africa = africa.append('path') | |
| .datum(json1) | |
| .attr("class", "country") | |
| .attr("d", path) | |
| .style('stroke', 'red') | |
| ; | |
| west_africa = west_africa.append('path') | |
| .datum(json2) | |
| .attr("class", "country") | |
| .attr("d", path) | |
| .style('stroke', 'blue') | |
| ; | |
| departments = departments.selectAll(".divisions") | |
| .data(json3.features) | |
| .enter().append("path") | |
| .attr("class", ".divisions") | |
| .attr("d", path) | |
| //.attr('stroke', '#ffff00') | |
| .on('mouseover', function(d, i) { | |
| console.log('mouseover:', i, d); | |
| div.style('visibility', 'visible') | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 10) | |
| d3.select(this).style('fill', '#c51b8a'); | |
| div.html("Department Name:<br>" + "<h1>" + d.properties.DEPARTM + "</h1>" + "<br><img class='center' src=\'" + d.properties.URL_IMAGE + "'>" + "<br><a href=\'" + d.properties.WEB_LINK + "' target='_blank'>" + "More Info" + "</a>")}) | |
| .on('mouseout', function(d) { | |
| d3.select(this).style('fill', ''); | |
| div.transition() | |
| .duration(1500) | |
| .style("opacity", 0) | |
| }) | |
| parks = parks.selectAll(".national_parks") | |
| .data(json4.features) | |
| .enter().append("path") | |
| //.attr('id', 'nparks') | |
| .attr("class", "national_parks") | |
| .attr("d", path) | |
| .style('stroke', '#cc00cc') | |
| .style('fill', 'green') | |
| .on('mouseover', function(d, i) { | |
| console.log('mouseover:', i, d); | |
| div.style('visibility', 'visible') | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 10) | |
| //d3.select(".info").style('visibility', 'visible') | |
| d3.select(this).style('fill', 'yellow'); | |
| //d3.select(this).attr('stroke-width', 4).raise() | |
| div.html("National Park Name:<br>" + "<h1>" + d.properties.NAME1_ + " <br>Area (sq.km): " + (d3.format(",d")(d.properties.AREA_)+ "</h1>" + "<br><img class='center' src=\'" + d.properties.URL_IMAGE + "'>" + "<br><a href=\'" + d.properties.WEB_LINK + "' target='_blank'>" + "More Info" + "</a>"))}) | |
| .on('mouseout', function(d) { | |
| d3.select(this).style('fill', 'green'); | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 0) | |
| }) | |
| cynegetic_zones = cynegetic_zones.selectAll('cz') | |
| .data(json5.features) | |
| //.attr('id', 'cz') | |
| .enter().append("path") | |
| .attr("class", "cz") | |
| .attr("d", path) | |
| .style('stroke', 'black') | |
| .style('fill', 'orange') | |
| .on('mouseover', function(d, i) { | |
| console.log('mouseover:', i, d); | |
| div.style('visibility', 'visible') | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 10) | |
| //d3.select(".info").style('visibility', 'visible') | |
| d3.select(this).style('fill', '#f03b20'); | |
| //d3.select(this).attr('stroke-width', 4).raise() | |
| div.html("Cynegetic Zone Name:<br>" + "<h1>" + d.properties.NAME1_ + "</h1>" + "<br><img class='center' src=\'" + d.properties.URL_IMAGE + "'>" + "<br><a href=\'" + d.properties.WEB_LINK + "' target='_blank'>" + "More Info" + "</a>")}) | |
| .on('mouseout', function(d) { | |
| d3.select(this).style('fill', 'orange'); | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 0) | |
| }) | |
| ; | |
| alibori = alibori.selectAll('north') | |
| .data(json7.features) | |
| .enter().append('path') | |
| .attr("class", "north") | |
| .attr("d", path) | |
| .style('stroke', '#cc00cc') | |
| .style('fill', '#9393b7') | |
| .on('mouseover', function(d, i) { | |
| console.log('mouseover:', i, d); | |
| div.style('visibility', 'visible') | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 10) | |
| //d3.select(".info").style('visibility', 'visible') | |
| d3.select(this).style('fill', '#edf8b1'); | |
| //d3.select(this).attr('stroke-width', 4).raise() | |
| div.html("Research Area Name:<br>" + "<h1>" + d.properties.NOM + "</h1>" + "<br><img class='center' src=\'" + d.properties.URL_IMAGE + "'>" + "<br><a href=\'" + d.properties.WEB_LINK + "' target='_blank'>" + "More Info" + "</a>")}) | |
| .on('mouseout', function(d) { | |
| d3.select(this).style('fill', '#9393b7'); | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 0) | |
| }) | |
| ; | |
| collines = collines.selectAll('south') | |
| .data(json8.features) | |
| .enter().append('path') | |
| .attr("class", "south") | |
| .attr("d", path) | |
| .style('stroke', '#d600d6') | |
| .style('fill', '#feaa56') | |
| .on('mouseover', function(d, i) { | |
| console.log('mouseover:', i, d); | |
| div.style('visibility', 'visible') | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 10) | |
| //d3.select(".info").style('visibility', 'visible') | |
| d3.select(this).style('fill', '#edf8b1'); | |
| //d3.select(this).attr('stroke-width', 4).raise() | |
| div.html("Research Area Name:<br>" + "<h1>" + d.properties.NOM + "</h1>" + "<br><img class='center' src=\'" + d.properties.URL_IMAGE + "'>" + "<br><a href=\'" + d.properties.WEB_LINK + "' target='_blank'>" + "More Info" + "</a>")}) | |
| .on('mouseout', function(d) { | |
| d3.select(this).style('fill', '#feaa56'); | |
| div.transition() | |
| .duration(2000) | |
| .style("opacity", 0) | |
| }) | |
| ; | |
| research_communes = research_communes.selectAll("communes") | |
| // .data(topojson.feature(json2, json2.objects).features) | |
| .datum(json6) | |
| .attr("class", "NAME") | |
| .attr("d", path) | |
| // .style('symbol', 'diamond') | |
| .style('stroke', 'black') | |
| .style('fill', 'magenta') | |
| // THIS HAS BEEN FIXED -- Villages now appear on map, and you can mouseover | |
| // each one to change title | |
| villages = villages.selectAll(".research_villages") | |
| .data(json9.features) // Plotting each feature separately so | |
| // we can mouseover each one | |
| .enter().append("path") | |
| .attr("class", "research_villages") | |
| .attr("d", path) | |
| .style("stroke", "#aaa") | |
| .style('fill', 'crimson') | |
| .on('mouseover', function(d, i) { | |
| console.log('mouseover:', i, d); | |
| d3.select(".info").style('visibility', 'visible') | |
| d3.select(this).style('fill', 'cyan'); | |
| d3.select(this).attr('stroke-width', 10).raise() | |
| d3.select(".info").html(" Village Name: " + d.properties.NAME)}) | |
| .on('mouseout', function(d) { | |
| d3.select(this).style('fill', 'crimson'); | |
| d3.select(".info").html("") | |
| }); | |
| // Compute the projected initial center. | |
| var center = projection([2, 10]); | |
| // Apply a zoom transform equivalent to projection.{scale,translate,center}. | |
| svg | |
| .on('mousemove', mousemoved) | |
| .on('mouseout', function() { d3.select('.info').style('visibility', 'hidden') }) | |
| .on('mouseout', function() { d3.select('.info2').style('visibility', 'hidden') }) | |
| .call(zoom) | |
| .call(zoom.transform, d3.zoomIdentity | |
| .translate(width / 2, height / 2) | |
| .scale(1 << 15) | |
| .translate(-center[0], -center[1])); | |
| d3.selectAll("#AddAndDelete .add-research-areas") | |
| .on("click", function() { | |
| console.log("You clicked the add-research-areas button"); | |
| // we show this layer by making sure its elements are visible | |
| d3.selectAll(".research_villages").attr("visibility", "visible"); | |
| }); | |
| d3.selectAll("#AddAndDelete .remove-research-areas") | |
| .on("click", function() { | |
| console.log("You clicked the remove-research-areas button"); | |
| // we remove this layer by hiding its elements | |
| d3.selectAll(".research_villages").attr("visibility", "hidden"); | |
| }); | |
| d3.selectAll("#AddAndDelete .add-parks") | |
| .on("click", function() { | |
| //alert("You clicked the add Parks button"); | |
| // we show this layer by making sure its elements are visible | |
| //by setting the opacity at the maximum | |
| d3.selectAll('.national_parks').attr('fill-opacity', 255) | |
| d3.selectAll('.national_parks').style('stroke-opacity', 255) | |
| }) | |
| d3.selectAll("#AddAndDelete .remove-parks") | |
| .on("click", function() { | |
| alert("You clicked the remove Parks button"); | |
| // we remove this layer by hiding its elements | |
| //by setting the opacity at the minimum | |
| d3.selectAll('.national_parks').attr('fill-opacity', 0) | |
| d3.selectAll('.national_parks').style('stroke-opacity', 0) | |
| }); | |
| d3.selectAll(".add-cynegetic-zones") | |
| .on("click", function() { | |
| //alert("You clicked the Add Cynegetic Zones button"); | |
| // Determine if current line is visible | |
| //var active = cz.active ? false : false , | |
| //newOpacity = active ? 0 : 1; | |
| // Hide or show the elements | |
| //d3.select("#cz").style("opacity", newOpacity); | |
| // Update whether or not the elements are active | |
| //cz.active = active; | |
| d3.selectAll('.cz').attr('fill-opacity', 255) | |
| d3.selectAll('.cz').style('stroke-opacity', 255) | |
| }) | |
| d3.selectAll(".remove-cynegetic-zones") | |
| .on("click", function() { | |
| //alert("You clicked the Remove Cynegetic Zones button"); | |
| //var active = cz.active ? false : true , | |
| //newOpacity = active ? 0 : 1; | |
| // Hide or show the elements | |
| //d3.select("#cz").style("opacity", newOpacity); | |
| // Update whether or not the elements are active | |
| //cz.active = false; | |
| d3.selectAll('.cz').attr('fill-opacity', 0) | |
| d3.selectAll('.cz').style('stroke-opacity', 0) | |
| }) | |
| } | |
| function zoomed() { | |
| var transform = d3.event.transform; | |
| var tiles = tile | |
| .scale(transform.k) | |
| .translate([transform.x, transform.y]) | |
| (); | |
| projection | |
| .scale(transform.k / tau) | |
| .translate([transform.x, transform.y]); | |
| africa | |
| .attr("d", path) | |
| west_africa | |
| .attr("d", path) | |
| departments | |
| .attr("d", path) | |
| parks | |
| .attr("d", path) | |
| cynegetic_zones | |
| .attr("d", path) | |
| research_communes | |
| .attr("d", path) | |
| alibori | |
| .attr("d", path) | |
| collines | |
| .attr("d", path) | |
| villages | |
| .attr("d", path) | |
| var image = raster | |
| .attr("transform", stringify(tiles.scale, tiles.translate)) | |
| .selectAll("image") | |
| .data(tiles, function(d) { return d; }); | |
| image.exit().remove(); | |
| image.enter().append("image") | |
| .attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) | |
| .attr("x", function(d) { return d[0] * 256; }) | |
| .attr("y", function(d) { return d[1] * 256; }) | |
| .attr("width", 256) | |
| .attr("height", 256); | |
| } | |
| function stringify(scale, translate) { | |
| var k = scale / 256, r = scale % 1 ? Number : Math.round; | |
| return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")"; | |
| } | |
| function mousemoved() { | |
| d3.select('.info2') | |
| .style('visibility', 'visible') | |
| .text(formatLocation(projection.invert(d3.mouse(this)), projection.scale())); | |
| } | |
| function formatLocation(p, k) { | |
| var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f"); | |
| return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " | |
| + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E"); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment