{"id":18039,"date":"2017-04-06T00:00:00","date_gmt":"2017-04-06T00:00:00","guid":{"rendered":"http:\/\/live-hakamagwp.pantheonsite.io\/videos-visuals\/\/listen-how-loud-sea"},"modified":"2021-01-20T11:27:04","modified_gmt":"2021-01-20T19:27:04","slug":"listen-how-loud-sea","status":"publish","type":"custom_visuals","link":"https:\/\/hakaimagazine.com\/videos-visuals\/listen-how-loud-sea\/","title":{"rendered":"Listen to How Loud the Sea Is"},"content":{"rendered":"<p>Busy waters surround the southern tip of British Columbia\u2019s Vancouver Island in what is called the Salish Sea. To the west, the Juan de Fuca Strait acts as an off-ramp for container ships, tankers, and freighters moving into the ports of Seattle and Tacoma, Washington, or Vancouver, British Columbia.<\/p>\n<p>Eighty southern resident killer whales make their home in the Salish Sea, anchored here by their preferred food: chinook salmon, the largest Pacific salmon species. However, busy international shipping lanes dissect the whales\u2019 feeding grounds, and with the recent approval of Kinder Morgan\u2019s Trans Mountain Pipeline expansion, tanker traffic is set to rise by three percent.<\/p>\n<p>The southern residents are well known by people living near and visiting the Salish Sea. They rouse strong emotions and concern over potential impacts such as oil spills and ship strikes, but one consequence of the increase in marine traffic doesn\u2019t get as much attention: sound. Killer whales use squeaks, clicks, and other vocalizations to broadcast their location, communicate socially, and hunt. Ship noise can drown out these sounds. Especially loud are the sounds of cavitation, which occurs when the bubbles formed by a vessel\u2019s fast-moving propeller pop.<\/p>\n<p>But ships aren\u2019t the only noisemakers\u2014the Salish Sea is full of all kinds of noises. In this interactive map, we\u2019ve assembled some hydrophone recordings from these waters.<\/p>\n<p>Of course whales don\u2019t hear these sounds the same way we do, as their ears detect different frequencies than ours, but this soundscape will give you an idea of the variety of noises that permeate these waters as well as others around the world. Some sounds, such as those made by paddling kayakers, may be benign to a whale; others, including cavitation and military sonar, are known to interfere with their vocalizations and can even damage their eardrums.<\/p>\n<p><em>Due to size limitations, the map is not visible on mobile devices, but here are the recordings.<\/em><\/p>\n<div id=\"mapbox\" class=\"map\">\r\n<div class=\"mobile\"><em>Due to size limitations, the map is not visible on mobile devices, but here are the recordings.<\/em><\/div>\r\n\r\n  <input type=\"checkbox\" id=\"aud_CN_whales\" onclick=\"aud('CN_whales')\" \/>\r\n  <label for=\"aud_CN_whales\">  \r\n  Killer whale pod  - Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_bulkcargo\" onclick=\"aud('EN_bulkcargo')\" \/>\r\n  <label for=\"aud_EN_bulkcargo\">\r\n Vehicle carrier - These large ships carry thousands of cars at a time. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_cruise_shaft\" onclick=\"aud('EN_cruise_shaft')\" \/>\r\n  <label for=\"aud_EN_cruise_shaft\">\r\n  Cruise ship - This cruise ship has a rope wrapped around its propeller shaft, creating an irregular sound. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_tanker\" onclick=\"aud('EN_tanker')\" \/>\r\n  <label for=\"aud_EN_tanker\">\r\nTanker - These cargo ships carry huge volumes of oil from pipeline terminals to overseas markets. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_tugboat\" onclick=\"aud('EN_tugboat')\" \/>\r\n  <label for=\"aud_EN_tugboat\">\r\nTugboat - Tugs are common in coastal waters, towing barges or maneuvering larger ships to port. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_whales\" onclick=\"aud('EN_whales')\" \/>\r\n  <label for=\"aud_EN_whales\">Killer whale pod - Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s central node, Strait of Georgia, British Columbia.)<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_LK_kayakers\" onclick=\"aud('LK_kayakers')\" \/>\r\n  <label for=\"aud_LK_kayakers\">Kayakers - Kayakers often stay close to shore and are not especially loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_LK_sonar\" onclick=\"aud('LK_sonar')\" \/>\r\n  <label for=\"aud_LK_sonar\">\r\nSonar - Military sonar is difficult to track or predict, but can be very loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_OS_bulkcarrierandwhales\" onclick=\"aud('OS_bulkcarrierandwhales')\" \/>\r\n  <label for=\"aud_OS_bulkcarrierandwhales\">\r\nBulk carrier and killer whales - A large cargo ship is heard alongside a pod of killer whales. (Recorded at Orcasounds hydrophone, San Juan Island, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_NB_jackhammer\" onclick=\"aud('NB_jackhammer')\" \/>\r\n  <label for=\"aud_NB_jackhammer\">\r\nJackhammer - This jackhammer is likely being used on a dock. (Recorded at Neah Bay, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_NB_piledriver\" onclick=\"aud('NB_piledriver')\" \/>\r\n  <label for=\"aud_NB_piledriver\">  \r\nPiledriver - Driving pilings for a dock creates loud percussions. (Recorded at Neah Bay, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_OS_loudship2rhythm\" onclick=\"aud('OS_loudship2rhythm')\" \/>\r\n  <label for=\"aud_OS_loudship2rhythm\">\r\nContainer ship - These huge ships carry thousands of containers at a time, transporting consumer goods and bulk products around the world. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n  \r\n  \r\n  <audio preload=\"auto\" loop id=\"CN_whales\">\r\n  <source src=\"\/wp-content\/uploads\/CN_whales.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/CN_whales.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_bulkcargo\">\r\n  <source src=\"\/wp-content\/uploads\/EN_bulkcargo.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_bulkcargo.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_cruise_shaft\">\r\n  <source src=\"\/wp-content\/uploads\/EN_cruise_shaft.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_cruise_shaft.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_tanker\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tanker.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tanker.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_tugboat\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tugboat.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tugboat.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_whales\">\r\n  <source src=\"\/wp-content\/uploads\/EN_whales.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_whales.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"LK_kayakers\">\r\n  <source src=\"\/wp-content\/uploads\/LK_kayakers.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/LK_kayakers.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"LK_sonar\">\r\n  <source src=\"\/wp-content\/uploads\/LK_sonar.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/LK_sonar.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"OS_bulkcarrierandwhales\">\r\n  <source src=\"\/wp-content\/uploads\/OS_bulkcarrierandwhales.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/OS_bulkcarrierandwhales.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"NB_jackhammer\">\r\n  <source src=\"\/wp-content\/uploads\/NB_jackhammer.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/NB_jackhammer.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"NB_piledriver\">\r\n  <source src=\"\/wp-content\/uploads\/NB_piledriver.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/NB_piledriver.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"OS_loudship2rhythm\">\r\n  <source src=\"\/wp-content\/uploads\/OS_loudship2rhythm.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/OS_loudship2rhythm.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  \r\n  <p><em>Note that the sounds for this map were collected at five locations, as identified in the captions. While we\u2019ve placed each sound point where it is likely to be heard, for ease of navigation the location doesn\u2019t necessarily match up with the precise point at which the sound was recorded. \r\n  <\/em><\/p>\r\n  <p class=\"instructions\">Click on the map to activate the sounds, then move your mouse over the dots to hear the soundscape. As you scroll over a sound, a description will appear beneath the map.\r\n  <\/p>\r\n\r\n  <div id=\"playpause\" class=\"playpause\"><\/div>\r\n  \r\n  <div id=\"root\"><\/div>\r\n  <div id=\"text\"><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\naudio {\r\n  display: none;\r\n}\r\n\r\np.instructions{\r\nmargin:0 0 1em 0\r\n}\r\n\r\n\/* styling the check boxes for mobile and OOD view *\/\r\n.map input[type=checkbox] {\r\n  display: none;\r\n}\r\n.hide{display:none;}\r\n.map input[type=checkbox]:checked + label {\r\n  background: rgba(105, 205, 122, 1);\r\n  background-image: url(\/wp-content\/uploads\/pause.png);\r\n  background-size: 60px;\r\n  background-position: 99% 50%;\r\n  background-repeat: no-repeat;\r\n}\r\n\r\ndiv.playpause.showoverlay {\r\n  margin: 0;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  background: rgba(33, 138, 157, .4);\r\n  background-image: url(\/wp-content\/uploads\/play.png);\r\n  background-size: 100px;\r\n  background-position: 50% 50%;\r\n  background-repeat: no-repeat;\r\n  font-size:0;\r\n  margin: 0 auto;\r\n  margin-left: calc(-1 * ((990px - 100%) \/ 2));\r\n  width:990px;\r\n  height:800px;\r\n  position:absolute;\r\n  opacity:1;\r\n  left:0;\r\n  pointer-events: none;\r\n}\r\n\r\n.map input[type=checkbox]:checked.hide + label,\r\n.map input[type=checkbox]:checked + label.playpause {\r\n  opacity:0;\r\n}\r\n\r\n.map label {\r\n  margin: 1rem 0;\r\n  cursor: pointer;\r\n  padding: 2rem 5rem 2rem 2rem;\r\n  background: rgba(33, 138, 157, .4);\r\n  background-image: url(\/wp-content\/uploads\/play.png);\r\n  background-size: 60px;\r\n  background-position: 99% 50%;\r\n  background-repeat: no-repeat;\r\n  width: 100%;\r\n}\r\n\r\n\/* styling the caption text *\/\r\n#text {\r\n  height: 4rem\r\n    line-height: 1em;\r\n    margin: .5em 0;\r\n}\r\n\r\n\/* styles for the outline behind the hovering tooltip labels on the map itself *\/\r\n.white {\r\n  stroke: white;\r\n  stroke-width: 30;\r\n  text-decoration: line-through underline overline;\r\n  text-transform: uppercase;\r\n  stroke-linejoin: round;\r\n  letter-spacing: -1px;\r\n}\r\n\r\n\/* larger screens *\/\r\n@media screen and (min-width: 1025px) {\r\n  .map label {\r\n    display: none\r\n  }\r\n  .map label.playpause {\r\n    display: block\r\n  }\r\n.mobile{display:none;}\r\n\r\n  #root,\r\n  #root svg {\r\n    height: 800px;\r\n    width: 990px;\r\n    margin: 0 auto;\r\n    margin-left: calc(-1 * ((990px - 100%) \/ 2));\r\n    background-image: url(\/wp-content\/uploads\/whale-sounds-base-map2.png);\r\n    background-color: #eee;\r\n    background-repeat: no-repeat;\r\n    background-size: 100%;\r\n    cursor: url(\/wp-content\/uploads\/whale-sound-cursor-orca-100.png), auto;\r\n  }\r\n}\r\n\r\n\/* mobile *\/\r\n@media screen and (max-width: 1024px) {\r\n  #root,\r\n  #root svg,\r\n  .instructions,\r\n  #text {\r\n    display: none;\r\n  }\r\n  .map {\r\n    width: 100%;\r\n    margin: 0 auto;\r\n  }\r\n  .map label {\r\n    display: block;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n  div.playpause.showoverlay {\r\n   display:none;\r\n  }\r\n.mobile{display:block}\r\n}\r\n<\/style>\r\n\r\n<script src=\"\/\/d3js.org\/d3.v4.min.js\"><\/script>\r\n<script>\r\n\r\nd3map();\r\n\r\nfunction changeclass(element) {\r\n    $(element).toggleClass('mynewclass');\r\n}\r\n\r\nfunction aud(noiseName) {\r\n  var myAudio = document.getElementById(noiseName);\r\n  if (myAudio.paused) {\r\n    myAudio.play();\r\n    myAudio.volume = .99;\r\n  } else {\r\n    myAudio.pause();\r\n  }\r\n}\r\n\r\nfunction d3map() {\r\n  \/\/-----------D3------------\/\/\r\n  var whalesData = [\r\n  {\r\n    x: 750,\r\n    y: 800,\r\n    group: \"EN\",\r\n    sound: \"CN_whales\",\r\n    title: \"Killer whale pod\",\r\n    description: \"Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 650,\r\n    y: 80,\r\n    group: \"EN\",\r\n    sound: \"EN_bulkcargo\",\r\n    title: \"Vehicle carrier\",\r\n    description: \"These large ships carry thousands of cars at a time. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 650,\r\n    y: 730,\r\n    group: \"EN\",\r\n    sound: \"EN_cruise_shaft\",\r\n    title: \"Cruise ship\",\r\n    description: \"This cruise ship has a rope wrapped around its propeller shaft, creating an irregular sound. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 450,\r\n    y: 820,\r\n    group: \"EN\",\r\n    sound: \"EN_tanker\",\r\n    title: \"Tanker\",\r\n    description: \"These cargo ships carry huge volumes of oil from pipeline terminals to overseas markets. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 840,\r\n    y: 300,\r\n    group: \"EN\",\r\n    sound: \"EN_tugboat\",\r\n    title: \"Tugboat\",\r\n    description: \"Tugs are common in coastal waters, towing barges or maneuvering larger ships to port. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 31,\r\n    y: 512,\r\n    group: \"EN\",\r\n    sound: \"EN_whales\",\r\n    title: \"Killer whale pod\",\r\n    description: \"Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s central node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 730,\r\n    y: 570,\r\n\r\n    group: \"LK\",\r\n    sound: \"LK_kayakers\",\r\n    title: \"Kayakers\",\r\n    description: \"Kayakers often stay close to shore and are not especially loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\"\r\n  }, {\r\n    x: 850,\r\n    y: 680,\r\n    group: \"LK\",\r\n    sound: \"LK_sonar\",\r\n    title: \"Sonar\",\r\n    description: \"Military sonar is difficult to track or predict, but can be very loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\"\r\n  }, {\r\n    x: 760,\r\n    y: 180,\r\n    group: \"OS\",\r\n    sound: \"OS_loudship2rhythm\",\r\n    title: \"Container ship\",\r\n    description: \" These huge ships carry thousands of containers at a time, transporting consumer goods and bulk products around the world. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 200,\r\n    y: 680,\r\n    group: \"OS\",\r\n    sound: \"OS_bulkcarrierandwhales\",\r\n    title: \"Bulk carrier and killer whales\",\r\n    description: \"A large cargo ship is heard alongside a pod of killer whales. (Recorded at Orcasounds hydrophone, San Juan Island, Washington.)\"\r\n  }, {\r\n    x: 250,\r\n    y: 800,\r\n    group: \"NB\",\r\n    sound: \"NB_jackhammer\",\r\n    title: \"Jackhammer\",\r\n    description: \"This jackhammer is likely being used on a dock. (Recorded at Neah Bay, Washington.)\"\r\n  }, {\r\n    x: 555,\r\n    y: 900,\r\n    group: \"NB\",\r\n    sound: \"NB_piledriver\",\r\n    title: \"Piledriver \",\r\n    description: \"Driving pilings for a dock creates loud percussions. (Recorded at Neah Bay, Washington.)\"\r\n  }, ];\r\n\r\n  var width = d3.select(\"#root\").node().getBoundingClientRect().width,\r\n    height = d3.select(\"#root\").node().getBoundingClientRect().height;\r\n\r\n  var svg = d3.select('#root')\r\n    .append('svg')\r\n    .attr('width', width)\r\n    .attr('height', height);\r\n\r\n  \/\/ Switch the soundActive state and start or pause the audio\r\n  function toggleSound() {\r\n    var overlay = d3.select(\"#playpause\")\r\n    overlay.classed(\"showoverlay\", !overlay.classed(\"showoverlay\"));\r\n    soundActive = !soundActive; \/\/ flip the state\r\n    d3.selectAll('audio').nodes().forEach(function(s) {\r\n      soundActive ? s.pause() : s.play();\r\n    });\r\n   \r\n  }\r\n  \r\n\r\n  \/\/ Set this to whatever you think is appropriate. It's an 8th the longest dimension of the vis currently\r\n  var max_sound_dist = d3.max([width, height]) \/ 7;\r\n\r\n  \/\/ Variable to track if sounds is playing or not\r\n  var soundActive = false;\r\n  toggleSound(); \/\/ Start playing sound immediately\r\n\r\n  \/\/ Create a scale to map distance values to volume level\r\n  var soundScale = d3.scalePow().exponent(0.5) \/\/ Power scale is representative of how humans perceive volume with distance\r\n    .domain([0, max_sound_dist])\r\n    .range([1, 0])\r\n    .clamp(true) \/\/ Anything beyond max_sound_dist is clamped to equal 0 volume\r\n\r\n  \/\/ Calculate the distance between two points [x1, y1] and [x2, y2]\r\n  function calcDistance(a, b) {\r\n    var dx = a[0] - b[0];\r\n    var dy = a[1] - b[1];\r\n    return Math.sqrt((dx * dx) + (dy * dy));\r\n  }\r\n\r\n  \/\/ Calculate distance to a circle and set the volume of the related sound\r\n  function handleHover() {\r\n    var coords = d3.mouse(this);\r\n\r\n    \/\/ Find the closest datapoint to the mouse\r\n    var closestWhaleIndex = d3.scan(whalesData, function(a, b) {\r\n      const aDist = calcDistance(coords, [xScale(a.x), yScale(a.y)]);\r\n      const bDist = calcDistance(coords, [xScale(b.x), yScale(b.y)]);\r\n      return aDist - bDist;\r\n    });\r\n\r\n    var closestWhale = whalesData[closestWhaleIndex];\r\n\r\n    d3.selectAll('#text')\r\n      .datum(closestWhale)\r\n      .text(function(d) {\r\n        return d.description\r\n      });\r\n\r\n    \/\/ Adjust the volume and text opacity by distance\r\n    whales.each(function(d) {\r\n      var circle = d3.select(this);\r\n      var sound = document.getElementById(d.sound);\r\n\r\n      \/\/ calculate distance\r\n      var dist = calcDistance(coords, [xScale(d.x), yScale(d.y)]);\r\n      var volume = soundScale(dist);\r\n\r\n      \/\/ update sound volume\r\n      sound.volume = volume;\r\n\r\n      circle.selectAll('text.description')\r\n        .text(d.title)\r\n        .style('opacity', volume);\r\n    });\r\n  }\r\n\r\n  \/\/ Create x and y scales. The width and height will change so the position of the whales need to account for this\r\n  var xScale = d3.scaleLinear()\r\n    .domain([0, 1000]) \/\/ assumes a whale x coords is bound to [0, 1000] domain\r\n    .range([0, width]);\r\n\r\n  var yScale = d3.scaleLinear()\r\n    .domain([0, 1000]) \/\/ assumes a whale y coords is bound to [0, 1000] domain\r\n    .range([0, height]);\r\n\r\n  \/\/ Container for circles with the whale data bound to them\r\n  var whales = svg.selectAll('g.whales')\r\n    .data(whalesData).enter()\r\n    .append('g')\r\n    .attr('class', 'whales');\r\n\r\n  \/\/ Add the bubble outline of the text to each container\r\n  whales.append(\"text\")\r\n    .attr('x', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('y', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr('text-anchor', 'right')\r\n    .attr('class', 'description white')\r\n    .attr('alignment-baseline', 'middle');\r\n\r\n  \/\/ Add circle text to each circle container\r\n  whales.append(\"text\")\r\n    .attr('x', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('y', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr(\"dy\", \"0em\")\r\n    .attr(\"dx\", \"1em\")\r\n    .attr('text-anchor', 'right')\r\n    .attr('class', 'description')\r\n    .attr('alignment-baseline', 'middle');\r\n\r\n  \/\/ Add the outer svg circle to each circle container\r\n  whales.append('circle')\r\n    .attr('r', 10)\r\n    .attr('cx', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('cy', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr('fill', '#ffffff');\r\n\r\n  \/\/ Add the inner svg circle to each circle container\r\n  whales.append('circle')\r\n    .attr('r', 8)\r\n    .attr('cx', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('cy', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr('fill', '#ba7536');\r\n\r\n  \/\/ Append this rect with event listeners over other elements.\r\n  svg.append('rect')\r\n    .attr('fill', 'transparent')\r\n    .attr('width', width)\r\n    .attr('height', height)\r\n    .on(\"click\", toggleSound)\r\n    .on('mousemove', handleHover);\r\n};\r\n<\/script>\r\n\n<p><em>Recordings courtesy of the <a href=\"http:\/\/orcasound.net\">Salish Sea Hydrophone Network<\/a> and <a href=\"http:\/\/www.oceannetworks.ca\/\">Ocean Networks Canada<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our interactive sound map explores the busy marine soundscape, from kayaks to cruise ships.\u00a0<\/p>\n","protected":false},"featured_media":13206,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[167],"tags":[],"acf":{"hero_video_url":null,"hero_video_caption":"","deck":"Our interactive sound map explores the busy marine soundscape, from kayaks to cruise ships.","authors_group":[{"by_group":"by","contributors_group":[15435]}],"word_count_override":"Interactive infographic","podbean1":"","podbean2":"","redirect":"","geolocation":{"address":"48.329526, -123.1406","lat":48.329526,"lng":-123.1406},"related":[18076,17188],"twitterimage":14779,"facebookimage":14279,"twitterdescription":"","edited":"","factchecked":"","code":"<div id=\"mapbox\" class=\"map\">\r\n<div class=\"mobile\"><em>Due to size limitations, the map is not visible on mobile devices, but here are the recordings.<\/em><\/div>\r\n\r\n  <input type=\"checkbox\" id=\"aud_CN_whales\" onclick=\"aud('CN_whales')\" \/>\r\n  <label for=\"aud_CN_whales\">  \r\n  Killer whale pod  - Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_bulkcargo\" onclick=\"aud('EN_bulkcargo')\" \/>\r\n  <label for=\"aud_EN_bulkcargo\">\r\n Vehicle carrier - These large ships carry thousands of cars at a time. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_cruise_shaft\" onclick=\"aud('EN_cruise_shaft')\" \/>\r\n  <label for=\"aud_EN_cruise_shaft\">\r\n  Cruise ship - This cruise ship has a rope wrapped around its propeller shaft, creating an irregular sound. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_tanker\" onclick=\"aud('EN_tanker')\" \/>\r\n  <label for=\"aud_EN_tanker\">\r\nTanker - These cargo ships carry huge volumes of oil from pipeline terminals to overseas markets. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_tugboat\" onclick=\"aud('EN_tugboat')\" \/>\r\n  <label for=\"aud_EN_tugboat\">\r\nTugboat - Tugs are common in coastal waters, towing barges or maneuvering larger ships to port. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_EN_whales\" onclick=\"aud('EN_whales')\" \/>\r\n  <label for=\"aud_EN_whales\">Killer whale pod - Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s central node, Strait of Georgia, British Columbia.)<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_LK_kayakers\" onclick=\"aud('LK_kayakers')\" \/>\r\n  <label for=\"aud_LK_kayakers\">Kayakers - Kayakers often stay close to shore and are not especially loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_LK_sonar\" onclick=\"aud('LK_sonar')\" \/>\r\n  <label for=\"aud_LK_sonar\">\r\nSonar - Military sonar is difficult to track or predict, but can be very loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_OS_bulkcarrierandwhales\" onclick=\"aud('OS_bulkcarrierandwhales')\" \/>\r\n  <label for=\"aud_OS_bulkcarrierandwhales\">\r\nBulk carrier and killer whales - A large cargo ship is heard alongside a pod of killer whales. (Recorded at Orcasounds hydrophone, San Juan Island, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_NB_jackhammer\" onclick=\"aud('NB_jackhammer')\" \/>\r\n  <label for=\"aud_NB_jackhammer\">\r\nJackhammer - This jackhammer is likely being used on a dock. (Recorded at Neah Bay, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_NB_piledriver\" onclick=\"aud('NB_piledriver')\" \/>\r\n  <label for=\"aud_NB_piledriver\">  \r\nPiledriver - Driving pilings for a dock creates loud percussions. (Recorded at Neah Bay, Washington.)\r\n<\/label>\r\n\r\n  <input type=\"checkbox\" id=\"aud_OS_loudship2rhythm\" onclick=\"aud('OS_loudship2rhythm')\" \/>\r\n  <label for=\"aud_OS_loudship2rhythm\">\r\nContainer ship - These huge ships carry thousands of containers at a time, transporting consumer goods and bulk products around the world. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\r\n<\/label>\r\n  \r\n  \r\n  <audio preload=\"auto\" loop id=\"CN_whales\">\r\n  <source src=\"\/wp-content\/uploads\/CN_whales.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/CN_whales.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_bulkcargo\">\r\n  <source src=\"\/wp-content\/uploads\/EN_bulkcargo.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_bulkcargo.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_cruise_shaft\">\r\n  <source src=\"\/wp-content\/uploads\/EN_cruise_shaft.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_cruise_shaft.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_tanker\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tanker.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tanker.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_tugboat\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tugboat.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_tugboat.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"EN_whales\">\r\n  <source src=\"\/wp-content\/uploads\/EN_whales.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/EN_whales.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"LK_kayakers\">\r\n  <source src=\"\/wp-content\/uploads\/LK_kayakers.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/LK_kayakers.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"LK_sonar\">\r\n  <source src=\"\/wp-content\/uploads\/LK_sonar.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/LK_sonar.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"OS_bulkcarrierandwhales\">\r\n  <source src=\"\/wp-content\/uploads\/OS_bulkcarrierandwhales.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/OS_bulkcarrierandwhales.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"NB_jackhammer\">\r\n  <source src=\"\/wp-content\/uploads\/NB_jackhammer.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/NB_jackhammer.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"NB_piledriver\">\r\n  <source src=\"\/wp-content\/uploads\/NB_piledriver.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/NB_piledriver.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  <audio preload=\"auto\" loop id=\"OS_loudship2rhythm\">\r\n  <source src=\"\/wp-content\/uploads\/OS_loudship2rhythm.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"\/wp-content\/uploads\/OS_loudship2rhythm.mp3\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n  \r\n  <p><em>Note that the sounds for this map were collected at five locations, as identified in the captions. While we\u2019ve placed each sound point where it is likely to be heard, for ease of navigation the location doesn\u2019t necessarily match up with the precise point at which the sound was recorded. \r\n  <\/em><\/p>\r\n  <p class=\"instructions\">Click on the map to activate the sounds, then move your mouse over the dots to hear the soundscape. As you scroll over a sound, a description will appear beneath the map.\r\n  <\/p>\r\n\r\n  <div id=\"playpause\" class=\"playpause\"><\/div>\r\n  \r\n  <div id=\"root\"><\/div>\r\n  <div id=\"text\"><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\naudio {\r\n  display: none;\r\n}\r\n\r\np.instructions{\r\nmargin:0 0 1em 0\r\n}\r\n\r\n\/* styling the check boxes for mobile and OOD view *\/\r\n.map input[type=checkbox] {\r\n  display: none;\r\n}\r\n.hide{display:none;}\r\n.map input[type=checkbox]:checked + label {\r\n  background: rgba(105, 205, 122, 1);\r\n  background-image: url(\/wp-content\/uploads\/pause.png);\r\n  background-size: 60px;\r\n  background-position: 99% 50%;\r\n  background-repeat: no-repeat;\r\n}\r\n\r\ndiv.playpause.showoverlay {\r\n  margin: 0;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  background: rgba(33, 138, 157, .4);\r\n  background-image: url(\/wp-content\/uploads\/play.png);\r\n  background-size: 100px;\r\n  background-position: 50% 50%;\r\n  background-repeat: no-repeat;\r\n  font-size:0;\r\n  margin: 0 auto;\r\n  margin-left: calc(-1 * ((990px - 100%) \/ 2));\r\n  width:990px;\r\n  height:800px;\r\n  position:absolute;\r\n  opacity:1;\r\n  left:0;\r\n  pointer-events: none;\r\n}\r\n\r\n.map input[type=checkbox]:checked.hide + label,\r\n.map input[type=checkbox]:checked + label.playpause {\r\n  opacity:0;\r\n}\r\n\r\n.map label {\r\n  margin: 1rem 0;\r\n  cursor: pointer;\r\n  padding: 2rem 5rem 2rem 2rem;\r\n  background: rgba(33, 138, 157, .4);\r\n  background-image: url(\/wp-content\/uploads\/play.png);\r\n  background-size: 60px;\r\n  background-position: 99% 50%;\r\n  background-repeat: no-repeat;\r\n  width: 100%;\r\n}\r\n\r\n\/* styling the caption text *\/\r\n#text {\r\n  height: 4rem\r\n    line-height: 1em;\r\n    margin: .5em 0;\r\n}\r\n\r\n\/* styles for the outline behind the hovering tooltip labels on the map itself *\/\r\n.white {\r\n  stroke: white;\r\n  stroke-width: 30;\r\n  text-decoration: line-through underline overline;\r\n  text-transform: uppercase;\r\n  stroke-linejoin: round;\r\n  letter-spacing: -1px;\r\n}\r\n\r\n\/* larger screens *\/\r\n@media screen and (min-width: 1025px) {\r\n  .map label {\r\n    display: none\r\n  }\r\n  .map label.playpause {\r\n    display: block\r\n  }\r\n.mobile{display:none;}\r\n\r\n  #root,\r\n  #root svg {\r\n    height: 800px;\r\n    width: 990px;\r\n    margin: 0 auto;\r\n    margin-left: calc(-1 * ((990px - 100%) \/ 2));\r\n    background-image: url(\/wp-content\/uploads\/whale-sounds-base-map2.png);\r\n    background-color: #eee;\r\n    background-repeat: no-repeat;\r\n    background-size: 100%;\r\n    cursor: url(\/wp-content\/uploads\/whale-sound-cursor-orca-100.png), auto;\r\n  }\r\n}\r\n\r\n\/* mobile *\/\r\n@media screen and (max-width: 1024px) {\r\n  #root,\r\n  #root svg,\r\n  .instructions,\r\n  #text {\r\n    display: none;\r\n  }\r\n  .map {\r\n    width: 100%;\r\n    margin: 0 auto;\r\n  }\r\n  .map label {\r\n    display: block;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n  div.playpause.showoverlay {\r\n   display:none;\r\n  }\r\n.mobile{display:block}\r\n}\r\n<\/style>\r\n\r\n<script src=\"\/\/d3js.org\/d3.v4.min.js\"><\/script>\r\n<script>\r\n\r\nd3map();\r\n\r\nfunction changeclass(element) {\r\n    $(element).toggleClass('mynewclass');\r\n}\r\n\r\nfunction aud(noiseName) {\r\n  var myAudio = document.getElementById(noiseName);\r\n  if (myAudio.paused) {\r\n    myAudio.play();\r\n    myAudio.volume = .99;\r\n  } else {\r\n    myAudio.pause();\r\n  }\r\n}\r\n\r\nfunction d3map() {\r\n  \/\/-----------D3------------\/\/\r\n  var whalesData = [\r\n  {\r\n    x: 750,\r\n    y: 800,\r\n    group: \"EN\",\r\n    sound: \"CN_whales\",\r\n    title: \"Killer whale pod\",\r\n    description: \"Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 650,\r\n    y: 80,\r\n    group: \"EN\",\r\n    sound: \"EN_bulkcargo\",\r\n    title: \"Vehicle carrier\",\r\n    description: \"These large ships carry thousands of cars at a time. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 650,\r\n    y: 730,\r\n    group: \"EN\",\r\n    sound: \"EN_cruise_shaft\",\r\n    title: \"Cruise ship\",\r\n    description: \"This cruise ship has a rope wrapped around its propeller shaft, creating an irregular sound. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 450,\r\n    y: 820,\r\n    group: \"EN\",\r\n    sound: \"EN_tanker\",\r\n    title: \"Tanker\",\r\n    description: \"These cargo ships carry huge volumes of oil from pipeline terminals to overseas markets. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 840,\r\n    y: 300,\r\n    group: \"EN\",\r\n    sound: \"EN_tugboat\",\r\n    title: \"Tugboat\",\r\n    description: \"Tugs are common in coastal waters, towing barges or maneuvering larger ships to port. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 31,\r\n    y: 512,\r\n    group: \"EN\",\r\n    sound: \"EN_whales\",\r\n    title: \"Killer whale pod\",\r\n    description: \"Killer whales communicate and hunt using whistles, clicks, and other vocalizations. (Recorded at Ocean Networks Canada\u2019s central node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 730,\r\n    y: 570,\r\n\r\n    group: \"LK\",\r\n    sound: \"LK_kayakers\",\r\n    title: \"Kayakers\",\r\n    description: \"Kayakers often stay close to shore and are not especially loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\"\r\n  }, {\r\n    x: 850,\r\n    y: 680,\r\n    group: \"LK\",\r\n    sound: \"LK_sonar\",\r\n    title: \"Sonar\",\r\n    description: \"Military sonar is difficult to track or predict, but can be very loud. (Recorded near Lime Kiln Lighthouse, San Juan Island, Washington.)\"\r\n  }, {\r\n    x: 760,\r\n    y: 180,\r\n    group: \"OS\",\r\n    sound: \"OS_loudship2rhythm\",\r\n    title: \"Container ship\",\r\n    description: \" These huge ships carry thousands of containers at a time, transporting consumer goods and bulk products around the world. (Recorded at Ocean Networks Canada\u2019s east node, Strait of Georgia, British Columbia.)\"\r\n  }, {\r\n    x: 200,\r\n    y: 680,\r\n    group: \"OS\",\r\n    sound: \"OS_bulkcarrierandwhales\",\r\n    title: \"Bulk carrier and killer whales\",\r\n    description: \"A large cargo ship is heard alongside a pod of killer whales. (Recorded at Orcasounds hydrophone, San Juan Island, Washington.)\"\r\n  }, {\r\n    x: 250,\r\n    y: 800,\r\n    group: \"NB\",\r\n    sound: \"NB_jackhammer\",\r\n    title: \"Jackhammer\",\r\n    description: \"This jackhammer is likely being used on a dock. (Recorded at Neah Bay, Washington.)\"\r\n  }, {\r\n    x: 555,\r\n    y: 900,\r\n    group: \"NB\",\r\n    sound: \"NB_piledriver\",\r\n    title: \"Piledriver \",\r\n    description: \"Driving pilings for a dock creates loud percussions. (Recorded at Neah Bay, Washington.)\"\r\n  }, ];\r\n\r\n  var width = d3.select(\"#root\").node().getBoundingClientRect().width,\r\n    height = d3.select(\"#root\").node().getBoundingClientRect().height;\r\n\r\n  var svg = d3.select('#root')\r\n    .append('svg')\r\n    .attr('width', width)\r\n    .attr('height', height);\r\n\r\n  \/\/ Switch the soundActive state and start or pause the audio\r\n  function toggleSound() {\r\n    var overlay = d3.select(\"#playpause\")\r\n    overlay.classed(\"showoverlay\", !overlay.classed(\"showoverlay\"));\r\n    soundActive = !soundActive; \/\/ flip the state\r\n    d3.selectAll('audio').nodes().forEach(function(s) {\r\n      soundActive ? s.pause() : s.play();\r\n    });\r\n   \r\n  }\r\n  \r\n\r\n  \/\/ Set this to whatever you think is appropriate. It's an 8th the longest dimension of the vis currently\r\n  var max_sound_dist = d3.max([width, height]) \/ 7;\r\n\r\n  \/\/ Variable to track if sounds is playing or not\r\n  var soundActive = false;\r\n  toggleSound(); \/\/ Start playing sound immediately\r\n\r\n  \/\/ Create a scale to map distance values to volume level\r\n  var soundScale = d3.scalePow().exponent(0.5) \/\/ Power scale is representative of how humans perceive volume with distance\r\n    .domain([0, max_sound_dist])\r\n    .range([1, 0])\r\n    .clamp(true) \/\/ Anything beyond max_sound_dist is clamped to equal 0 volume\r\n\r\n  \/\/ Calculate the distance between two points [x1, y1] and [x2, y2]\r\n  function calcDistance(a, b) {\r\n    var dx = a[0] - b[0];\r\n    var dy = a[1] - b[1];\r\n    return Math.sqrt((dx * dx) + (dy * dy));\r\n  }\r\n\r\n  \/\/ Calculate distance to a circle and set the volume of the related sound\r\n  function handleHover() {\r\n    var coords = d3.mouse(this);\r\n\r\n    \/\/ Find the closest datapoint to the mouse\r\n    var closestWhaleIndex = d3.scan(whalesData, function(a, b) {\r\n      const aDist = calcDistance(coords, [xScale(a.x), yScale(a.y)]);\r\n      const bDist = calcDistance(coords, [xScale(b.x), yScale(b.y)]);\r\n      return aDist - bDist;\r\n    });\r\n\r\n    var closestWhale = whalesData[closestWhaleIndex];\r\n\r\n    d3.selectAll('#text')\r\n      .datum(closestWhale)\r\n      .text(function(d) {\r\n        return d.description\r\n      });\r\n\r\n    \/\/ Adjust the volume and text opacity by distance\r\n    whales.each(function(d) {\r\n      var circle = d3.select(this);\r\n      var sound = document.getElementById(d.sound);\r\n\r\n      \/\/ calculate distance\r\n      var dist = calcDistance(coords, [xScale(d.x), yScale(d.y)]);\r\n      var volume = soundScale(dist);\r\n\r\n      \/\/ update sound volume\r\n      sound.volume = volume;\r\n\r\n      circle.selectAll('text.description')\r\n        .text(d.title)\r\n        .style('opacity', volume);\r\n    });\r\n  }\r\n\r\n  \/\/ Create x and y scales. The width and height will change so the position of the whales need to account for this\r\n  var xScale = d3.scaleLinear()\r\n    .domain([0, 1000]) \/\/ assumes a whale x coords is bound to [0, 1000] domain\r\n    .range([0, width]);\r\n\r\n  var yScale = d3.scaleLinear()\r\n    .domain([0, 1000]) \/\/ assumes a whale y coords is bound to [0, 1000] domain\r\n    .range([0, height]);\r\n\r\n  \/\/ Container for circles with the whale data bound to them\r\n  var whales = svg.selectAll('g.whales')\r\n    .data(whalesData).enter()\r\n    .append('g')\r\n    .attr('class', 'whales');\r\n\r\n  \/\/ Add the bubble outline of the text to each container\r\n  whales.append(\"text\")\r\n    .attr('x', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('y', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr('text-anchor', 'right')\r\n    .attr('class', 'description white')\r\n    .attr('alignment-baseline', 'middle');\r\n\r\n  \/\/ Add circle text to each circle container\r\n  whales.append(\"text\")\r\n    .attr('x', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('y', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr(\"dy\", \"0em\")\r\n    .attr(\"dx\", \"1em\")\r\n    .attr('text-anchor', 'right')\r\n    .attr('class', 'description')\r\n    .attr('alignment-baseline', 'middle');\r\n\r\n  \/\/ Add the outer svg circle to each circle container\r\n  whales.append('circle')\r\n    .attr('r', 10)\r\n    .attr('cx', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('cy', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr('fill', '#ffffff');\r\n\r\n  \/\/ Add the inner svg circle to each circle container\r\n  whales.append('circle')\r\n    .attr('r', 8)\r\n    .attr('cx', function(d) {\r\n      return xScale(d.x)\r\n    })\r\n    .attr('cy', function(d) {\r\n      return yScale(d.y)\r\n    })\r\n    .attr('fill', '#ba7536');\r\n\r\n  \/\/ Append this rect with event listeners over other elements.\r\n  svg.append('rect')\r\n    .attr('fill', 'transparent')\r\n    .attr('width', width)\r\n    .attr('height', height)\r\n    .on(\"click\", toggleSound)\r\n    .on('mousemove', handleHover);\r\n};\r\n<\/script>\r\n","no_old_story_flag":""},"_links":{"self":[{"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/videos-visuals\/18039"}],"collection":[{"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/videos-visuals"}],"about":[{"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/types\/custom_visuals"}],"version-history":[{"count":12,"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/videos-visuals\/18039\/revisions"}],"predecessor-version":[{"id":33743,"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/videos-visuals\/18039\/revisions\/33743"}],"acf:post":[{"embeddable":true,"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/news\/17188"},{"embeddable":true,"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/videos-visuals\/18076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/media\/13206"}],"wp:attachment":[{"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/media?parent=18039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/categories?post=18039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hakaimagazine.com\/wp-json\/wp\/v2\/tags?post=18039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}