Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="utf-8">
- <script src="http://d3js.org/d3.v4.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
- <style type="text/css">
- .select2-results__option, .select2-selection__choice, .select2-search__field {
- font-size: 20px !important;
- }
- h1 {
- font-family: 'RavaliItalic';
- font-weight: normal;
- font-style: italic;
- }
- body {
- background-color: #AAA;
- }
- .overlay {
- fill: none;
- pointer-events: all;
- }
- svg,div {
- margin-left:auto;
- margin-right:auto;
- display:block;
- }
- #controls {
- text-align:center;
- }
- .footer,li {
- font-size: x-small;
- }
- a {
- color:#7A2B1F;
- }
- select {
- background-color:#777;
- }
- table {
- width: 400px;
- text-align: center;
- border: 0;
- margin-left: auto;
- margin-right: auto;
- }
- td {
- width: 50%;
- }
- </style>
- </head>
- <body>
- <script>
- var imgHeight = 3490, imgWidth = 6980, // Image dimensions (don't change these)
- width = 1300, height = 650, // Dimensions of cropped region
- translate0 = [0,0], scale0 = 0.25, // Initial offset & scale
- datum = {}
- datumInit = {"x":650,"y":330,"scale":0.75}; //Transition Variables
- svg = d3.select("body").append("svg")
- .style("border","1px solid black")
- .attr("width", width + "px")
- .attr("height", height + "px");
- svg.append("rect")
- .attr("class", "overlay")
- .attr("width", width + "px")
- .attr("height", height + "px");
- zoomer = d3.zoom().scaleExtent([0.25, 4]).on("zoom", zoom);
- svg = svg.append("g")
- .attr("transform", "translate(" + translate0 + ")scale(" + scale0 + ")")
- .call(zoomer)
- .append("g");
- svg.append("image")
- .attr("width", imgWidth + "px")
- .attr("height", imgHeight + "px")
- .attr("xlink:href", "TalanisFinal-noborder.jpg");
- svg.append("image")
- .attr("width", imgWidth + "px")
- .attr("height", imgHeight + "px")
- .attr("id","politics")
- .attr("xlink:href", "TalanisPolitics-noborder.png");
- distline = svg.append("line")
- .attr("display","none")
- .attr("x1",0)
- .attr("x2",0)
- .attr("y1",0)
- .attr("y2",0)
- .attr("stroke-width",5)
- .attr("stroke","red");
- function zoom() {
- svg.attr("transform", d3.event.transform);
- console.log(""+d3.event.transform);
- }
- //Construct form elements
- controls = d3.select("body").append("div").attr("id","controls");
- polbox = controls.append("div");
- polbox.append("input").attr("type","checkbox").attr("id","politicscb").attr("checked","true").on("change",politicschange);
- polbox.append("label").text("Politics Overlay");
- sel2 = controls.append("select").attr("id","sel2");
- distance = controls.append("div").attr('id','dist').style("display",'none');
- distance.append("p").html("Distance between selected points: <span id='distspan'></span> miles");
- d3.json("Talanis.json",function(err,data) {
- mapdataByRegion = d3.nest().key(function(d) { return d.area; }).sortKeys(d3.ascending)
- .sortValues(function(a,b) { return a.name < b.name ? -1 : a.name > b.name ? 1 : a.name >= b.name ? 0 : NaN; } ).entries(data);
- [1,2,3].forEach(function(z) {
- d3.select("#sel"+z).selectAll("option").data(mapdataByRegion)
- .enter()
- .append("optgroup").attr("label",function(d) { return d.key; })
- .selectAll("option").data(function (d) { return d.values; })
- .enter()
- .append("option").text(function(d) {return d.name}).attr('value',function(d) {return d.name});
- });
- });
- function politicschange() {
- d3.select("#politics").style("display",(d3.select("#politicscb").property("checked")) ? 'inline' : 'none');
- }
- function locate() {
- distline.style("display","none");
- distance.style("display","none");
- datum = sel2.select("option[value=\""+$("#sel2").select2('data')[0]['id']+"\"]").data()[0];
- console.log(datum);
- svg.transition().duration(1000)
- .call(zoomer.transform,transform);
- }
- function dist() {
- var R = 2266.45;
- var datum1 = sel2.select("option[value=\""+$("#sel2").select2('data')[0]['id']+"\"]").data()[0];
- var datum2 = sel2.select("option[value=\""+$("#sel2").select2('data')[1]['id']+"\"]").data()[0];
- if(datum1 == undefined || datum2 == undefined) { return; }
- var lat1 = (datum1.y-(imgHeight/2))/(imgHeight/2)*Math.PI/2;
- var lat2 = (datum2.y-(imgHeight/2))/(imgHeight/2)*Math.PI/2;
- var dlat = Math.abs(lat1-lat2);
- var dlon = Math.abs((((datum2.x-(imgWidth/2)) - (datum1.x-(imgWidth/2)))/(imgWidth/2))*Math.PI);
- var a = Math.sin(dlat/2) * Math.sin(dlat/2) +
- Math.cos(lat1) * Math.cos(lat2) *
- Math.sin(dlon/2) * Math.sin(dlon/2);
- var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
- var d = R * c;
- distline.attr("x1",datum1.x).attr("x2",datum2.x).attr("y1",datum1.y).attr("y2",datum2.y).style("display","inline");
- var dx = Math.abs(datum1.x - datum2.x),
- dy = Math.abs(datum1.y - datum2.y),
- x = (datum1.x + datum2.x) / 2,
- y = (datum1.y + datum2.y) / 2;
- datum.scale = (3.25-(Math.max(dx/imgWidth,dy/imgHeight))*3.25)+0.74;
- datum.x = x;
- datum.y = y;
- svg.transition().duration(1000).call(zoomer.transform,d3.zoomIdentity
- .scale(4)
- .translate(width/2, height/2)
- .translate(-datum.x,-datum.y));
- //svg.transition().duration(1000).call(zoomer.transform,d3.zoomIdentity
- //.scale(datum.scale));
- d3.select("#distspan").text(Math.round((d + 0.00001) * 100) / 100);
- distance.style("display","block");
- }
- function reset() {
- distline.style("display","none");
- distance.style("display","none");
- datum = {"x":650,"y":330,"scale":0.75};
- svg.transition().duration(1000).call(zoomer.transform,d3.zoomIdentity
- .scale(datumInit.scale)
- .translate(width/2, height/2)
- .translate(-datumInit.x,-datumInit.y));
- }
- function transform() {
- return d3.zoomIdentity
- .scale(4)
- .translate(width/2, height/2)
- .translate(-datum.x,-datum.y);
- }
- svg.transition().duration(1000)
- .call(zoomer.transform,d3.zoomIdentity
- .scale(datumInit.scale)
- .translate(width/2, height/2)
- .translate(-datumInit.x,-datumInit.y));
- $("#sel2").select2({
- width: "400px",
- multiple: true,
- maximumSelectionLength: 2,
- placeholder: "Choose Location",
- allowClear: true
- });
- $("#sel2").on('change', function (e) {
- var numsel = $("#sel2").select2('data').length;
- if(numsel == 2) { dist(); }
- else if (numsel == 1) { locate(); }
- else reset();
- });
- </script>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement