2f:T21c4,chart = { // const width = 800; const height = 480; const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .property("value", []) .on("mousemove touchmove", moved) .attr("pointer-events", "none"); const margin1 = { top: 20, right: 20, bottom: 110, left: 40 }; const margin2 = { top: 410, right: 20, bottom: 30, left: 40 }; const chart_width = width - margin1.left - margin1.right; const chart_height = height - margin1.top - margin1.bottom; const context_height = height - margin2.top - margin2.bottom; const rule = svg .append("g") .append("line") .attr("y1", chart_height) .attr("y2", 0) .attr("stroke", "red"); // const x = d3.scaleTime().range([0, chart_width]); // const x2 = d3.scaleTime().range([0, chart_width]); const x = d3.scaleTime().range([0, chart_width]); const x2 = d3.scaleTime().range([0, chart_width]); const y = d3.scaleLinear().range([chart_height, 0]); const yRight = d3.scaleLinear().range([height, 0]); const y2 = d3.scaleLinear().range([context_height, 0]); const xAxis = d3.axisBottom(x); const xAxis2 = d3.axisBottom(x2); const yAxis = g => g .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("m sea elevation") ); const today = new Date(); const startExt = new Date(); const endExt = new Date(); startExt.setDate(today.getDate() - 1); endExt.setDate(today.getDate() + 1); // const hover_line = svg.append("line") // .attr("stroke", "red") // .attr("y1", y(0)) // .attr("y2", y.range()[1]); const brush = d3 .brushX() .extent([[0, 0], [chart_width, context_height]]) .on("brush end", brushed); const zoom = d3 .zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [chart_width, chart_height]]) .extent([[0, 0], [chart_width, chart_height]]) .on("zoom", zoomed); // .on("zoom", update); const line = d3 .line() .x(function(d) { // console.log(x(d.date)); return x(d.date); }) .y(function(d) { return y(d.sea_surface_elevation); }); const area = d3 .area() .x(d => x(d.date)) .y0(y(0)) .y1(d => y(d.day)); const line2 = d3 .line() .x(function(d) { return x2(d.date); }) .y(function(d) { return y2(d.sea_surface_elevation); }); svg .append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chart_width) .attr("height", chart_height); const focus = svg .append("g") .attr("class", "focus") .attr("transform", `translate(${margin1.left},${margin1.top})`); const context = svg .append("g") .attr("class", "context") .attr("transform", `translate(${margin2.left},${margin2.top})`); svg .append("rect") .attr("class", "zoom") .attr("width", chart_width) .attr("height", chart_height) .attr("cursor", "move") .attr("fill", "none") .attr("pointer-events", "all") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")") .call(zoom); // const dateExtent = d3.extent(tideFormated, function(d) { // return d.date; // }); // console.log( // d3.extent(tideFormated, function(d) { // return d.date; // }) // ); x.domain( d3.extent(tideFormated, function(d) { return d.date; }) ); y.domain([ 0, d3.max(tideFormated, function(d) { return d.sea_surface_elevation; }) ]); x2.domain(x.domain()); y2.domain(y.domain()); focus .append("path") .datum(tideFormated) .attr("class", "area") .attr("d", area) .attr("fill", "rgba(0,0,255,0.3)") // .attr("fill-opacity", 0.2) // .attr("clip-path", "url(#clip)") .style("stroke", "none") .style("stroke-width", "1.5px"); focus .append("path") .datum(tideFormated) .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("clip-path", "url(#clip)") .style("stroke", "steelblue") .style("stroke-width", "1.5px"); context .append("path") .datum(tideFormated) .attr("class", "line2") .attr("d", line2) .attr("fill", "none") .style("stroke", "steelblue") .style("stroke-width", "1.5px"); focus .append("g") .attr("class", "axis axis--x1") .attr("transform", "translate(0," + chart_height + ")") .call(xAxis); focus .append("g") .attr("class", "axis axis--y") .call(yAxis); const parseTime = d3.timeParse("%I:%M%p"); const labels = focus .selectAll(".labs") .data(tideFormated) .enter() .append("text") .style("fill", "#2F2F5E") .text(d => { // console.log(d); if (d.hl === 1) { console.log("1?", d); return d.sea_surface_elevation; } }) .attr("class", "labs") .attr("x", d => x(d.date)) .attr("y", d => y(d.sea_surface_elevation)) .append("tspan") .attr("dy", "1em") .attr("dx", "-1em") .style("fill", "#2F2F5E") .text(d => { if (d.hl === 1) { console.log( d.date, d.date.toLocaleString(undefined, { hour: "numeric", minute: "numeric" }) ); return d.date.toLocaleString(undefined, { hour: "numeric", minute: "numeric" }); } }); const nodes = focus .selectAll("circle") .data(tideFormated.filter(d => d.hl === 1)) .enter() .append("circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.sea_surface_elevation)) .attr("r", 3) .attr("fill", "none") .attr("stroke", "steelblue"); context .append("g") .attr("class", "axis axis--x1") .attr("transform", "translate(0," + context_height + ")") .call(xAxis2); // console.log(this); // if (!this) { // console.log(x.range()); context .append("g") .attr("class", "brush") .call(brush) .call(brush.move, x.range()); // } else { // let range = d3 // .select(this) // .property("value") // .map(x); // context // .append("g") // .attr("class", "brush") // .call(brush) // .call(brush.move, range); // } function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom let s = d3.event.selection || x2.range(); // console.log(s); x.domain(s.map(x2.invert), x2); focus.selectAll(".area").attr("d", area); focus.select(".line").attr("d", line); focus.select(".axis--x1").call(xAxis); // labels.attr( // "transform", // d => "translate(" + x(d.date) + "," + y(d.sea_surface_elevation) + ")" // ); d3.selectAll(".labs") .attr("x", d => x(d.date)) .attr("y", d => y(d.sea_surface_elevation)); svg .select(".zoom") .call( zoom.transform, d3.zoomIdentity.scale(chart_width / (s[1] - s[0])).translate(-s[0], 0) ); update(); } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush let value = []; let t = d3.event.transform; x.domain(t.rescaleX(x2).domain()); value = x.domain(); svg.property("value", value).dispatch("input"); focus.selectAll(".area").attr("d", area); focus.select(".line").attr("d", line); nodes .attr("cx", d => x(d.date)) .attr("cy", d => y(d.sea_surface_elevation)); d3.selectAll(".labs") .attr("x", d => x(d.date)) .attr("y", d => y(d.sea_surface_elevation)); // labels.attr( // "transform", // d => "translate(" + x(d.date) + "," + y(d.sea_surface_elevation) + ")" // ); // focus // .select(".currDate") // .attr("transform", `translate(${x(new Date())},${margin1.top})`); focus.select(".axis--x1").call(xAxis); context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); update(); } function update(date) { date = new Date(); rule.attr( "transform", `translate(${x(date) + margin1.left},${margin1.top})` ); svg.property("value", new Date()).dispatch("input"); } function moved() { update(); // d3.event.preventDefault(); } d3.timeout(_ => { d3.selectAll(".brush").call(brush.move, [x(startExt), x(endExt)]); update(); }, 1); return svg.node(); }30:T1b87,chart2 = function(vars) { const n = vars.length; const width = 960; const height = 600; const colour = d3.scaleOrdinal(d3.schemeCategory10); // let focusList = [], // xList = []; const margin2 = { top: 520, right: 20, bottom: 30, left: 40 }; //context box //Calculate margins to use const h_each_plot = (height - 20 - 100) / n; const bh_top_chart = h_each_plot * (n - 1) + 100; const margin1 = { top: 20, right: 20, bottom: bh_top_chart, left: 40 }; //adjust bottom const chart_width = width - margin1.left - margin1.right; const chart_height = height - margin1.top - margin1.bottom; const context_height = height - margin2.top - margin2.bottom; let margin_others; const zoom = d3 .zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [chart_width, chart_height]]) .extent([[0, 0], [chart_width, chart_height]]) .on("zoom", zoomed); const svg = d3 .select(DOM.svg(width, height)) .property("value", []) // was [] instad of vars // .on("mousemove touchmove", moved) .attr("pointer-events", "none") .call(zoom); // const yAxisRight = g => // g // .call(d3.axisRight(y)) // .call(g => g.select(".domain").remove()) // .call(g => // g // .select(".tick:last-of-type text") // .clone() // .attr("x", 3) // .attr("text-anchor", "start") // .attr("font-weight", "bold") // .text("Kilowatts") // ); const today = new Date(); const startExt = new Date(); const endExt = new Date(); startExt.setDate(today.getDate() - 1); endExt.setDate(today.getDate() + 1); const brush = d3 .brushX() .extent([[0, 0], [chart_width, context_height]]) .on("brush end", brushed); //CREATE A CHART (FOCUS) FOR EACH VARIABLE. let myVariables = {}; let myLines = {}; let myYs = {}; let myXs = {}; // let focus0; const x = d3.scaleTime().range([0, chart_width]); const x2 = d3.scaleTime().range([0, chart_width]); const y2 = d3.scaleLinear().range([context_height, 0]); const xAxis = d3.axisBottom(x).tickFormat(""); const xAxisLast = d3.axisBottom(x); const xAxis2 = d3.axisBottom(x2); vars.forEach((vari, i) => { let yside = "y" + i; myYs[yside]; myYs[yside] = d3.scaleLinear().range([chart_height, 0]); const yAxis = g => g .call(d3.axisLeft(myYs["y" + i])) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(vars[i]) ); // for each plot the top margin moves down height of previous chart(s) margin_others = { top: h_each_plot * i + 20, right: 20, left: 40 }; //adjust top var lineName = "line" + i; myLines[lineName] = d3 .line() .x(function(d) { // console.log(x(d3.isoParse(d.measurementTime))); return x(d3.isoParse(d.measurementTime)); }) .y(function(d) { return myYs["y" + i](d[vari]); }); let variableName = "focus" + i; // myVariables[variableName] = 42; myVariables[variableName] = svg .append("g") .attr("class", "focus" + i) .attr( "transform", `translate(${margin_others.left},${margin_others.top})` ); x.domain( d3.extent(snData, function(d) { return d3.isoParse(d.measurementTime); }) ); myYs["y" + i].domain([ 0, d3.max(snData, function(d) { return d[vari]; }) ]); y2.domain(myYs["y" + i].domain()); myVariables[variableName] .append("path") .datum(snData) .attr("class", "line" + i) .attr("d", myLines["line" + i]) .attr("fill", "none") .attr("clip-path", "url(#clip)") .style("stroke", colour(i)) .style("stroke-width", "1.5px"); // hide ticks for most plots i === vars.length - 1 ? myVariables[variableName] .append("g") .attr("class", "axis axis--xLast") .attr("transform", "translate(0," + chart_height + ")") .call(xAxisLast) : myVariables[variableName] .append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + chart_height + ")") .call(xAxis); myVariables[variableName] .append("g") .attr("class", "axis axis--y") .call(yAxis); svg .append("rect") .attr("class", "zoom" + i) .attr("id", "zoom" + i) .attr("width", chart_width) .attr("height", chart_height) .attr("cursor", "move") .attr("fill", "none") .attr("pointer-events", "all") .attr( "transform", "translate(" + margin_others.left + "," + margin_others.top + ")" ); }); x2.domain(x.domain()); svg .append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chart_width) .attr("height", chart_height); // context line const line2 = d3 .line() .x(function(d) { return x(d3.isoParse(d.measurementTime)); }) .y(function(d) { return y2(d[vars.slice(-1)[0]]); }); const context = svg .append("g") .attr("class", "context") .attr("transform", `translate(${margin2.left},${margin2.top})`); context .append("path") .datum(snData) .attr("class", "line2") .attr("d", line2) .attr("fill", "none") .style("stroke", "steelblue") .style("stroke-width", "1.5px"); context .append("g") .attr("class", "axis axis--x2") .attr("transform", "translate(0," + context_height + ")") .call(xAxis2); context .append("g") .attr("class", "brush") .call(brush) .call(brush.move, x.range()); function brushed() { // console.log(this); if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom let s = d3.event.selection || x2.range(); x.domain(s.map(x2.invert), x2); // update each plot svg.call( zoom.transform, d3.zoomIdentity.scale(chart_width / (s[1] - s[0])).translate(-s[0], 0) ); // update(); } function zoomed() { vars.forEach((d, i) => { d3.select(".focus" + i) .select(".line" + i) .attr("d", myLines["line" + i]); console.log(i, vars.length); i === vars.length - 1 ? d3.selectAll(".axis--xLast").call(xAxisLast) : d3.selectAll(".axis--x").call(xAxis); }); if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush let value = []; let t = d3.event.transform; x.domain(t.rescaleX(x2).domain()); value = x.domain(); svg.property("value", value).dispatch("input"); // d3.selectAll(".axis--x").call(xAxis); context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); // update(); } return svg.node(); }31:Tb6b,function windDirchart(index, indb = undefined) { // console.log(indb); const height = 120; const margin = { top: 20, right: 30, bottom: 30, left: 40 }; const x = d3 .scaleTime() .domain(d3.extent(buoyData, (d) => d.date)) .range([margin.left, width - margin.right]); let y; if (indb) { y = d3 .scaleLinear() .domain([0, d3.max(buoyData, (d) => d[indb])]) .nice() .range([height - margin.bottom, margin.top]); } else { y = d3 .scaleLinear() .domain([0, d3.max(buoyData, (d) => d[index])]) .nice() .range([height - margin.bottom, margin.top]); } const svg = d3.select(DOM.svg(width, height)).style("width", "100%"); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(d3.axisLeft(y).ticks(4)) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("kts") ); if (indb) { svg .append("path") .datum(buoyData) .attr("fill", "none") .attr("stroke", "#e31a1c") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d[indb])) ); } svg .append("path") .datum(buoyData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .x((d) => x(d.date)) .y((d) => y(d[index])) ); // if (index === "WDIR") { // console.log(buoyData); // } svg .selectAll("circle") .data(buoyData) .enter() .append("path") .attr("d", "M-5,0 L-15,15 L15,0 L-15,-15 Z") .attr("class", "arrowHead") .attr("fill", "grey") .attr("transform", function (d, i) { // console.log("d", d[index]); // console.log(getAngle(d[index])); return ( "translate(" + x(d.date) + "," + y(d[index]) + ") rotate(" + getAngle(d["WDIR"]) + ") scale(0.5)" ); }); svg .append("g") .selectAll("text") .data(buoyData) .enter() .append("text") .text( (d, i) => getText(d["WDIR"]) // return d[index]; ) .attr("x", (d) => x(d.date)) .attr("y", (d) => y(d[index])) .attr("font-family", "sans-serif") .attr("font-size", "16px") .attr("fill", "green"); // .append("circle") // .attr("cx", d => x(d.date)) // .attr("cy", d => y(d[index])) // .attr("r", d => 2); // } return svg.node(); }32:T10cb,function WaveModelChart(index, indb = undefined) { let smallData = waveCombined .filter(d => d.variable === index || d[indb]) .map(d => { if (d.value === undefined) { d.value = null; } if (d[indb] === undefined) { d[indb] = null; } if (d.erp === undefined) { d.erp = null; d.ern = null; } let rObj = {}; (rObj[index] = d.value), (rObj[indb] = d[indb]), (rObj.date = d.date), (rObj.erp = d.erp), (rObj.ern = d.ern); return rObj; }); const height = 120; const margin = { top: 5, right: 30, bottom: 20, left: 40 }; const x = d3 .scaleTime() .domain(d3.extent(smallData, d => d.date)) .range([margin.left, width - margin.right]); let y; // console.log(d3.max(smallData, d => d[index])); if (indb) { const upperY = Math.max( d3.max(smallData, d => d[index]), d3.max(smallData, d => d[indb]) ); y = d3 .scaleLinear() .domain([0, upperY]) .nice() .range([height - margin.bottom, margin.top]); } else if (index == "PRES") { y = d3 .scaleLinear() .domain(d3.extent(smallData, d => d[index])) .nice() .range([height - margin.bottom, margin.top]); } else { // console.log(d3.max(smallData, d => d[index]), index); y = d3 .scaleLinear() .domain([0, d3.max(smallData, d => d[index])]) .nice() .range([height - margin.bottom, margin.top]); } const svg = d3.select(DOM.svg(width, height)).style("width", "100%"); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); // console.log("here"); const windlookup = { WVHT: "m Wave Height", DPD: "s Wave Period", WTMP: "°C", PRES: "hPa" }; svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(d3.axisLeft(y).ticks(4)) .attr("class", "y-axis"); // .call(g => // g // .select(".tick:last-of-type text") // .clone() // .attr("x", 3) // .attr("text-anchor", "start") // .attr("font-weight", "bold") // .text(windlookup[index]) // ); if (indb) { svg .append("path") .datum(smallData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .defined(function(d) { return d[indb] != null; }) .x(d => x(d.date)) .y(d => y(d[indb])) ); } // Show confidence interval if (index === "HTSGW_SFC_0") { svg .append("path") .datum(smallData) .attr("fill", "#fb9a99") .attr("stroke", "none") .attr( "d", d3 .area() .defined(function(d) { return d.erp != null; }) .x(function(d) { return x(d.date); }) .y0(function(d) { return y(d.erp); }) .y1(function(d) { return y(d.ern); }) ); } svg .append("path") .datum(smallData) .attr("fill", "none") .attr("stroke", "#e31a1c") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .defined(function(d) { return d[index] != null; }) .x(d => x(d.date)) .y(d => { return y(d[index]); }) ); // if (index === "WDIR") { // svg // .append("g") // .selectAll("text") // .data(buoyData) // .enter() // .append("text") // .text((d, i) => (i % 2 === 0 ? getText(d[index]) : "")) // .attr("x", d => x(d.date)) // .attr("y", d => y(d[index])) // .attr("font-family", "sans-serif") // .attr("font-size", "12px") // .attr("fill", "black"); // } // svg // .selectAll("circle") // .data(buoyData) // .enter() // .append("circle") // .attr("cx", d => x(d.date)) // .attr("cy", d => y(d[index])) // .attr("r", d => 2); // } return svg.node(); }33:Tb2e,function makechart(index, indb = undefined) { // console.log(indb); const height = 120; const margin = { top: 5, right: 30, bottom: 20, left: 40 }; const x = d3 .scaleTime() .domain(d3.extent(buoyData, d => d.date)) .range([margin.left, width - margin.right]); let y; if (indb) { y = d3 .scaleLinear() .domain([0, d3.max(buoyData, d => d[indb])]) .nice() .range([height - margin.bottom, margin.top]); } else if (index == "PRES") { y = d3 .scaleLinear() .domain(d3.extent(buoyData, d => d[index])) .nice() .range([height - margin.bottom, margin.top]); } else { y = d3 .scaleLinear() .domain([0, d3.max(buoyData, d => d[index])]) .nice() .range([height - margin.bottom, margin.top]); } const svg = d3.select(DOM.svg(width, height)).style("width", "100%");; svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); // console.log("here"); const windlookup = { WVHT: "m Wave Height", DPD: "s Wave Period", WTMP: "°C", PRES: "hPa" }; svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(d3.axisLeft(y).ticks(4)) .attr("class", "y-axis") .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(windlookup[index]) ); if (indb) { svg .append("path") .datum(buoyData) .attr("fill", "none") .attr("stroke", "#e31a1c") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .x(d => x(d.date)) .y(d => y(d[indb])) ); } svg .append("path") .datum(buoyData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr( "d", d3 .line() .x(d => x(d.date)) .y(d => y(d[index])) ); // if (index === "WDIR") { // svg // .append("g") // .selectAll("text") // .data(buoyData) // .enter() // .append("text") // .text((d, i) => (i % 2 === 0 ? getText(d[index]) : "")) // .attr("x", d => x(d.date)) // .attr("y", d => y(d[index])) // .attr("font-family", "sans-serif") // .attr("font-size", "12px") // .attr("fill", "black"); // } // svg // .selectAll("circle") // .data(buoyData) // .enter() // .append("circle") // .attr("cx", d => x(d.date)) // .attr("cy", d => y(d[index])) // .attr("r", d => 2); // } return svg.node(); }34:T164d,marineForcast = fetch(url) .then(response => response.text()) .then(str => { let responseNu = new DOMParser().parseFromString(str, "application/xml"); let site = xmlToJson(responseNu); console.log(site.marineData) let marine; if (dd === "Quadra") { marine = { date: site.marineData.regularForecast.dateTime[1].textSummary["#text"], location: site.marineData.regularForecast.location[0]["@attributes"].name, period: site.marineData.regularForecast.location[0].weatherCondition .periodOfCoverage["#text"], wind: site.marineData.regularForecast.location[0].weatherCondition.wind[ "#text" ], extended: { "1": site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[0]["@attributes"].name + ": " + site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[0]["#text"], "2": site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[1]["@attributes"].name + ": " + site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[1]["#text"], "3": site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[2]["@attributes"].name + ": " + site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[2]["#text"] } }; if ( Object.keys( site.marineData.regularForecast.location[0].weatherCondition .weatherVisibility ).length !== 0 ) { marine.weatherVis = site.marineData.regularForecast.location[0].weatherCondition.weatherVisibility[ "#text" ]; } else { marine.weatherVis = ""; } // add warning if there is one if (Object.entries(site.marineData.warnings).length !== 0) { if ( Object.entries(site.marineData.warnings).length !== 0 && site.marineData.warnings.location[0] ) { marine.warning = { type: site.marineData.warnings.location[0]["event"]["@attributes"].type, name: site.marineData.warnings.location[0]["event"]["@attributes"].name, status: site.marineData.warnings.location[0]["event"]["@attributes"] .status, issued: site.marineData.warnings.location[0].event.dateTime[1].textSummary }; } else { marine.warning = { type: site.marineData.warnings.location["event"]["@attributes"].type, name: site.marineData.warnings.location["event"]["@attributes"].name, status: site.marineData.warnings.location["event"]["@attributes"].status, issued: site.marineData.warnings.location.event.dateTime[1].textSummary }; // marine.warning = {}; // marine.warning.name = ""; // marine.warning.status = ""; } } else { marine.warning = {}; marine.warning.name = ""; marine.warning.status = ""; } } else { // Calvert xml is different :) console.log(site.marineData.regularForecast); marine = { date: site.marineData.regularForecast.dateTime[1].textSummary["#text"], location: site.marineData.area["#text"], period: site.marineData.regularForecast.location.weatherCondition .periodOfCoverage["#text"], wind: site.marineData.regularForecast.location.weatherCondition.wind[ "#text" ], extended: { "1": site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[0]["@attributes"].name + ": " + site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[0]["#text"], "2": site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[1]["@attributes"].name + ": " + site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[1]["#text"], "3": site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[2]["@attributes"].name + ": " + site.marineData.extendedForecast.location.weatherCondition .forecastPeriod[2]["#text"] } }; if ( Object.keys( site.marineData.regularForecast.location.weatherCondition .weatherVisibility ).length !== 0 ) { marine.weatherVis = site.marineData.regularForecast.location.weatherCondition.weatherVisibility[ "#text" ]; } else { marine.weatherVis = ""; } // add warning if there is one if (Object.keys(site.marineData.warnings).length !== 0) { marine.warning = { type: site.marineData.warnings.location["event"]["@attributes"].type, name: site.marineData.warnings.location["event"]["@attributes"].name, status: site.marineData.warnings.location["event"]["@attributes"].status, issued: site.marineData.warnings.location.event.dateTime[1].textSummary }; } else { marine.warning = {}; marine.warning.name = ""; marine.warning.status = ""; } } return marine; })35:T436,//needed for weather charts html` `36:T1c85,datab = [ { "#YY": "#yr", MM: "mo", DD: "dy", hh: "hr", mm: "mn", WDIR: "degT", WSPD: "m/s", GST: "m/s", WVHT: "m", DPD: "sec", APD: "sec", MWD: "degT", PRES: "hPa", ATMP: "degC", WTMP: "degC", DEWP: "degC", VIS: "nmi", PTDY: "hPa", TIDE: "ft" }, { "#YY": 2019, MM: 6, DD: 26, hh: 17, mm: 0, WDIR: 290, WSPD: 3, GST: 4, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1013.8, ATMP: 14.5, WTMP: 17, DEWP: "MM", VIS: "MM", PTDY: 0.7, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 16, mm: 0, WDIR: 240, WSPD: 2, GST: 3, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1013.9, ATMP: 14.4, WTMP: 17, DEWP: "MM", VIS: "MM", PTDY: 1.1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 15, mm: 0, WDIR: 240, WSPD: 1, GST: 2, WVHT: 0.1, DPD: 3, APD: "MM", MWD: "MM", PRES: 1013.5, ATMP: 14.7, WTMP: 17, DEWP: "MM", VIS: "MM", PTDY: 1.5, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 14, mm: 0, WDIR: 290, WSPD: 2, GST: 3, WVHT: 0.1, DPD: 3, APD: "MM", MWD: "MM", PRES: 1013.1, ATMP: 15.1, WTMP: 17, DEWP: "MM", VIS: "MM", PTDY: 1.3, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 13, mm: 0, WDIR: 320, WSPD: 4, GST: 4, WVHT: 0.2, DPD: 3, APD: "MM", MWD: "MM", PRES: 1012.8, ATMP: 15.4, WTMP: 17, DEWP: "MM", VIS: "MM", PTDY: 0.9, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 12, mm: 0, WDIR: 320, WSPD: 5, GST: 6, WVHT: 0.2, DPD: 3, APD: "MM", MWD: "MM", PRES: 1012, ATMP: 15.2, WTMP: 17.1, DEWP: "MM", VIS: "MM", PTDY: 0.3, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 11, mm: 0, WDIR: 320, WSPD: 6, GST: 7, WVHT: 0.3, DPD: 2, APD: "MM", MWD: "MM", PRES: 1011.8, ATMP: 15.4, WTMP: 17.3, DEWP: "MM", VIS: "MM", PTDY: 0.1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 10, mm: 0, WDIR: 320, WSPD: 5, GST: 6, WVHT: 0.3, DPD: 2, APD: "MM", MWD: "MM", PRES: 1011.9, ATMP: 15.5, WTMP: 17.5, DEWP: "MM", VIS: "MM", PTDY: 0.7, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 9, mm: 0, WDIR: 320, WSPD: 6, GST: 7, WVHT: 0.3, DPD: 2, APD: "MM", MWD: "MM", PRES: 1011.7, ATMP: 16.1, WTMP: 17.8, DEWP: "MM", VIS: "MM", PTDY: 1.1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 8, mm: 0, WDIR: 0, WSPD: 4, GST: 4, WVHT: 0.3, DPD: 2, APD: "MM", MWD: "MM", PRES: 1011.7, ATMP: 17.9, WTMP: 18.1, DEWP: "MM", VIS: "MM", PTDY: 1.7, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 7, mm: 0, WDIR: 90, WSPD: 6, GST: 8, WVHT: 0.1, DPD: 6, APD: "MM", MWD: "MM", PRES: 1011.2, ATMP: 18.2, WTMP: 18.4, DEWP: "MM", VIS: "MM", PTDY: 1.6, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 6, mm: 0, WDIR: 110, WSPD: 4, GST: 4, WVHT: 0.1, DPD: 6, APD: "MM", MWD: "MM", PRES: 1010.6, ATMP: 18.4, WTMP: 18.7, DEWP: "MM", VIS: "MM", PTDY: 1.1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 5, mm: 0, WDIR: 140, WSPD: 4, GST: 5, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1010, ATMP: 18.3, WTMP: 18.6, DEWP: "MM", VIS: "MM", PTDY: 0.8, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 4, mm: 0, WDIR: 140, WSPD: 3, GST: 3, WVHT: 0.1, DPD: 4, APD: "MM", MWD: "MM", PRES: 1009.6, ATMP: 18.4, WTMP: 18.5, DEWP: "MM", VIS: "MM", PTDY: 0.2, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 3, mm: 0, WDIR: 140, WSPD: 2, GST: 2, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1009.5, ATMP: 18.7, WTMP: 18.5, DEWP: "MM", VIS: "MM", PTDY: -0.1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 2, mm: 0, WDIR: 130, WSPD: 2, GST: 2, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1009.2, ATMP: 19.1, WTMP: 18.6, DEWP: "MM", VIS: "MM", PTDY: -1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 1, mm: 0, WDIR: 140, WSPD: 2, GST: 3, WVHT: 0.1, DPD: 4, APD: "MM", MWD: "MM", PRES: 1009.4, ATMP: 18.7, WTMP: 18.7, DEWP: "MM", VIS: "MM", PTDY: -1.2, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 26, hh: 0, mm: 0, WDIR: 110, WSPD: 2, GST: 3, WVHT: 0.1, DPD: 3, APD: "MM", MWD: "MM", PRES: 1009.6, ATMP: 19, WTMP: 18.6, DEWP: "MM", VIS: "MM", PTDY: -1.5, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 25, hh: 23, mm: 0, WDIR: 120, WSPD: 3, GST: 3, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1010.2, ATMP: 18.1, WTMP: 18.4, DEWP: "MM", VIS: "MM", PTDY: -1.3, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 25, hh: 22, mm: 0, WDIR: 130, WSPD: 3, GST: 4, WVHT: 0.1, DPD: 3, APD: "MM", MWD: "MM", PRES: 1010.6, ATMP: 17.7, WTMP: 18.6, DEWP: "MM", VIS: "MM", PTDY: -1.4, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 25, hh: 21, mm: 0, WDIR: 110, WSPD: 2, GST: 2, WVHT: 0.1, DPD: 4, APD: "MM", MWD: "MM", PRES: 1011.1, ATMP: 17.4, WTMP: 18.4, DEWP: "MM", VIS: "MM", PTDY: -1.1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 25, hh: 20, mm: 0, WDIR: 120, WSPD: 2, GST: 2, WVHT: 0.1, DPD: 3, APD: "MM", MWD: "MM", PRES: 1011.5, ATMP: 16.8, WTMP: 17.3, DEWP: "MM", VIS: "MM", PTDY: -1, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 25, hh: 19, mm: 0, WDIR: 140, WSPD: 1, GST: 1, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1012, ATMP: 16.3, WTMP: 16.9, DEWP: "MM", VIS: "MM", PTDY: -0.7, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 25, hh: 18, mm: 0, WDIR: 290, WSPD: 1, GST: 1, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1012.2, ATMP: 15.4, WTMP: 16.4, DEWP: "MM", VIS: "MM", PTDY: -0.7, TIDE: "MM" }, { "#YY": 2019, MM: 6, DD: 25, hh: 17, mm: 0, WDIR: 300, WSPD: 2, GST: 2, WVHT: 0.1, DPD: 2, APD: "MM", MWD: "MM", PRES: 1012.5, ATMP: 14.5, WTMP: 16, DEWP: "MM", VIS: "MM", PTDY: -0.6, TIDE: "MM" } ]37:T6cd,md`## notes - Hourly tide data http://tides.gc.ca/eng/station?type=0&date=2019%2F06%2F20&sid=8045&tz=PST&pres=2 - add voronio for user selected plot labels - double y https://bl.ocks.org/sajudson/a0713fb9826aea45f15b207dfec9bcb4/e7f08e0d4b86deb69cf3923fd640fa115a0db7be - add sn data. Show multiple plots that brush together. have main plot be a function and add variables as parameters https://jsfiddle.net/t4x2p2qj/80/ https://jsfiddle.net/t4x2p2qj/80/ https://stackoverflow.com/questions/36614785/d3-js-context-focus-zoom-on-multiple-graphs https://observablehq.com/@sfu-iat355/interaction-2 - Johnstone Strait https://weather.gc.ca/marine/weatherConditions-currentConditions_e.html?mapID=02&siteID=06800&stationID=46131 - modelled (Promod downloads this) https://spotwx.com/products/grib_index.php?model=gdwps_global&lat=51.35112&lon=-129.07228&tz=-8 - Chris's website http://10.10.1.10/index.php?l=Calvert#~~ - Quadra - buoy - weather station - Calvert - lookout - Pruth dock - KC buoy - Buxton - Hecate - A bunch of tide tables are online and used by Quadra group here http://www.tides.gc.ca/eng/data/table/2019/curr_ref/5000. talk to Gulian and find out what they need them for. Promod's data - add masured tida to chart - Current maps https://goose.hakai.org/opm/ - wave predicitons /home/pramod/gdwps_predictions.dat - weatehr /home/pramod/hrdps_predictions.dat WVHGT_SFC_0 - wave period (s) discriptions https://weather.gc.ca/grib/grib2_GDWPS_e.html https://weather.gc.ca/grib/HRDPS_HR/HRDPS_nat_ps2p5km_P000_deterministic_e.html - add error bars to model https://www.d3-graph-gallery.com/graph/line_confidence_interval.html - add legend Vega lite exampels - https://observablehq.com/@manzt/flu-mcv `38:[] 2d:{"title":"Responsive Version","cells":[{"id":3785,"value":"md`# Responsive Version`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2267,"value":"experimental = {\n const msgEl = md`Log in to the portal and refresh this page to load data.`;\n msgEl.style.background = \"rgba(255, 200, 200, 0.5\";\n msgEl.style.padding = \"1em\";\n return msgEl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"title = md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1715,"value":"viewof dd = select([\"Calvert\", \"Quadra\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2179,"value":"viewof camview = radio({\n description: \"select a webcam\",\n options: second_level_options,\n value: cval\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3750,"value":"sitePics = md`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"warning = md`\n

${marineForcast.warning.name.toUpperCase()} ${marineForcast.warning.status.toUpperCase()}

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3783,"value":"weather = md`\n

Marine Forecast

${marineForcast.location}, ${marineForcast.period}

Issued at: ${marineForcast.date}

${marineForcast.wind}\n

${marineForcast.weatherVis}

\n\n

Extended Forecast

\n${marineForcast.extended[1]}
\n ${marineForcast.extended[2]}
\n${marineForcast.extended[3]}

\n\n

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`

${dd} Island Weather

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"today = drawWeather(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"tomorrow = drawWeather(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"dayaftertomorrow = drawWeather(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"tideTitle = html`

\n${dd === \"Quadra\" ? \"Limpet Tide Model\" : \"Pruth Dock Tide Model\"}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"buoyTitle = html`

\n${dd === \"Quadra\" ? \"Sentry Shoal Buoy\" : \"Sea Otter Buoy\"} Conditions\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"windInfo = md`\n🌬️ **Wind Speed and Direction**\n ${Math.round(\n buoyData[0].WSPDk\n)} kts , gusting to ${Math.round(\n buoyData[0].GSTk\n)} kts *${buoyData[0].beauf.title}. ${buoyData[0].beauf.desc}* \nDirection ➤ - ${getText(buoyData[0].WDIR)}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"wind1 = windDirchart(\"WSPD\", \"GST\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1224,"value":"waveHeightInfo = md` 🌊 **Wave Height** measured ${\n buoyData[0].WVHT\n} m and modelled and **Wave Period** ${\n buoyData[0].DPD\n} s`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"wh = {\n return dd === \"Quadra\"\n ? makechart(\"WVHT\")\n : WaveModelChart(\"HTSGW_SFC_0\", \"WVHT\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"wp = {\n return dd === \"Quadra\"\n ? makechart(\"DPD\")\n : WaveModelChart(\"WVPER_SFC_0\", \"DPD\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"temp = md`\n**Temperature** Water temperature ${\n buoyData[0].WTMP\n} °C, Air temperature ${\n buoyData[0].ATMP\n} °C`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1430,"value":"// add modelled temp\nt = makechart(\"WTMP\", \"ATMP\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2091,"value":"apress = md`\n**Atmospheric Pressue** ${buoyData[0].PRES} hPa`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"ap = makechart(\"PRES\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2348,"value":"modTitle = html`

\n${dd === \"Quadra\" ? \" \" : \"Current Model\"}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2356,"value":"md`\n**Current direction and magnitute**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3831,"value":"picsDD = html`

\n${dd === \"Quadra\" ? \" \" : viewof currentsPic}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3834,"value":"viewof currentsPic = slideshow({\n title: \"Select an hour of the day to view!\",\n options: pictureTime.map((h, i, a) => ({\n label: `${h.title} (${i + 1}/${a.length})`,\n value: `${h.url}`\n }))\n // description: \"pics gotten through NASA API from the Hubble mission\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3840,"value":"modView = {\n let p;\n if (dd === \"Calvert\") {\n p = md`

`;\n // await visibility();\n // yield (p = md`

`);\n } else {\n p = md`

`;\n }\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2350,"value":"// Pramod will provide gridded data\n{\n let p;\n if (dd === \"Calvert\") {\n p = md`\n\n\n`;\n } else {\n p = \"Only available for Calvert\";\n }\n\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3836,"value":"pictureTime = {\n const now = new Date();\n const picArray = [];\n const hours = [1, 2, 3, 4, 5, 6];\n hours.forEach(t => {\n let time =\n now.getFullYear() +\n (\"0\" + (now.getMonth() + 1)).slice(-2) +\n \"\" +\n (\"0\" + now.getDate()).slice(-2) +\n (\"0\" + (now.getHours() + t)).slice(-2);\n picArray.push({\n url:\n \"https://goose.hakai.org/opm/calvert03_opm-level001-\" + time + \".png\",\n title: time\n });\n });\n // return (\n // now.getFullYear() +\n // (\"0\" + (now.getMonth() + 1)).slice(-2) +\n // \"\" +\n // (\"0\" + now.getDate()).slice(-2) +\n // (\"0\" + (now.getHours() + 1)).slice(-2)\n // );\n return picArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2796,"value":"html`

\nSensor Network\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3624,"value":"waveModel","pinned":false,"hidden":false,"mode":"ojs"},{"id":3802,"value":"testArray = newdata.map(item => Number(item.sea_surface_elevation))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3800,"value":"minMax = {\n function getLocalMaximaMinima(array) {\n return array.reduce(\n function(r, v, i, a) {\n var j = i;\n\n while (v === a[++j]);\n // console.log(i, i + 1, j, v, a[i + 1], a[j]);\n if (\n (a[i - 1] < v && (a[i + 1] < v || (a[i + 1] === v && a[j] < v))) ||\n (a[i - 1] > v && (a[i + 1] > v || (a[i + 1] === v && a[j] > v)))\n ) {\n r.pos.push(i);\n r.peaks.push(v);\n }\n return r;\n },\n {\n pos: [],\n peaks: []\n }\n );\n }\n return getLocalMaximaMinima(testArray);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3798,"value":"tideFormated = {\n const nd = newdata.map((d, i) => {\n d.hl = 0;\n if (minMax.pos.includes(i)) {\n d.hl = 1;\n }\n return {\n hl: d.hl,\n date: d.date,\n day: d.day,\n sea_surface_elevation:\n Math.round(Number(d.sea_surface_elevation) * 100) / 100\n };\n });\n\n return nd;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3089,"value":"waveModel = {\n return d3\n .text(\"https://goose.hakai.org/opm/gdwps_predictions.dat\")\n .then(text =>\n d3.dsvFormat(\" \").parseRows(text, d => {\n return {\n site: d[0],\n date: new Date(d[1] + \" \" + d[2]),\n variable: d[3],\n value: +d[4],\n erp: +d[4] + +d[4] * 0.1,\n ern: +d[4] - +d[4] * 0.1\n };\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3599,"value":"buoyModWeather = {\n return d3\n .text(\"https://goose.hakai.org/opm/hrdps_predictions.dat\")\n .then(text =>\n d3.dsvFormat(\" \").parseRows(text, d => {\n // console.log(d[4]);\n return {\n site: d[0],\n date: new Date(d[1] + \" \" + d[2]),\n variable: d[3],\n value: +d[4],\n erp: +d[4] + +d[4] * 0.1,\n ern: +d[4] - +d[4] * 0.1\n };\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3635,"value":"bothbuoys = waveModel.concat(buoyModWeather)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"waveCombined = {\n return buoyData.concat(bothbuoys);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3014,"value":"showfig = {\n let show;\n\n if (dd === \"Calvert\") {\n show =\n \"https://goose.hakai.org/opm/calvert03_opm-level001-\" +\n currentTime +\n \".png\";\n }\n return show;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2958,"value":"currentTime = {\n const now = new Date();\n return (\n now.getFullYear() +\n (\"0\" + (now.getMonth() + 1)).slice(-2) +\n \"\" +\n (\"0\" + now.getDate()).slice(-2) +\n (\"0\" + (now.getHours() + 1)).slice(-2)\n ); //to pst\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"forecast = md`\n

Marine Forecast

${marineForcast.location}, ${marineForcast.period}

Issued at: ${marineForcast.date}

${marineForcast.wind}\n

${marineForcast.weatherVis}

\n\n

Extended Forecast
\n${marineForcast.extended[1]}
\n ${marineForcast.extended[2]}
\n${marineForcast.extended[3]}

\n\n

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`\n---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2395,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2203,"value":"cval = {\n let v;\n dd == \"Quadra\" ? (v = \"bluff\") : (v = \"lookout\");\n\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2341,"value":"md`load data from sn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2126,"value":"second_level_map = ({\n Quadra: [\"bluff\", \"tower\", \"hbidock\"],\n Calvert: [\"dock\", \"lookout\", \"beach\", \"buxton1\", \"buxton2\", \"hecate\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2133,"value":"second_level_options = second_level_map[dd]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1720,"value":"webcams = ({\n bluff: \"https://hecate.hakai.org/webcams/images/quadra/bluff/current.jpg\",\n tower: \"https://hecate.hakai.org/webcams/images/quadra/tower/current.jpg\",\n hbidock: \"https://hecate.hakai.org/webcams/images/quadra/hbidock/current.jpg\",\n //Calvert\n dock: \"https://hecate.hakai.org/webcams/images/calvert/dock/current.jpg\",\n lookout:\n \"https://hecate.hakai.org/webcams/images/calvert/lookout/current.jpg\",\n beach: \"https://hecate.hakai.org/webcams/images/calvert/beach/current.jpg\",\n buxton1:\n \"https://hecate.hakai.org/webcams/images/calvert/buxton1/current.jpg\",\n buxton2:\n \"https://hecate.hakai.org/webcams/images/calvert/buxton2/current.jpg\",\n hecate: \"https://hecate.hakai.org/webcams/images/calvert/Hecate/current.jpg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1818,"value":"marineWea = ({\n Calvert:\n \"https://mb-hakai.herokuapp.com/https://dd.weather.gc.ca/marine_weather/xml/pacific/m0000140_e.xml\",\n Quadra:\n \"https://mb-hakai.herokuapp.com/https://dd.weather.gc.ca/marine_weather/xml/pacific/m0000028_e.xml\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"getAngle = function(d) {\n if (d == 0 || d == 360) {\n return 90; //S\n } else if (d > 0 && d < 90) {\n return 135; //NE\n } else if (d == 90) {\n return 180; //E\n } else if (d > 90 && d < 180) {\n return 225; //SE\n } else if (d == 180) {\n return 270;\n } else if (d > 180 && d < 270) {\n return 315; //SW\n } else if (d == 270) {\n return 0; //W\n } else if (d > 270 && d < 360) {\n return 45;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":3127,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"url = marineWea[dd]","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"levels.wind[lcd(11, \"wind\")]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3891,"value":"buoyohbuoy = {\n return dd === \"Quadra\"\n ? d3.json(\"https://goose.hakai.org/ccv/QuadraBuoyData.json\")\n : d3.json(\"https://goose.hakai.org/ccv/CalvertBuoyData.json\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"buoyData = {\n const dat = buoyohbuoy\n .filter((d, i) => i !== 0)\n .map(({ ...row }) => {\n row.date = new Date(\n Date.UTC(row[\"#YY\"], row[\"MM\"] - 1, row[\"DD\"], row[\"hh\"], row[\"mm\"])\n );\n row.WSPDk = row.WSPD * 1.94384;\n row.GSTk = row.GST * 1.94384;\n // row.WSmph = row.WSPD * 2.23694;\n row.GSTmph = row.GST * 2.23694;\n row.beauf = levels.wind[lcd(row.GSTmph, \"wind\")];\n\n return row;\n });\n // );\n\n return dat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"getText = function(d) {\n if (d == 0 || d == 360) {\n return \"N\";\n } else if (d > 0 && d < 90) {\n return \"NE\";\n } else if (d == 90) {\n return \"E\";\n } else if (d > 90 && d < 180) {\n return \"SE\";\n } else if (d == 180) {\n return \"S\";\n } else if (d > 180 && d < 270) {\n return \"SW\";\n } else if (d == 270) {\n return \"W\";\n } else if (d > 270 && d < 360) {\n return \"NW\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"function xmlToJson(xml) {\n // Create the return object\n var obj = {};\n\n if (xml.nodeType == 1) {\n // element\n // do attributes\n if (xml.attributes.length > 0) {\n obj[\"@attributes\"] = {};\n for (var j = 0; j < xml.attributes.length; j++) {\n var attribute = xml.attributes.item(j);\n obj[\"@attributes\"][attribute.nodeName] = attribute.nodeValue;\n }\n }\n } else if (xml.nodeType == 3) {\n // text\n obj = xml.nodeValue;\n }\n\n // do children\n if (xml.hasChildNodes()) {\n for (var i = 0; i < xml.childNodes.length; i++) {\n var item = xml.childNodes.item(i);\n var nodeName = item.nodeName;\n if (typeof obj[nodeName] == \"undefined\") {\n obj[nodeName] = xmlToJson(item);\n } else {\n if (typeof obj[nodeName].push == \"undefined\") {\n var old = obj[nodeName];\n obj[nodeName] = [];\n obj[nodeName].push(old);\n }\n obj[nodeName].push(xmlToJson(item));\n }\n }\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"times = suncalc.getTimes(new Date(), 50.2058, -125.2682)","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"suncalc = require(\"suncalc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"newdata = {\n let data, ll;\n dd === \"Quadra\" ? (ll = [50.2058, -125.2682]) : (ll = [51.5529, -128.0056]);\n // console.log(ll, 50.2058, -125.2682);\n const newd = tideMod.map(({ date, ...row }) => {\n date = d3.isoParse(date);\n const sun = suncalc.getTimes(new Date(date), ll[0], ll[1]);\n // console.log(sun);\n\n let day;\n if (d3.isoParse(sun.sunrise) < date && date < d3.isoParse(sun.sunset)) {\n day = 0;\n } else {\n day = 10;\n }\n return { ...row, date, day };\n });\n newd.sort((a, b) => a.date - b.date);\n return newd;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"IsoParse = d3.utcParse(\"%Y-%m-%dT%H:%M:%S%Z\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3350,"value":"tideMod = {\n let ws;\n dd === \"Quadra\" ? (ws = \"HAKAI_LIMPET\") : (ws = \"HAKAI_PRUTH\");\n\n let daysago = new Date().getDate() - 1;\n let st = new Date(new Date().setDate(new Date().getDate() - 1));\n let ed = new Date(new Date().setDate(new Date().getDate() + 7));\n\n return fetch(\n \"https://hecate.hakai.org/api/modelling/tide_prediction.json?station=\" +\n ws +\n \"&date=\" +\n st.toISOString() +\n \"&date<\" +\n ed.toISOString() +\n \"&limit=-1\",\n {\n credentials: \"include\"\n }\n )\n .then(resp => resp.json())\n .then(data => {\n return data;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3866,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"// $ = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2159,"value":"snData = {\n // const now = new Date();\n let daysago = new Date().getDate() - 7;\n let st = new Date(new Date().setDate(daysago));\n\n return fetch(\n \"https://hecate.hakai.org/api/sn/views/Quadra:1hourSamples?measurementTime>=\" +\n st.toISOString() +\n \"&measurementTime<\" +\n new Date().toISOString() +\n \"&limit=-1\",\n {\n credentials: \"include\"\n }\n )\n .then(resp => resp.json())\n .then(data => {\n return data;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3743,"value":"h = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":3838,"value":"import {slideshow} from '@asg017/slideshow'","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"import {drawWeather, lcd, levels} with {h as height} from '@mbrownshoes/bright-sky-better-weather-app' ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1712,"value":"import {select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}