30:T595,# Ephemerisle Tides ${renderChart()} This chart depicts tides over a 24-hour period measured at ${renderLink( stationData.name, `https://tidesandcurrents.noaa.gov/stationhome.html?id=${selectedStationId}` )} ${renderLink("near", googleMapUrl(position))} the ${renderLink("Ephemerisle event", "https://goo.gl/maps/5g5CvfAb3Zh8LaDg7")} - This is a 24 hour clock with an hour hand showing the current time. - The blue area shows the high ${renderGlyph( "H", "tide-extreme" )} and low ${renderGlyph("L", "tide-extreme")} tides during the day. - The red shaded lobes pointing towards the center show an estimate of the speed of the current; the larger and redder the lobe, the faster the current. The current speed is an oversimplified extrapolation from high and low tides and may not be accurate. - The outside arcs show the sun ${renderGlyph( "☀️", "sun" )} and moon ${renderGlyph("🌙", "moon")} rise and set. - The **PREV** and **NEXT** buttons allow you to move forward and backward by one day at a time. The **TODAY** button will return to today. Though initially strange, there is a lot of information packed into the chart. Once you get a sense of the layout, you can quickly identify the tide times and estimates of current along with their relationships to the sun and moon. Data via ${renderLink( "NOAA", `https://tidesandcurrents.noaa.gov/noaatidepredictions.html?id=${selectedStationId}` )}.31:T979,renderStyle = () => html``32:T529,renderChart = () => { const svgElement = svg`

