2f:T4c2,style = html` `30:T1463,chart = { if (colorView === "Heatwaves") { const height = focusHeight; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block"); const y = d3 .scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top + 5]); const xAxis = (g, xMHW, height) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(xMHW) .ticks(width / 80) .tickSizeOuter(0) ) .style("stroke", "#e0f5ee"); svg.append("g").call(xAxis, xMHW, height).attr("class", "axisWhite"); const chartData = stack(brushedDataMHW); // svg.append("path") const groups = svg .append("g") // Each layer of the stack goes in a group // the group contains that layer for all countries .selectAll("g") .data(chartData) .join("g") // rects in the same layer will all have the same color, so we can put it on the group // we can use the key on the layer's array to set the color .style("fill", (d, i) => { return d.date > new Date("2022-08-01") ? "grey" : colors.get(d.key); }); groups .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => { return x1MHW(new Date(d.data.date).toISOString().substring(0, 10)); }) .attr("y", (d) => y(d[1])) .attr("height", (d) => y(d[0]) - y(d[1])) .attr("width", x1MHW.bandwidth()); const endLine = svg .append("line") .datum([ { date: endPlayDate, value: 1 } ]) .attr("x1", (d) => { return x(endPlayDate); }) .attr("x2", (d) => x(endPlayDate)) .attr("y2", y(1)) .attr("y1", y(0)) .attr("fill", "none") .attr("stroke", "blue") .attr("stoke-width", 1.5) .attr("stroke-linejoin", "round"); const recordLine = svg .append("line") .datum([ { date: time1, value: 1 } ]) .attr("x1", (d) => { return x(time1); }) .attr("x2", (d) => x(time1)) .attr("y2", y(1)) .attr("y1", y(0)) .attr("fill", "none") .attr("stroke", "deeppink") .attr("stoke-width", 1.5) .attr("stroke-linejoin", "round"); const circles = svg .selectAll("circle") .data([ { date: time1, value: 1 } ]) .join("circle") .attr("cx", (d) => { return x(d.date); }) .attr("cy", (d) => y(0.98)) .attr("r", 7) .attr("fill", (d) => "deeppink") .attr("stroke", (d) => "deeppink") .call(drag); return svg.node(); } else { // anomaly chart const height = focusHeight; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block"); const y = d3 .scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top + 5]); const xAxis = (g, x, height) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ) .style("stroke", "#e0f5ee"); svg.append("g").call(xAxis, x, height).attr("class", "axisWhite"); const x2 = d3 .scaleBand() .range([margin.left, width - margin.right], 0.01) .padding(0.01) .domain(brusedAllDates); const bars = svg .selectAll("rect") .data(brushedData) .enter() .append("rect") .attr("x", (d) => x2(d.date.toISOString().substring(0, 10))) .attr("y", (d) => { return y(1); }) .attr("width", (d) => x2.bandwidth()) .attr("height", (d) => y(0) - y(1)) .attr("fill", (d) => (d.value === -99 ? "#ddd" : sstaColors(d.value))); const recordLine = svg .append("line") .datum([ { date: time1, value: 1 } ]) .attr("x1", (d) => { return x(time1); }) .attr("x2", (d) => x(time1)) .attr("y2", y(1)) .attr("y1", y(0)) .attr("fill", "none") .attr("stroke", "deeppink") .attr("stoke-width", 1.5) .attr("stroke-linejoin", "round"); const endLine = svg .append("line") .datum([ { date: endPlayDate, value: 1 } ]) .attr("x1", (d) => { return x(endPlayDate); }) .attr("x2", (d) => x(endPlayDate)) .attr("y2", y(1)) .attr("y1", y(0)) .attr("fill", "none") .attr("stroke", "blue") .attr("stoke-width", 1.5) .attr("stroke-linejoin", "round"); const circles = svg .selectAll("circle") .data([ { date: time1, value: 1 } ]) .join("circle") .attr("cx", (d) => { return x(d.date); }) .attr("cy", (d) => y(0.98)) .attr("r", 7) .attr("fill", (d) => "deeppink") .attr("stroke", (d) => "deeppink") .call(drag); return svg.node(); } }31:T11d5,viewof focus = { if (colorView === "Heatwaves") { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); const x = d3 .scaleTime() .domain(dateExtent) .range([margin.left, width - margin.right]); const brush = d3 .brushX() .extent([ [margin.left, 0.5], [width - margin.right, focusHeight - margin.bottom + 0.5] ]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [ x(d3.utcYear.offset(x.domain()[1], -1)), x.range()[1] ]; svg.append("g").call(xAxis, x, focusHeight).attr("class", "axisWhite"); let previousS0, previousS1; const chartData = stack(monthlyGrouped); const groups = svg .append("g") // Each layer of the stack goes in a group // the group contains that layer for all countries .selectAll("g") .data(chartData) .join("g") // rects in the same layer will all have the same color, so we can put it on the group // we can use the key on the layer's array to set the color .style("fill", (d, i) => { return colors.get(d.key); }); // .attr("d", area(x, y.copy().range([focusHeight - margin.bottom, 4]))); groups .selectAll("rect") // Now we place the rects, which are the children of the layer array .data((d) => d) .join("rect") .attr("x", (d) => { // console.log(d.data.date); return x1(new Date(d.data.date).toISOString().substring(0, 10)); }) .attr("y", (d) => y(d[1])) .attr("height", (d) => y(d[0]) - y(d[1])) .attr("width", x1.bandwidth()); const gb = svg.append("g").call(brush); gb.call(brush.move, defaultSelection); function brushed({ selection }) { if (selection) { // console.log("fire1"); var s = selection || x.range(); svg.property("value", selection.map(x.invert, x).map(d3.utcMonth.ceil)); svg.dispatch("input"); if (((s[1] - s[0]) / width) * 120 > 30) { gb.call(brush.move, [previousS0, previousS1]); return; } previousS0 = s[0]; previousS1 = s[1]; } } function brushended({ selection }) { if (!selection) { gb.call(brush.move, [defaultSelection]); } } return svg.node(); ///// } else { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); const x = d3 .scaleTime() .domain(dateExtent) .range([margin.left, width - margin.right]); const brush = d3 .brushX() .extent([ [margin.left, 0.5], [width - margin.right, focusHeight - margin.bottom + 0.5] ]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [ x(d3.utcYear.offset(x.domain()[1], -1)), x.range()[1] ]; svg.append("g").call(xAxis, x, focusHeight).attr("class", "axisWhite"); let previousS0, previousS1; // svg.append("path") const bars = svg .selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d) => x1(d.date.toISOString().substring(0, 10))) .attr("y", (d) => { return y(1); }) .attr("width", (d) => x1.bandwidth()) .attr("height", (d) => y(0) - y(1)) // .attr("fill", (d) => sstaColors(d.value)); .attr("fill", (d) => (d.value === -99 ? "#ddd" : sstaColors(d.value))); // .attr("d", area(x, y.copy().range([focusHeight - margin.bottom, 4]))); const gb = svg.append("g").call(brush); gb.call(brush.move, defaultSelection); function brushed({ selection }) { // mutable debug1 = selection; if (selection) { // console.log("fire1"); var s = selection || x.range(); svg.property("value", selection.map(x.invert, x).map(d3.utcMonth.ceil)); svg.dispatch("input"); if ( ((s[1] - s[0]) / width) * 120 > 30 || ((s[1] - s[0]) / width) * 120 < 2 ) { gb.call(brush.move, [previousS0, previousS1]); return; } previousS0 = s[0]; previousS1 = s[1]; } } function brushended({ selection }) { if (!selection) { mutable debug1 = defaultSelection; gb.call(brush.move, [previousS0, previousS1]); // changed from defaultSelection so that a single click doesn't mess things up } } return svg.node(); } }32:Tfa1,viewof lineChart = { const noData = "No data during time period selected"; const taLabel = alldays.length === 0 || tempToShow === undefined ? "" : "Temperature anomaly (°C)"; const HWlineChart = Plot.plot({ x: { domain: [limitsDelayed[0], limitsDelayed[1]] }, y: { label: "↑ SST (°C)", domain: [0, yMaxDomainToUse] }, style: { backgroundColor: "#000000", color: "#e0f5ee", // fontFamily: "system-ui", fontSize: 10 // overflow: "visible" }, height: 500, marginTop: 20, className: "hwclass", // y: { // nice: true // }, // x: { // nice: true // }, marks: [ Plot.dot(alldays, { x: "date", y: "sst", stroke: "category", fill: "category" }), // Plot.line(clickedSite, { // x: "date", // y: "sst", // stroke: "#ccc", // curve: "step", // strokeWidth: 0.5 // }), // vertical rule to mark date/time of event Plot.ruleX([time1], { stroke: "white", y1: 0, y2: d3.max(alldays, (d) => d.sst) }), Plot.text( [ { x: dateForLabel, y: yValueForLabel, text: buoyClicked } ], { x: "x", y: "y", text: "text", fontSize: 16 } ) ], color: { domain: ["none", "Moderate", "Strong", "Severe", "Extreme"], range: [ colors.get("none"), colors.get("Moderate"), colors.get("Strong"), colors.get("Severe"), colors.get("Extreme") ] // legend: true }, width: 500, height: 300 // marginBottom: 70, // label: buoyClicked // title: "some stie" }); const SSTAlineChart = Plot.plot({ x: { domain: [limitsDelayed[0], limitsDelayed[1]] }, y: { label: "↑ SST (°C)", domain: [0, yMaxDomainToUse] }, style: { backgroundColor: "#000000", color: "#e0f5ee", // fontFamily: "system-ui", fontSize: 10 // overflow: "visible" }, height: 500, marginTop: 20, className: "hwclass", // y: { // nice: true // }, // x: { // nice: true // }, marks: [ Plot.dot(alldays, { x: "date", y: "sst", stroke: "ssta", fill: "ssta" }), // Plot.line(clickedSite, { // x: "date", // y: "sst", // stroke: "#ccc", // curve: "step", // strokeWidth: 0.5 // }), // vertical rule to mark date/time of event Plot.ruleX([time1], { stroke: "white", y1: 0, y2: d3.max(alldays, (d) => d.sst) }), Plot.text( [ { x: dateForLabel, y: yValueForLabel, text: buoyClicked } ], { x: "x", y: "y", text: "text", fontSize: 16 } ), Plot.text( [ { x: dateForLabelVal, y: yValueForLabel, text: taLabel } ], { x: "x", y: "y", text: "text", fontSize: 10 } ), Plot.text( [ { x: dateForLabelVal, y: yValueForLabel - 1, text: currentValue } ], { x: "x", y: "y", text: "text", fontSize: 10 } ) ], color: { type: "diverging", domain: [-4, 4], pivot: 0, reverse: true // legend: true, // label: "SSTA (°C) →" }, width: 500, height: 300 // marginBottom: 70, // label: buoyClicked // title: "some stie" }); if (alldays !== null) { return colorView === "Anomaly" ? SSTAlineChart : HWlineChart; } else { return md``; } }33:T82d,buoys = [ { short_name: "C46004", lat: 50.94, lon: -135.87, long_name: "Middle Nomad", pk: 1 }, { short_name: "C46036", lat: 48.3, lon: -133.86, long_name: "South Nomad", pk: 2 }, { short_name: "C46131", lat: 49.91, lon: -124.99, long_name: "Sentry Shoal", pk: 3 }, { short_name: "C46132", lat: 49.74, lon: -127.93, long_name: "South Brooks", pk: 4 }, // { // short_name: "C46134", // lat: 48.66, // lon: -123.48, // long_name: "Pat Bay Test Buoy", // pk: 5 // }, { short_name: "C46145", lat: 54.38, lon: -132.42, long_name: "Central Dixon Entran", pk: 6 }, { short_name: "C46146", lat: 49.34, lon: -123.73, long_name: "Halibut Bank", pk: 7 }, { short_name: "C46147", lat: 51.83, lon: -131.23, long_name: "South Moresby", pk: 8 }, // { // short_name: "C46181", // lat: 53.82, // lon: -128.84, // long_name: "Nanakwa Shoal", // pk: 9 // }, // { // short_name: "C46182", // lat: 49.48, // lon: -123.29, // long_name: "Pam Rocks", // pk: 10 // }, { short_name: "C46183", lat: 53.57, lon: -131.14, long_name: "North Hecate Strait", pk: 11 }, { short_name: "C46184", lat: 53.92, lon: -138.85, long_name: "North Nomad", pk: 12 }, { short_name: "C46185", lat: 52.42, lon: -129.79, long_name: "South Hecate Strait", pk: 13 }, { short_name: "C46204", lat: 51.38, lon: -128.77, long_name: "West Sea Otter", pk: 14 }, { short_name: "C46205", lat: 54.3, lon: -133.4, long_name: "West Dixon Entrance", pk: 15 }, { short_name: "C46206", lat: 48.83, lon: -126, long_name: "La Perouse Bank", pk: 16 }, { short_name: "C46207", lat: 50.88, lon: -129.91, long_name: "East Dellwood", pk: 17 }, { short_name: "C46208", lat: 52.51, lon: -132.69, long_name: "West Moresby", pk: 18 } ]34:T47e,buoyDailyData = { // let daysago = new Date().getDate() - 7; // let st = new Date(new Date().setDate(daysago)); return fetch( "https://t6r95rekqe.execute-api.us-east-1.amazonaws.com/dev/getDailySSTStats?startDate=" + dayBeforeStart + "&endDate=" + limitsDelayed[1].toISOString().substring(0, 10) + "" ) .then((resp) => resp.json()) .then((data) => { data.forEach((d) => { d.ssta = d.sst - d.seas; d.diff = d.thresh; d.diffStrong = d.thresh; d.diffExtreme = d.thresh; d.diffSevere = d.thresh; if (d.category === "Strong") { d.diffStrong = Math.max(d.thresh, d.sst); } if (d.category === "Extreme") { d.diffExtreme = Math.max(d.thresh, d.sst); } if (d.category === "Severe") { d.diffSevere = Math.max(d.thresh, d.sst); } if (d.category === "Moderate") { d.diff = Math.max(d.thresh, d.sst); } if (d.category === null) { d.category = "none"; } d.date = new Date(d.result_time); }); return data; }); }35:T5f5,hwEvent = [ { date: "2013-10-01", value: 1 }, { date: "2013-11-01", value: 1 }, { date: "2013-12-01", value: 1 }, { date: "2014-01-01", value: 1 }, { date: "2014-02-01", value: 1 }, { date: "2014-03-01", value: 1 }, { date: "2014-04-01", value: 1 }, { date: "2014-05-01", value: 1 }, { date: "2014-06-01", value: 1 }, { date: "2014-07-01", value: 1 }, { date: "2014-08-01", value: 1 }, { date: "2014-09-01", value: 1 }, { date: "2014-10-01", value: 1 }, { date: "2014-11-01", value: 1 }, { date: "2014-12-01", value: 1 }, { date: "2015-01-01", value: 1 }, { date: "2015-02-01", value: 1 }, { date: "2015-03-01", value: 1 }, { date: "2015-04-01", value: 1 }, { date: "2015-05-01", value: 1 }, { date: "2015-06-01", value: 1 }, { date: "2015-07-01", value: 1 }, { date: "2015-08-01", value: 1 }, { date: "2015-09-01", value: 1 }, { date: "2015-10-01", value: 1 }, { date: "2015-11-01", value: 1 }, { date: "2015-12-01", value: 1 }, { date: "2016-01-01", value: 1 }, { date: "2016-02-01", value: 1 }, { date: "2016-03-01", value: 1 }, { date: "2016-04-01", value: 1 }, { date: "2016-05-01", value: 1 }, { date: "2016-06-01", value: 1 }, { date: "2016-07-01", value: 1 }, { date: "2016-08-01", value: 1 }, { date: "2016-09-01", value: 1 }, { date: "2016-10-01", value: 1 }, { date: "2016-11-01", value: 1 }, { date: "2019-08-01", value: 1 }, { date: "2019-09-01", value: 1 }, { date: "2019-10-01", value: 1 }, { date: "2019-11-01", value: 1 } ] 36:[{"id":"c4804cd494f0b96ac2d3b47dc33a672726905b0b035715b118da85af025b1b3bdfaca838961ca5e2847c4d71dd58f384bd53f4b3205dbdd64ff6d909a7c46815","href":"https://static.observableusercontent.com/files/c4804cd494f0b96ac2d3b47dc33a672726905b0b035715b118da85af025b1b3bdfaca838961ca5e2847c4d71dd58f384bd53f4b3205dbdd64ff6d909a7c46815","name":"monthly@5.json","type":"application/json","lastModified":1648665703567.303,"size":5530},{"id":"4f15d9ec1bd1193a40e6cccc638b5ebbef045d555e511f1e5b1b631be853554576b6519c5cbbb167076801ccadcfb6c355a2ccc8f3cdbedc96be1debbb74c2e2","href":"https://static.observableusercontent.com/files/4f15d9ec1bd1193a40e6cccc638b5ebbef045d555e511f1e5b1b631be853554576b6519c5cbbb167076801ccadcfb6c355a2ccc8f3cdbedc96be1debbb74c2e2","name":"monthlyMHW.json","type":"application/json","lastModified":1649088403727.784,"size":319841},{"id":"4ddb55c620ff13535fa12218798e1510c0f1db6a6e897ffa6e652a22eaf74ee822f2d46311a4d888d73baa482e4b6e4fafa603c2c82635435770e6ba7fcdae87","href":"https://static.observableusercontent.com/files/4ddb55c620ff13535fa12218798e1510c0f1db6a6e897ffa6e652a22eaf74ee822f2d46311a4d888d73baa482e4b6e4fafa603c2c82635435770e6ba7fcdae87","name":"monthlyMHW@4.json","type":"application/json","lastModified":1655753533756.409,"size":325558},{"id":"5e3e0411da06ec473246aaab6facbf037141d17d812ac0c9f699cd031fe4ab605753bd4b440a707657921398b8557f7f96b52d093dd145ebab3d12076e032462","href":"https://static.observableusercontent.com/files/5e3e0411da06ec473246aaab6facbf037141d17d812ac0c9f699cd031fe4ab605753bd4b440a707657921398b8557f7f96b52d093dd145ebab3d12076e032462","name":"monthly@6.json","type":"application/json","lastModified":1649706069639.026,"size":5580},{"id":"a3fbadf29709e974764d626a8843acf9134d9d813173218a60e5bbdf612fc8f873cb8fc46bf03b10d42dff7e66f3861625456633c0b887fee99eb6c0c0ac42d9","href":"https://static.observableusercontent.com/files/a3fbadf29709e974764d626a8843acf9134d9d813173218a60e5bbdf612fc8f873cb8fc46bf03b10d42dff7e66f3861625456633c0b887fee99eb6c0c0ac42d9","name":"monthly@7.json","type":"application/json","lastModified":1649706354615.134,"size":5613}] 2d:{"title":"Marine heatwave charts and brush/player","cells":[{"id":0,"value":"md`# Marine heatwave charts and brush/player\n\nused to embed as a module in https://cioospacific.ca/applied-data/marine-heat-monitor/\n\ncurl -o bs.tgz \"https://api.observablehq.com/d/0b936d79280ee3bd.tgz?v=3\"\n\ntar -C src/buoyviz -xvzf bs.tgz\n\nThis notebook includes\n- loading the buoy data via api\n- data brush chart (loads from github)\n- scrubber for playing the animation in the website\n- charts for the buoys\n\n### Change log\naug 14 2023\n- start player on the most recent date with data\nJune 22 2022\n- replaced the player notebook with scrubber, as font awesome used in the player was not playing well with webpack.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5370,"value":"curDate = md`# ${timeFormat(new Date(time1))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5832,"value":"md`date to stop playing. Ideally this should be a only a couple days in the past since data is usually updated each day`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6099,"value":"d3.timeDay.offset(d3.utcDay(), -2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5829,"value":"endPlayDate = d3.timeDay.offset(d3.utcDay(), -2) //new Date(\"2022-06-01\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5875,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":5826,"value":"brushedData","pinned":true,"hidden":false,"mode":"ojs"},{"id":5813,"value":"md`play`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5868,"value":"viewof time1 = Scrubber(datesToPlot, {\n width: 0,\n delay: 100,\n initial: newNum,\n autoplay: false,\n loop: false,\n format: (d) => \"\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5426,"value":"md`anomaly or category button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5373,"value":"viewof colorView = Inputs.radio([\"Anomaly\", \"Heatwaves\"], {\n value: \"Anomaly\",\n // label: \"Choose category to view\",\n format: (x) => html`${x}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5918,"value":"mutable newNum = datesToPlot[datesToPlot.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6169,"value":"brushedData","pinned":true,"hidden":false,"mode":"ojs"},{"id":6192,"value":"// brushedDataMHW.push({\n// date: new Date(\"2022-08-20\"),\n// none: 0,\n// Moderate: 0,\n// Strong: 0\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":6206,"value":"brusedAllDates[brusedAllDates.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6209,"value":"// {\n// if (\n// dateExtent[1].toISOString().substring(0, 7) + \"-01\" ===\n// brusedAllDates[brusedAllDates.length - 1]\n// ) {\n// const temp = brushedDataMHW.filter(d => d.date != brusedAllDates[brusedAllDates.length - 1])\n \n// }\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":6147,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5376,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":5898,"value":"drag = {\n function dragstarted(event, d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n let isBelowMax = event.x > x(+focus[0]);\n let isAboveMin = event.x < x(+endPlayDate);\n // mutable debug = new Date(\"2022-04-08\");\n // console.log(d3.timeDay.offset(today, -1));\n\n if (isBelowMax && isAboveMin) {\n d3.select(this).attr(\"cx\", (d.x = event.x));\n // console.log(event.x, event.dx);\n\n const ind = d3.bisect(datesToPlot, +x.invert(event.x));\n // mutable debug = ind;\n mutable newNum = ind; // place ind we need to move the scrubber to\n viewof time1.update(ind);\n }\n\n // .attr(\"cy\", (d.y = event.y));\n }\n\n function dragended(event, d) {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5778,"value":"mutable debug1 = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":5380,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5576,"value":"legTitle = md` ${\n colorView === \"Anomaly\" ? \"Sea surface temperature anomaly\" : \" \"\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5385,"value":"leg = {\n return colorView === \"Anomaly\"\n ? Plot.legend({\n marginLeft: 10,\n marginRight: 10,\n\n style: {\n backgroundColor: \"#000000\",\n color: \"#e0f5ee\",\n fontSize: \"16px\",\n fontWeight: \"normal\"\n },\n color: {\n type: \"diverging\",\n domain: [-4, 4],\n pivot: 0,\n reverse: true,\n legend: true,\n label: \"\"\n }\n })\n : Plot.legend({\n color: {\n type: \"categorical\",\n domain: [\"No heatwave\", \"Moderate\", \"Strong\", \"Severe\", \"Extreme\"],\n range: [\"lightblue\", \"#FEDB67\", \"#f26722\", \"#cd3728\", \"#7E1416\"] // use the \"accent\" scheme\n },\n style: {\n backgroundColor: \"#000000\",\n color: \"#e0f5ee\",\n fontSize: \"16px\",\n fontWeight: \"normal\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5996,"value":"Inputs.table(alldays)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6085,"value":"clickedSite","pinned":true,"hidden":false,"mode":"ojs"},{"id":6024,"value":"// fill gaps in bouy data with nan so chart doesn't break\n\nalldays = {\n const alldays = d3.timeDay\n .range(new Date(focus[0]), focus[1])\n .map((d) => d.toISOString().substring(0, 10));\n const out = [];\n alldays.forEach((day, i) => {\n let isData = clickedSite.find((d) => +d.date === +new Date(day));\n\n isData === undefined\n ? out.push({\n station: siteClicked,\n sst: NaN,\n ssta: NaN,\n date: day\n })\n : out.push(isData);\n });\n\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6089,"value":"alldays","pinned":true,"hidden":false,"mode":"ojs"},{"id":6045,"value":"console.log(new Date(alldays[0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":6104,"value":"alldays.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":6106,"value":"alldays","pinned":true,"hidden":false,"mode":"ojs"},{"id":5998,"value":"clickedSite.find((d) => +d.date === +new Date(alldays[0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":6118,"value":"tempToShow === undefined\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":5389,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3219,"value":"mutable siteClicked = 16","pinned":true,"hidden":false,"mode":"ojs"},{"id":1511,"value":"ind = dates.indexOf(time1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2202,"value":"today = d3.timeDay.offset(d3.utcDay(), -2) //d3.utcDay()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2246,"value":"start = d3.timeDay.offset(today, -365)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3568,"value":"limitsDelayed = {\n await Promises.delay(1000, \"\"); // delay returning\n return focus;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5164,"value":"limitsDelayedMHW = {\n await Promises.delay(1000, \"\"); // delay returning\n return focus;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4444,"value":"// buttonStyle = faStyle({ solid: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3843,"value":"// import { Player, faStyle } from \"2b1bbd5c6560d3d0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4199,"value":"## bar charts","pinned":false,"hidden":false,"mode":"md"},{"id":4179,"value":"focusHeight = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":4181,"value":"margin = ({ top: 4, right: 20, bottom: 30, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4186,"value":"x1 = d3\n .scaleBand()\n .range([margin.left, width - margin.right], 0.01)\n .padding(0.1)\n .domain(alldates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5124,"value":"x1MHW = d3\n .scaleBand()\n .range([margin.left, width - margin.right], 0.01)\n .padding(0.01)\n .domain(brusedAllDatesMHW)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4184,"value":"xAxis = (g, x, height) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .style(\"stroke\", \"#e0f5ee\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4188,"value":"y = d3\n .scaleLinear()\n .domain([0, 1])\n .range([focusHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5093,"value":"brushedDataMHW = monthlyGrouped.filter(\n (d) => d.date >= focus[0] && new Date(d.date) < new Date(focus[1])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6127,"value":"monthlyGrouped","pinned":true,"hidden":false,"mode":"ojs"},{"id":4196,"value":"brusedAllDates = d3.timeMonth\n .range(new Date(focus[0]), focus[1])\n .map((d) => d.toISOString().substring(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":5137,"value":"brusedAllDatesMHW = d3.timeMonth\n .range(new Date(focus[0]), new Date(focus[1]))\n .map((d) => d.toISOString().substring(0, 10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4369,"value":"x = d3\n .scaleTime()\n .domain(focus)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5111,"value":"xMHW = d3\n .scaleTime()\n .domain(focus)\n .range([margin.left, width - margin.right]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":4758,"value":"stack = d3.stack().keys(cats)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5166,"value":"brushedData = data.filter(\n (d) => d.date >= focus[0] && new Date(d.date) < new Date(focus[1])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4177,"value":"sstaColors = d3.scaleDiverging(d3.interpolateRdBu).domain([4, 0, -4])","pinned":true,"hidden":false,"mode":"ojs"},{"id":4009,"value":"brushHandle = (g, selection, margin, height) =>\n g\n .selectAll(\".handle--custom\")\n .data([{ type: \"w\" }, { type: \"e\" }])\n .join((enter) =>\n enter\n .append(\"path\")\n .attr(\"class\", \"handle--custom\")\n .attr(\"fill\", \"#afafaf\")\n .attr(\"fill-opacity\", 0.8)\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\", 1)\n .attr(\"cursor\", \"ew-resize\")\n .attr(\"d\", arc)\n )\n .attr(\"display\", selection === null ? \"none\" : null)\n .attr(\n \"transform\",\n selection === null\n ? null\n : (d, i) =>\n `translate(${selection[i]},${\n (height + margin.top - margin.bottom) / 2\n })`\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":4016,"value":"arc = {\n let height = 50;\n let margin = { top: 10, right: 20, bottom: 20, left: 95 };\n return d3\n .arc()\n .innerRadius(0)\n .outerRadius((height - margin.top - margin.bottom) / 2)\n .startAngle(0)\n .endAngle((d, i) => (i ? Math.PI : -Math.PI));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6329,"value":"new Date(data[data.length - 1].date).toISOString().substring(0, 7) <\n new Date().toISOString().substring(0, 7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6335,"value":"new Date(data[data.length - 1].date.toISOString().substring(0, 7) + \"-01\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6331,"value":"new Date(new Date().toISOString().substring(0, 7) + \"-01\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6363,"value":"data[data.length - 1].date","pinned":true,"hidden":false,"mode":"ojs"},{"id":6311,"value":"dataToPlot = {\n if (\n new Date(data[data.length - 1].date).toISOString().substring(0, 7) <\n new Date().toISOString().substring(0, 7)\n ) {\n data.push({\n date: new Date(new Date().toISOString().substring(0, 7) + \"-01\"),\n value: -99\n });\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4164,"value":"data = {\n const out = [];\n Object.keys(dataSsta).forEach((d) => {\n out.push({\n date: new Date(d.slice(0, 4) + \"-\" + d.slice(-2)),\n value: dataSsta[d][0]\n });\n });\n\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3506,"value":"ns = Inputs.text().classList[0] // to customize radio styling","pinned":true,"hidden":false,"mode":"ojs"},{"id":2940,"value":"datesToPlot = datesCopy.filter(\n (d) => d >= limitsDelayed[0] && d <= limitsDelayed[1]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3147,"value":"dates = d3.timeDay\n .range(new Date(dateExtent[0]), new Date(dateExtent[1]))\n .map((d) => +d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3164,"value":"datesCopy = [...dates]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3153,"value":"dateExtent = [\n new Date(\"2013-01-01\"),\n new Date(d3.timeDay.offset(d3.utcDay(), -3))\n] //d3.extent(HWStatus, (d) => new Date(d.date_start1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5717,"value":"buoys.find((d) => d.long_name === siteClickeds).pk","pinned":true,"hidden":false,"mode":"ojs"},{"id":5724,"value":"siteClickeds","pinned":true,"hidden":false,"mode":"ojs"},{"id":5702,"value":"viewof siteClickeds = Inputs.select(\n [null].concat(buoys.map((d) => d.long_name)),\n {\n label: \"site\",\n value: \"North Hecate Strait\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6108,"value":"clickedSite","pinned":true,"hidden":false,"mode":"ojs"},{"id":6111,"value":"new Date(time1).toISOString().substring(0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6113,"value":"tempToShow = clickedSite.find(\n (d) =>\n new Date(d.date).toISOString().substring(0, 10) ===\n new Date(time1).toISOString().substring(0, 10)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4598,"value":"currentValue = {\n let value;\n if (clickedSite.length !== 0 && tempToShow !== undefined) {\n value = tempToShow.ssta.toFixed(2);\n } else {\n value = \"\";\n }\n\n // if (clickedSite.length === 0) value = \"\";\n return value;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3226,"value":"yMaxDomainToUse = {\n return clickedSite[Math.floor(clickedSite.length / 1.2)] === undefined ?\n 18 : d3.max(clickedSite, (d) => d.sst) * 1.1\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3197,"value":"yValueForLabel = {\n return clickedSite[Math.floor(clickedSite.length / 1.2)] === undefined\n ? 18\n : d3.max(clickedSite, (d) => d.sst) * 1.1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3100,"value":"dateForLabel = {\n return clickedSite[Math.floor(clickedSite.length / 1.2)] === undefined\n ? d3.timeDay.offset(limitsDelayed[0], 30)\n : clickedSite[Math.floor(clickedSite.length * 0.2)].date;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4630,"value":"dateForLabelVal = {\n return clickedSite[Math.floor(clickedSite.length / 2)] === undefined\n ? d3.timeDay.offset(limitsDelayed[0], 30)\n : clickedSite[Math.floor(clickedSite.length * 0.8)].date;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3047,"value":"buoyClicked = buoys.find((d) => d.pk === siteClicked).long_name","pinned":false,"hidden":false,"mode":"ojs"},{"id":5731,"value":"buoyDailyData[buoyDailyData.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1343,"value":"clickedSite = buoyDailyData.filter((d) => d.station === siteClicked)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1292,"value":"colors = new Map([\n [\"avg\", \"#5b6187\"],\n [\"thresh\", \"#FEDB67\"],\n [\"below\", \"#89119c\"], // actuals below forecast\n [\"above\", \"pink\"], // actuals above forecast\n [\"none\", \"lightblue\"],\n [\"Moderate\", \"#FEDB67\"],\n [\"Strong\", \"#f26722\"],\n [\"Severe\", \"#cd3728\"],\n [\"Extreme\", \"#7E1416\"],\n [\"noData\", \"#ddd\"],\n [\"seas\", \"pink\"]\n])\n// \"#FEDB67\", \"#f26722\", \"#cd3728\", \"#7E1416\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"HWsForDate = buoyDailyData.filter(\n (d) =>\n new Date(time1).toISOString().substring(0, 10) ===\n new Date(d.result_time).toISOString().substring(0, 10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1853,"value":"dayBeforeStart = {\n const b = Object.assign(focus[0]);\n const fistDate = new Date(b);\n\n return new Date(fistDate.setDate(fistDate.getDate() - 1))\n .toISOString()\n .substring(0, 10);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"\"https://t6r95rekqe.execute-api.us-east-1.amazonaws.com/dev/getDailySSTStats?startDate=\" +\n dayBeforeStart +\n \"&endDate=\" +\n limitsDelayed[1].toISOString().substring(0, 10) +\n \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"colorMHW = d3\n .scaleOrdinal()\n .domain([\"none\", \"Moderate\", \"Strong\", \"Severe\",\"Extreme\"])\n .range([\"#31a354\", \"#FEDB67\", \"#f26722\", \"#7E1416\", \"#cd3728\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"opacityMHW = d3\n .scaleOrdinal()\n .domain([\"none\", \"Moderate\", \"Strong\", \"Severe\", \"Extreme\"])\n// .range([0.9, 0.9, 0.9, 0.9, 0.9])","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"numFormat = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"timeFormat = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"// import { Scrubber } from \"@mbrownshoes/stylized-scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"// import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"// import { BC_Midres } from \"@mbrownshoes/how-i-start-maps-in-d3\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2331,"value":"// import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":3676,"value":"mutable p = new Date(time1).toISOString().substring(0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2784,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2786,"value":"alldates = d3.timeMonth\n .range(new Date(dateExtent[0]), new Date(dateExtent[1]))\n .map((d) => d.toISOString().substring(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1644,"value":"allmonths = [...new Set(mhwBarData.map((d) => d.date.slice(0, 7)))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4910,"value":"monthlyTots.filter((d) => d.date === \"2013-01\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4879,"value":"monthlyTots = {\n const out = [];\n allmonths.forEach((month) => {\n let t = 0;\n for (let i = 0; i < cats.length; i++) {\n let s = d3.sum(\n mhwBarData.filter((d) => {\n return +new Date(d.month) === +new Date(month);\n }),\n (d) => d[cats[i]]\n );\n // 15541891 is the total amount of points\n out.push({ date: month, [cats[i]]: s });\n t += s;\n // console.log(month, [cats[i]], s);\n // console.log(t);\n }\n // console.log(t);\n });\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5000,"value":"monthlyGrouped = {\n const out = [];\n groups.forEach((d) => {\n let sum = 0;\n d[1].forEach((d) => {\n sum += Object.values(d)[1];\n });\n // return sum;\n out.push({\n date: new Date(d[0]),\n [cats[0]]: d[1][0][cats[0]] / sum,\n [cats[1]]: d[1][1][cats[1]] / sum,\n [cats[2]]: d[1][2][cats[2]] / sum,\n [cats[3]]: d[1][3][cats[3]] / sum,\n [cats[4]]: d[1][4][cats[4]] / sum,\n noData: 0,\n sum: sum\n });\n });\n\n // remove current month's incomplete data with -999\n const corrected = out.map((d) => {\n if (\n new Date(d.date).toISOString().substring(0, 7) ===\n new Date().toISOString().substring(0, 7)\n ) {\n (d.none = 0),\n (d.Moderate = 0),\n (d.Strong = 0),\n (d.Extreme = 0),\n (d.Severe = 0),\n (d.noData = 1);\n }\n return d;\n });\n\n return corrected;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6252,"value":"monthlyGrouped[115]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6260,"value":"monthlyGrouped[115].date","pinned":true,"hidden":false,"mode":"ojs"},{"id":6247,"value":"new Date().toISOString().substring(0, 7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4881,"value":"cats = [\"none\", \"Moderate\", \"Strong\", \"Extreme\", \"Severe\", \"noData\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5012,"value":"groups = d3.groups(monthlyTots, (d) => +new Date(d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4657,"value":"mhwBarData = {\n // const raw = await FileAttachment(\"monthlyMHW@4.json\").json();\n const raw = tt;\n const out = [];\n Object.keys(raw).forEach((d) => {\n for (let i = 0; i < 1; i++) {\n let tot = raw[d].reduce((a, b) => a + b, 0);\n out.push({\n date: d.replace(/(\\d{4})(\\d{2})(\\d{2})/g, \"$1-$2-$3\"),\n month: d.replace(/(\\d{4})(\\d{2})(\\d{2})/g, \"$1-$2-$3\").slice(0, 7),\n none: raw[d][0],\n Moderate: raw[d][1],\n Strong: raw[d][2],\n Extreme: raw[d][3],\n Severe: raw[d][4]\n });\n }\n });\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4739,"value":"tt = fetch(\n \"https://raw.githubusercontent.com/HakaiInstitute/ssta_images/gh-pages/src/monthlyMHW.json\",\n { Method: \"GET\" }\n).then((response) => {\n return response.json();\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5750,"value":"dataSsta[\"202203\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5758,"value":"dataSsta[\"202207\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":5734,"value":"dataSsta = fetch(\n \"https://raw.githubusercontent.com/HakaiInstitute/ssta_images/gh-pages/src/monthly.json\",\n { Method: \"GET\" }\n).then((response) => {\n return response.json();\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5745,"value":"dataSstaOld = FileAttachment(\"monthly@7.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5870,"value":"import { Scrubber } from \"@mbrownshoes/stylized-scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}