31:[] 2f:{"title":"","cells":[{"id":910,"value":" window.onload = function (e) {\n console.log('win', 'loaded');\n return 10000;\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"Title = md`# Arctic: Melting Season 2018`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"{\n const input = html``;\n viewof Day.addEventListener(\"input\", event => input.value = event.value);\n input.addEventListener(\"input\", () => viewof Day.value = input.valueAsNumber);\n input.value = viewof Day.value;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"mutable status = { return {sh: screen.height, w: width} }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"status.haha = 17","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"DOM.download(await new Promise(resolve => canvas.toBlob(resolve)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"projector = {\n\n Day;\n Fullscreen;\n \n let \n ctx = target.getContext('2d'), \n d = new Date(2018, 0, Day),\n p = s => (\"00\" + s).slice(-2),\n map = document.querySelector(\"#map\"),\n ice = document.querySelector(\"#ice\"),\n smos = document.querySelector(\"#smos\"),\n trans = \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\n size = Fullscreen ? screen.height : width\n ;\n \n mutable ymd = `${d.getUTCFullYear()}-${p(d.getUTCMonth() +1)}-${p(d.getUTCDate())}`;\n\n ice.onerror = e => ice.src = trans;\n smos.onerror = e => smos.src = trans;\n \n //ctx.clearRect(0, 0, 1024, 1024);\n \n ctx.drawImage(map, 0, 0, 1024, 1024);\n ctx.drawImage(ice, 0, 0, 1024, 1024);\n \n ctx.font = 'bold 24px monospace';\n ctx.fillStyle = \"#eee\";\n ctx.fillText(ymd, 20, 34);\n\n ctx.strokeStyle = \"red\";\n ctx.beginPath();\n ctx.arc(mousePos.x, mousePos.y, 10, 0, 2 * Math.PI);\n ctx.stroke();\n \n //while (true) yield md`## ${ymd}`;\n return md`## ${ymd}`;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":920,"value":"cache_row = html`

\n ${ \n\n d3.range(0, 365, 1).map( n => {\n \n var span = html``;\n\n span.setAttribute('style', `\n\n display: inline-block;\n width: ${(width-365) / 365}px;\n background-color: #369;\n height: ${Math.random() < 0.8 ? 1 : 12}px;\n padding-right: 1px;\n\n `);\n return html`${span}`; \n } )\n \n }\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"cache_row_length = document.getElementById(\"row_cache\").childElementCount","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"tt = {\n\n var \n img = new Image(),\n url = `https://noiv.pythonanywhere.com/cors/smos/2018/smos2-${ymd}.png`,\n //url = `https://noiv.pythonanywhere.com/cors/smos/2018/smos2-2018-03-03.png`,\n trans = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'\n ;\n\n return new Promise ( (resolve, reject) => { \n \n img.width = 256;\n img.crossOrigin = 'anonymous';\n img.onload = () => resolve(img);\n img.onerror = reject; \n img.src = url;\n\n })\n .then( img => html`${img}` ) \n .catch( e => { console.log(e); img.src = trans; }) \n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"{\n const \n button = html``,\n prefix = (\n document.body.mozRequestFullScreen ? 'moz' :\n document.body.webkitRequestFullScreen ? 'webkit' :\n document.body.RequestFullScreen ? '' :\n 'error'\n ),\n listener = function (_) {\n\n if (document[prefix + \"FullScreenElement\"] === null){\n document.removeEventListener(prefix + \"fullscreenchange\", listener, false);\n mutable Fullscreen = false;\n\n } else {\n //console.log(\"FS detected\", screen.height);\n \n }\n \n }\n ;\n \n button.onclick = function () {\n document.addEventListener(prefix + \"fullscreenchange\", listener, false);\n document.querySelector(\"#target\")[prefix + \"RequestFullScreen\"]();\n mutable Fullscreen = true;\n }\n\n return button;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"mutable mousePos = ({x: width / 2, y: width / 2, text: \"lala\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"d3.select(\"#target\")\n/* \n .on(\"mouseover\", function (d, i) { console.log('over'); mutable mousePos.text = \"over\" })\n .on(\"mouseout\", function (d, i) { console.log('out'); mutable mousePos.text = \"out\"})\n .on(\"mouseenter\", function (d, i) { console.log('enter'); mutable mousePos.text = \"enter\"})\n .on(\"mouseleave\", function (d, i) { console.log('leave'); mutable mousePos.text = \"leave\"})\n .on(\"mousemove\", function (d, i) { console.log('move', d, i, d3.mouse(this)); let m = d3.mouse(this); mutable mousePos = {x: m[0], y: m[1], text: \"move\"}})\n */\n .on(\"wheel\", function (d, i) { console.log('move', d, i, d3.mouse(this)); viewof Day.value += (d3.event.wheelDelta > 0 ? -1 : 1); d3.event.preventDefault(); })","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"target = {\n\n let \n ctx, cvs, \n size = Fullscreen ? screen.height : width,\n factor = 1024 / size,\n listener = function (e) {\n //viewof Day.value += (e.deltaY > 0 ? 1 : -1);\n //e.preventDefault(); \n }\n ;\n\n if (!this) {\n cvs = DOM.context2d(1024, 1024, 1).canvas;\n cvs.id = \"target\";\n \n /*\n cvs.onmousemove = (e) => {\n mutable mousePos = {\n x: Math.floor(e.offsetX * factor) , \n y: Math.floor(e.offsetY * factor) \n };\n }\n addWheelListener(cvs, listener);\n */\n \n }\n\n (cvs || this).style.width = `${size}px`;\n (cvs || this).style.height = `${size}px`;\n\n while (true) yield (cvs || this);\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1007,"value":"DOM.download(await function rasterize(canvas) {\n\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n \n canvas.toBlob( (blob) => {\n image.src = URL.createObjectURL(blob);\n resolve(image);\n });\n \n return promise; \n\n}, null, \"Download as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"loader = {\n let div = html`\n

\n `\n yield div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"loaderXX = {\n let div = html`\n

\n `\n yield div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"_appendix = md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"CSS = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"import {H, d3, slider, addWheelListener, View, GIF, vegalite} from \"@arcticio/toolbox\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"viewof Day = new View(20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"mutable ymd = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"mutable Fullscreen = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"scrollHeight = document.documentElement.getBoundingClientRect().height\n// document.documentElement.scrollHeight \n// document.body.scrollHeight\n// https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"mutable scrollpos = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"mutable scrollpercent = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"scroller = {\n \n var ticking = false;\n\n window.addEventListener('scroll', function(e) {\n\n mutable scrollpos = window.scrollY;\n \n debugger;\n\n if (!ticking) {\n\n window.requestAnimationFrame(function() {\n debugger;\n mutable scrollpercent = document.body.scrollHeight / scrollpos;\n ticking = false;\n });\n\n ticking = true;\n\n }\n\n }, false);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"data = d3\n .csv(\"https://noiv.pythonanywhere.com/cors/jaxa-extent\")\n .then(data => data.map( (d, i) => { d.index = i; return d; } ))\n //.then( data => data.map( (o, i) => [i, ~~o['2018']]) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"data_0 = data[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"data_1 = {\n \n var result = [];\n \n data.forEach( (line, idx) => {\n d3.range(2002, 2019, 1).forEach( year => {\n result.push( \n { \n year: year, \n index: idx,\n day: ~~line.Day,\n utc: `${year}-${line.Month}-${line.Day}`, \n extent: line[year] === \"-9999\" ? NaN : ~~line[year] } \n )\n })\n });\n \n return result;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"first = vegalite({\n \n width: width,\n autosize: \"fit\",\n height: 100,\n \n data: {values: data_1},\n mark: \"tick\",\n \n encoding: {\n x: {field: \"extent\", type: \"quantitative\"}\n }\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"second = vegalite({\n \n // https://vega.github.io/vega/docs/schemes/#reference\n \n title: 'Arctic',\n \n width: width * 0.7,\n autosize: \"fit\",\n // ...(false && { autosize: \"fit\" }),\n height: 300,\n \n mark: \"line\",\n data: {values: data_1},\n \n transform: [\n { calculate: \"datum.extent / 1000000\", as: \"mextent\"},\n { filter: { field: \"year\", gt: 2010} }\n ],\n \n encoding: {\n \n x: { \n field: \"index\", type: \"ordinal\", //timeUnit: 'yearmonth', \n axis: {title: 'Years 2002 to 2018', tickCount: 12 }\n },\n \n y: { \n field: \"mextent\", type: \"quantitative\", \n axis: {title: 'Sea Ice Extent (mkm²)', tickCount: 21 },\n //scale: {\"zero\": false}\n },\n \n color: { field: \"year\", type: \"nominal\", scale: { scheme: \"dark2\"}}\n \n }\n \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"_labor = md`---\n## Labor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"images_row = html`\n ${ \n\n images.map( img => { \n img.width = Math.floor(width / images.length) -2 ;\n img.setAttribute('style', `\n \n border-radius: 15px;\n border: 1px solid #666;\n max-width: 128px;\n min-width: 12px;\n\n `);\n return html`${img}`; \n } ) \n \n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"images = {\n\n var \n stamps = d3\n .range(1, 10, 1)\n .map( n => `2018-03-${ ('00' + n).slice(-2) }`)\n ,\n urls = stamps\n //.map( stamp => `https://noiv.pythonanywhere.com/cors/smos/2018/smos2-${stamp}.png` )\n //.map( stamp => `https://noiv.pythonanywhere.com/cors/gfs/2018/gfs-${stamp}-00.png` )\n .map( stamp => `https://noiv.pythonanywhere.com/cors/amsr2/2018/amsr2-${stamp}.png` )\n ,\n result = urls.map( u => {\n var i = new Image;\n i.width = \"200\";\n i.src = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAE0lEQVR42mNk+P+/ngEPYBwZCgBarRPxaTpP3gAAAABJRU5ErkJggg==\";\n return i;\n })\n ;\n \n urls.forEach( (url, idx) => {\n \n //console.log(idx, url);\n \n var img = result[idx];\n img.crossOrigin = \"anonymous\";\n img.onload = () => {result[idx] = img; /* console.log( idx, 'load') */ };\n img.onerror = e => console.log('cell:images', e);\n img.src = url;\n \n });\n \n return result;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"image = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"animate = {\n \n // https://github.com/jnordberg/gif.js\n\n const button = html``;\n \n button.onclick = function () { \n \n image.src = \"\";\n\n var gif = new GIF({\n workers: navigator.hardwareConcurrency || 2,\n debug: false,\n dither: false,\n repeat: 0, // -1 => no repeat\n quality: 0, // lower => better\n width: 512,\n height: 512,\n background: \"#F00\",\n transparent: \"#F0F\"\n });\n \n // gif.abort()\n // gif.on(\"start\")\n \n images.forEach( img => {\n gif.addFrame(img, {copy: true, delay: 200, disposal: -1});\n });\n \n gif.on('progress', function(percent) {\n console.log('gif', percent);\n });\n\n gif.on('finished', function(blob) {\n \n var imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);\n //console.log(\"fin\", blob, imageUrl);\n image.src = imageUrl;\n \n });\n \n gif.render();\n \n };\n \n return button;\n \n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}