${text}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"renderRings = (page, rings) => {\n page.selectAll('.ring')\n .data(rings)\n .join('circle')\n .classed('ring', true)\n .attr('r', d => d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"renderFlow = (page, flowScale) => {\n const flowArea = d3.areaRadial()\n .innerRadius(flowScale(0))\n .outerRadius(d => flowScale(d.flow))\n .angle(d => degToRad(d.angle));\n \n page.append('path')\n .classed('flow', true)\n .classed('area', true)\n .attr('fill', 'url(#flowGradient)')\n .attr('stroke', 'none')\n .attr('d', flowArea(data));\n \n // page.append('text')\n // .classed('ring-text', true)\n // .attr('dy', '0.33em')\n // .append('textPath')\n // .attr('href', '#currentLabel')\n // .attr('startOffset', '50%')\n // .text('Current');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1490,"value":"renderTide = (page, tideScale) => {\n const tidelArea = d3.areaRadial()\n .innerRadius(tideScale.range()[0])\n .outerRadius(d => tideScale(d.tide))\n .angle(d => degToRad(d.angle));\n \n page\n .append('path')\n .classed('tide', true)\n .classed('area', true)\n .attr('d', tidelArea(data));\n \n // page.append('text')\n // .classed('ring-text', true)\n // .attr('dy', '0.33em')\n // .append('textPath')\n // .attr('href', '#tideLabel')\n // .attr('startOffset', '50%')\n // .text('Tide');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"renderCenterText = (page) => {\n const weekFormat = d3.timeFormat(\"%A\");\n const dateFormat = d3.timeFormat(\"%e %b %Y\");\n const timeFormat = d3.timeFormat(\"%H:%M:%S\");\n\n const rows = [\n weekFormat(date),\n dateFormat(date),\n ...(isToday() ? [timeFormat(currentTime)] : [])\n ];\n\n const dyScale = d3.scaleLinear([0, rows.length - 1], [-0.05, 0.05]);\n\n const centerText = page\n .append(\"g\")\n .classed(\"center-text\", true)\n .selectAll(\"text\")\n .data(rows)\n .join(\"text\")\n .attr(\"dy\", (d, i) => dyScale(i) + \"px\")\n .classed(\"dow\", true)\n .text((d) => d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2495,"value":"currentTime = {\n yield new Date();\n while (isToday()) {\n await Promises.delay(1000);\n yield new Date();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"stops = ({\n// inner: 0.8,\n// center: 0.5,\n// outer: 0.15,\n \n inner: 0.15,\n center: 0.5,\n outer: 0.8,\n moon: 0.85,\n sun: 0.9,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"colors = ({\n tide: d3.rgb(0, 134, 214),\n flow: d3.rgb(228, 0, 70),\n sun: d3.rgb('orange').brighter(0.7),\n moon: d3.rgb('#888'),\n _tide: '#00239CFF',\n _flow: '#E10600FF',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"mutable date = getToday()","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"planetary = {\n const moonPrev = suncalc.getMoonTimes(prevDay(date), position.lat, position.lng);\n const moon = suncalc.getMoonTimes(date , position.lat, position.lng);\n const moonNext = suncalc.getMoonTimes(nextDay(date), position.lat, position.lng);\n \n return {\n sun: suncalc.getTimes(date, position.lat, position.lng),\n\n moon: {\n swapArc: moon.rise > moon.set || !moon.rise || !moon.set,\n rise: moon.rise || moonPrev.rise,\n set: moon.set || moonNext.set,\n },\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"data = {\n const timeScale = d3.interpolateDate(date, nextDay(date));\n const step = 0.001;\n\n return d3\n .range(0, 1 + step, step)\n .map((d) => new Date(timeScale(d).getTime()))\n .map((time) => {\n const pair = tidePairs.find(\n ({ start, end }) => time >= start.time && time < end.time\n );\n\n return {\n time,\n angle: timeToAngle(time),\n pair,\n tide: pair.timeToTide(time),\n flow: pair.timeToFlow(time)\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"maxCurrents = {\n const maxes = [];\n \n d3.range(1, data.length - 2).forEach(i => {\n const [ d0, d1, d2 ] = data.slice(i - 1, i + 2);\n const df1 = d1.flow - d0.flow;\n const df2 = d2.flow - d1.flow;\n\n if (df1 <= 0 && df2 >= 0 || df1 >= 0 && df2 <= 0) {\n maxes.push(d1);\n }\n });\n \n return maxes.sort((a, b) => a.flow - b.flow).filter((d, i) => i < 4)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"tidePairs = {\n const result = [];\n tides.reduce((p, c) => {\n result.push([p, c]);\n return c;\n });\n\n return result.map(([start, end]) => {\n const [thetaRange, heightRange] =\n start.type === \"L\"\n ? [\n [Math.PI * 1, Math.PI * 2],\n [start.height, end.height]\n ]\n : [\n [Math.PI * 0, Math.PI * 1],\n [end.height, start.height]\n ];\n\n const timeToTheta = d3\n .scaleLinear()\n .domain([start.time.getTime(), end.time.getTime()])\n .range(thetaRange);\n\n const tideThetaScale = d3.scaleLinear().domain([-1, 1]).range(heightRange);\n\n const timeToTideRaw = (time) => tideThetaScale(Math.cos(timeToTheta(time)));\n const timeToFlowRaw = (time) =>\n -Math.abs(firstDerivative(timeToTideRaw, time));\n\n return {\n start,\n end,\n timeToTide: (time) => timeToTideRaw(time.getTime()),\n timeToFlow: (time) => timeToFlowRaw(time.getTime())\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"selectedTides = tides.filter(({ time }) => time >= date && time < nextDay(date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2801,"value":"//selectedStationId = BACON_ISLAND_NOAA_STATION_ID\n//selectedStationId = WARDS_ISLAND_NOAA_STATION_ID\nselectedStationId = PRISONERS_POINT_NOAA_STATION_ID","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"tides = getTideData(prevDay(date), nextDay(date), selectedStationId)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2805,"value":"stationData = getStationData(selectedStationId)","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1752,"value":"τ = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":2540,"value":"renderSampleJsonData = (data) =>\n html`

${JSON.stringify(data, null, 2)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"numericalDifferentiationH = 0.000126","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"chartSize = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"position = ({ lat: stationData.lat, lng: stationData.lng })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"MS_IN_A_DAY = 24 * MS_IN_A_HOUR","pinned":false,"hidden":false,"mode":"ojs"},{"id":1832,"value":"MS_IN_A_HOUR = 60 * 60 * 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":2760,"value":"BACON_ISLAND_NOAA_STATION_ID = \"9415027\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2764,"value":"PRISONERS_POINT_NOAA_STATION_ID = \"9415149\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2829,"value":"WARDS_ISLAND_NOAA_STATION_ID = \"9415105\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2863,"value":"parseTime = d3.timeParse(\"%Y-%m-%d %H:%M\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"getTideData = (start, end, stationId) => {\n const [sd, ed] = [start, end].map(formatDate);\n const url = `https://tidesandcurrents.noaa.gov/api/datagetter?${new URLSearchParams(\n {\n product: \"predictions\",\n begin_date: sd,\n end_date: ed,\n datum: \"MLLW\",\n station: stationId,\n time_zone: \"lst_ldt\",\n units: \"english\",\n interval: \"hilo\",\n format: \"json\",\n application: \"NOS.COOPS.TAC.TidePred\"\n }\n )}`;\n\n return (\n corsFetch(url, { mode: \"cors\" })\n .then((response) => response.json())\n // .then((tap) => {\n // console.log({ tap });\n // return tap;\n // })\n .then(({ predictions }) =>\n predictions.map(({ t, v, type }) => ({\n time: parseTime(t),\n //time: new Date(t),\n height: +v,\n type\n }))\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2836,"value":"googleMapUrl = ({ lat, lng, zoom = 15 }) =>\n `https://maps.google.com/maps/@${lat},${lng},${zoom}z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2778,"value":"getStationData = (stationId) => {\n const url = `https://api.tidesandcurrents.noaa.gov/mdapi/prod/webapi/stations/${stationId}.json?${new URLSearchParams(\n {\n expand: \"datums,disclaimers,notices,details,benchmarks\",\n units: \"english\"\n }\n )}`;\n\n return corsFetch(url, { mode: \"cors\" })\n .then((response) => response.json())\n .then(({ stations }) => stations[0]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1842,"value":"computeRadial = (degrees, radius) => ([\n Math.cos(degToRad(degrees + 270)) * radius,\n Math.sin(degToRad(degrees + 270)) * radius,\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2334,"value":"pointsToPath = ponts => ponts.reduce((path, point, i) => `${path}${i === 0 ? 'M' : 'L'} ${point} `, '') + 'z'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1914,"value":"getToday = () => {\n const now = new Date();\n return new Date(1900 + now.getYear(), now.getMonth(), now.getDate());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2316,"value":"isToday = () => getToday().getTime() === date.getTime()","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"firstDerivative = (f, x, h = numericalDifferentiationH) => (f(x + h) - f(x - h)) / (2 * h)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2584,"value":"corsFetch = (url, options = {}) => fetch(`https://corsproxy.io?${encodeURIComponent(url)}`, options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"secondDerivative = (f, x, h = numericalDifferentiationH) => {\n return (f(x + h) - 2 * f(x) + f(x - h)) / (h * h);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"timeToAngle = time => {\n const DEGREES_IN_A_HOUR = 360 / 24;\n const DEGREES_IN_A_MINUTE = DEGREES_IN_A_HOUR / 60;\n const DEGREES_IN_A_SECOND = DEGREES_IN_A_MINUTE / 60;\n \n return time.getHours() * DEGREES_IN_A_HOUR\n + time.getMinutes() * DEGREES_IN_A_MINUTE\n + time.getSeconds() * DEGREES_IN_A_SECOND;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"timeToTheta = time => degToRad(timeToAngle(time))","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"degToRad = d3.scaleLinear().domain([0, 360]).range([0, 2 * Math.PI])","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"formatDate = d3.timeFormat('%Y%m%d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"nextDay = date => deltaDate(date, 24)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"prevDay = date => deltaDate(date, -24)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"deltaDate = (date, hours) => new Date(date.getTime() + (hours * MS_IN_A_HOUR))","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"function log(valueContainer = {}) {\n const values = (typeof valueContainer !== 'object')\n ? Array.from(arguments).map(d => [d, null])\n : Object.entries(valueContainer); //.map(([ key, value ]) => `${key} = ${value}`);\n values.map(([ key, value]) => console.log('L:', key, (value ? '=' : ''), (value || '')));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")\n//d3 = require('d3-scale', 'd3-shape', 'd3-color', 'd3-time-format', 'd3-interpolate', 'd3-array', 'd3-selection')","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"suncalc = require('suncalc2@1.8.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2968,"value":"import { hostedOnThumbtools, isMobile } from \"@trebor/thumbtools\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}