31:T6ff,title = { // let nonEmptyTimes = (recife) => { // let times = Array.from(new Set(coraisData.filter(c=>c.recife == recife).map(c=>c.time))); // times.sort() // return times // } // let mesSlot = html`

`; // // let mes = altTimeSlider(nonEmptyTimes(mutable recifeCurrent)); // // mesSlot.append(mes); let recife = select({ //title: 'Recife', options: { 'ARA': 'gray', 'ECO': 'gray', 'RFO': 'gray' }, onchange: objs => { mutable recifeCurrent = objs.select[objs.select.selectedIndex].label; //mesSlot.removeChild(mes); // let times = nonEmptyTimes(mutable recifeCurrent); // let curtime = mutable timeCurrent; // let value = 0; // while (value < times.length && times[value] < curtime) value++; // if (times[value] != curtime) { // if (value < times.length) mutable timeCurrent = times[value]; // else mutable timeCurrent = times[times.length-1]; // } //mes = altTimeSlider(times,value); //mesSlot.append(mes); } }) recife.style.width = "90px"; recife.style.display = "inline-block"; return html`

Visualizando a vida dos corais

Presença de organismos por mês em ${recife}`; // let indicador = select({ // title: 'Indicador da água', // options: { // 'Temperatura (C)': 'gray', // 'Luminosidade (Lux)': 'gray', // 'pH': 'gray' // }, // onchange: objs => { // mutable indicadorCurrent = objs.select[objs.select.selectedIndex].label // } // }) // indicador.style.width = "150px"; // indicador.style.display = "inline-block"; // return html`

${mesSlot} ${recife} ${indicador}

` }32:T1375,styles = html` `33:T859,speciesTable = function () { let table = html`

`; table.onclick = (e) => { selectSpecies(null); } let data = {"fishes":{name: "Peixes", total:0,rows:new Map()}, "corals":{name: "Corais", total:0,rows:new Map()}, "recruits":{name: "Recrutas", total:0,rows:new Map()}, "invertebrates":{name: "Invertebrados", total:0, rows:new Map()}}; let addMap = (map,name,count)=> { if (map.has(name)) map.set(name,map.get(name)+count); else map.set(name,count); } for (let pop of popData) { switch (pop.type) { case "fish": data.fishes.total += pop.adults; addMap(data.fishes.rows,pop.name, pop.adults); break; case "invertebrate": data.invertebrates.total += pop.adults; addMap(data.invertebrates.rows,pop.name, pop.adults); break; case "coral": data.corals.total += pop.adults; addMap(data.corals.rows,pop.name, pop.adults); if (pop.recruits) { data.recruits.total += pop.recruits; addMap(data.recruits.rows,pop.name, pop.recruits); } break; } } for (let type of ["corals", "recruits", "invertebrates", "fishes"]) { let datum = data[type]; let tablefilo = html`

`; let filo = html`${datum.name}${datum.total}` filo.onclick = (e) => { revela(type) } tablefilo.append(filo); for (let [name,count] of datum.rows) { let nome = name; if (!speciesInfo[name]) nome = `?? ${name}`; else nome = speciesInfo[name].nome; let row = html`${nome} ${count}`; row.onclick = (e) => { selectSpecies(name); e.stopPropagation(); } tablefilo.append(row); } table.append(html`

${tablefilo}

`); //table.append(html` `); } return html`

${table}

` }34:Tf33,draw3D = function () { let mouse = new THREE.Vector2(0,0); let mouseMoving = false; let mouseIsZoom = false; let raycaster = new THREE.Raycaster(); renderer.render( scene, camera ); renderer.domElement.style.cursor = "all-scroll"; let setZoom = () => { let v = camera.position.clone(); let l = v.length(); v.normalize(); v.multiplyScalar(zoomScale.getValue()*1.5+1.5); camera.position.set(v.x,v.y,v.z); camera.lookAt( scene.position ); renderer.render( scene, camera ); } setZoom(); let raycast = function (e) { let [w,h] = [renderer.domElement.clientWidth,renderer.domElement.clientHeight] let pos = new THREE.Vector3(e.offsetX/w*2-1, -e.offsetY/h*2+1,0.5); raycaster.setFromCamera( pos, camera ); let intersects = raycaster.intersectObject( population, true ); for (let i = 0; i < intersects.length; i++) { let name = intersects[i].object.name if (!transparentPixel(name,intersects[i].uv)) { return name; } } return null; } // renderer.domElement.onscroll = ctxOverlay.canvas.onscroll = (e) => { // e.stopPropagation() // } renderer.domElement.onwheel = ctxOverlay.canvas.onwheel = (e) => { let v = zoomScale.getValue(); v += e.deltaY * 0.001; zoomScale.setValue (v); setZoom(); e.preventDefault(); e.stopPropagation(); } renderer.domElement.onmousedown = (e) => { mouse.set(e.offsetX,e.offsetY); mouseMoving = 0; mouseIsZoom = zoomScale.setMouse(e.offsetX,e.offsetY); if (mouseIsZoom) setZoom(); } renderer.domElement.onmousemove = (e) => { if (zoomScale.mouseInside(e.offsetX,e.offsetY)) { renderer.domElement.style.cursor = "pointer"; } else { if (raycast(e)) renderer.domElement.style.cursor = "pointer"; else renderer.domElement.style.cursor = "all-scroll"; } if (e.buttons) { if (mouseIsZoom) { zoomScale.setMouse(e.offsetX,e.offsetY); zoomScale.draw(); setZoom(); return; } let newmouse = new THREE.Vector2(e.offsetX,e.offsetY); let dx = newmouse.x - mouse.x; let dy = newmouse.y - mouse.y; mouseMoving += Math.abs(dx+dy); let v = camera.position.clone(); let l = v.length(); v.normalize(); if (Math.abs(dx) > Math.abs(dy)) { let axis = new THREE.Vector3(0,1,0); let angle = dx * 0.005; v.applyQuaternion( new THREE.Quaternion().setFromAxisAngle(axis,angle) ) } else { let axis = new THREE.Vector3(0,1,0).cross(v).normalize(); let azimuth = v.angleTo(new THREE.Vector3(0,1,0)) let angle = dy * 0.005; if (angle + azimuth > Math.PI/2*1.05) angle = Math.PI/2*1.05 - azimuth; else if (angle + azimuth < Math.PI/2*0.2) angle = -azimuth+Math.PI/2*0.2; v.applyQuaternion( new THREE.Quaternion().setFromAxisAngle(axis,angle) ) //v.y = Math.max(Math.min(v.y,0.9),0); } v.normalize(); v.multiplyScalar(l); camera.position.set(v.x,v.y,v.z); camera.lookAt( scene.position ); mouse = newmouse; renderer.render( scene, camera ); } } renderer.domElement.onmouseup = (e) => { if (mouseMoving > 1 || mouseIsZoom) return; selectSpecies (raycast(e)) console.log(e) sobe() if (e!==null){camera.position= e.position}; } let overlayCanvas = ctxOverlay.canvas; let div = html`

`; renderer.domElement.position="absolute"; overlayCanvas.style.position="absolute"; renderer.domElement.style.top=0; renderer.domElement.style.left=0; overlayCanvas.style.top=0; overlayCanvas.style.left=0; overlayCanvas.style["z-index"]=10; div.append(renderer.domElement); div.append(overlayCanvas); return div }35:T83b,// // Modifies the sprite material shader so as to draw an outline border // function onBeforeCompile( shader ) { // code based on: https://www.daniel-buckley.com/blog/2017/12/6/dev-diary-research-report-2d-sprite-outline-shaders shader.uniforms.outlineColor = { value : new THREE.Color(0xff0000) }; shader.uniforms.outlineThickness = { value: 5 }; shader.uniforms.resolution = { value: new THREE.Vector2( drawingWidth, height ) }; shader.fragmentShader = 'uniform vec3 outlineColor;\n' + shader.fragmentShader; shader.fragmentShader = 'uniform float outlineThickness;\n' + shader.fragmentShader; shader.fragmentShader = 'uniform vec2 resolution;\n' + shader.fragmentShader; shader.fragmentShader = shader.fragmentShader.replace( '#include ', [ '#ifdef USE_MAP', ' vec4 texelColor = mapTexelToLinear( texture2D( map, vUv ) );', ' texelColor = mapTexelToLinear( texelColor );', ' vec2 texel = vec2( 1.0 / resolution.y, 1.0 / resolution.y );', ' #define OFFSET_COUNT 8', ' vec2 offsets[OFFSET_COUNT];', ' offsets[0] = vec2( 0, 1 );', ' offsets[1] = vec2( 0, -1 );', ' offsets[2] = vec2( 1, 0 );', ' offsets[3] = vec2( -1, 0 );', ' offsets[4] = vec2( -1, 1 );', ' offsets[5] = vec2( 1, -1 );', ' offsets[6] = vec2( 1, 1 );', ' offsets[7] = vec2( -1, -1 );', '#ifdef INSET_OUTLINE', ' float a = 1.0;', ' for( int i = 0; i < OFFSET_COUNT; i ++ ) {', ' float val = texture2D( map, vUv + texel * offsets[i] * outlineThickness ).a;', ' a *= val;', ' }', ' texelColor.rgb = mix( outlineColor, texelColor.rgb, a );', '#else', ' float a = 0.0;', ' for( int i = 0; i < OFFSET_COUNT; i ++ ) {', ' float val = texture2D( map, vUv + texel * offsets[i] * outlineThickness ).a;', ' a = max(a, val);', ' }', ' texelColor = mix( vec4(outlineColor, a), texelColor, texelColor.a );', '#endif', ' diffuseColor *= texelColor;', '#endif' ].join( '\n' ) ); }36:T46f,lights = { let lights = new THREE.Group(); lights.add (new THREE.AmbientLight( 0x444444 )); let spotLight = new THREE.SpotLight( 0x555555 ); spotLight.name = 'Spot Light'; spotLight.angle = Math.PI / 3; spotLight.penumbra = 0.3; spotLight.position.set( 8, 10, 5 ); spotLight.castShadow = true; spotLight.shadow.camera.near = 8; spotLight.shadow.camera.far = 200; spotLight.shadow.mapSize.width = 256; spotLight.shadow.mapSize.height = 256; spotLight.shadow.bias = -0.002; spotLight.shadow.radius = 4; lights.add( spotLight ); let dirLight = new THREE.DirectionalLight( 0xFFFFFF, 1 ); dirLight.name = 'Dir. Light'; dirLight.position.set( 3, 12, 17 ); dirLight.castShadow = true; dirLight.shadow.camera.near = 0.1; dirLight.shadow.camera.far = 500; dirLight.shadow.camera.right = 17; dirLight.shadow.camera.left = - 17; dirLight.shadow.camera.top = 17; dirLight.shadow.camera.bottom = - 17; dirLight.shadow.mapSize.width = 512; dirLight.shadow.mapSize.height = 512; dirLight.shadow.radius = 4; dirLight.shadow.bias = -0.002; lights.add( dirLight ); return lights; }37:T60f,zoomScale = { let ctx = ctxOverlay; let [w,h] = [drawingWidth, height]; let padding = 10; let [dx,dy] = [20,50]; let [x0,y0] = [w-dx-padding,h-padding-dy]; let value = 0.2; let margin = 5; let thick = 2; let draw = () => { ctx.clearRect(0,0,w,h); ctx.globalAlpha = 0.4; ctx.fillStyle = 'white'; ctx.fillRect(x0,y0,dx,dy); ctx.globalAlpha = 1.0; ctx.strokeStyle = 'black'; ctx.lineWidth = thick; ctx.beginPath(); ctx.moveTo(x0+margin, y0+margin); ctx.lineTo(x0+dx-margin, y0+margin); ctx.moveTo(x0+dx/2, y0+margin); ctx.lineTo(x0+dx/2, y0+dy-margin); ctx.moveTo(x0+margin, y0+dy-margin); ctx.lineTo(x0+dx-margin, y0+dy-margin); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = 'red'; let vy = y0+margin+(dy-margin*2)*value; ctx.moveTo(x0+margin, vy); ctx.lineTo(x0+dx-margin, vy); ctx.stroke(); } let mouseInside = function (x,y) { if (x < x0 || x > x0+dx || y < y0 || y > y0+dy) { return false; } return true; } let setMouse = function (x,y) { if (!mouseInside (x,y)) return false; if (y < y0+margin) value = 0; else if (y > y0+dy-margin) value = 1; else value = (y - (y0+margin))/(dy-margin*2); draw(); return true; } let setValue = (v) => { value = Math.min(1,Math.max(0,v)); draw(); } let getValue = () => value; draw() return {draw : draw, mouseInside : mouseInside, setMouse : setMouse, setValue : setValue, getValue : getValue }; }38:T3d5f,d3PlotEspecieIndicador = function (recife, species, indicador) { // Geometric parameters let [w,h,hTime] = [width-230,164,50]; let margin = {left:40, right:40, top:10, bottom: 30, bottomTime: 20}; // The chart container let chartContainer = html`

`; // Find what times are defined for the recife in coraisData let nonEmptyTimesSet = new Set(coraisData.filter(c=>c.recife == recife).map(c=>c.time)); // Map times to the appropriate water indicator data let timeMap = new Map(); let indicadorDomain = []; for (let a of aguaData) { if (a.recife != recife) continue; let obj = (timeMap.has (a.time)) ? timeMap.get(a.time) : {time:a.time}; //nonEmptyTimes.add(a.time); obj[a.indicador] = a.value; indicadorDomain.push(a.value); timeMap.set(a.time,obj) } // Transform the times to an ordered array let nonEmptyTimes = Array.from(nonEmptyTimesSet); nonEmptyTimes.sort() // Select an appropriate default time let defTime = mutable timeCurrent; if (!nonEmptyTimesSet.has(defTime)) { defTime = nonEmptyTimes[0]; mutable timeCurrent = defTime; } let keys = new Set(); if (speciesInfo[species]) { let animalType = speciesInfo[species].tipo; let [cdata,yspec] = ( {"peixe" : [peixesData, { "field": "size", "legend": {"title": species } }], "coral": [coraisData, { "field": "tipo", "legend": {"title": species } }], "invertebrado": [invertebradosData, { "field": "species", "legend": {"title": "Invertebrado"} }] })[animalType]; for (let c of cdata) { if (c.recife == recife && c.species == species) { let obj = (timeMap.has (c.time)) ? timeMap.get(c.time) : {time:c.time}; let key = c [yspec.field]; keys.add(key) obj[key] = c.value; timeMap.set(c.time,obj) } } } let data = Array.from(timeMap).map(([key,value]) => value); data.sort((a,b)=> a.time-b.time); // // The x scale // let x = d3.scaleBand() .domain(nonEmptyTimes) .range([margin.left, w - margin.right]) .padding(0.4); let grid = g => g .attr("stroke", "white") .call(g => g.append("g") .selectAll("line") .data(x.domain()) .join("line") .attr("x1", d => x(d) + x.bandwidth()/2) .attr("x2", d => x(d) + x.bandwidth()/2) .attr("y1", margin.top) .attr("y2", h - margin.bottom)); let formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("pt"); const svg = d3.create("svg") .attr("width", w) .attr("height", h) let filter = svg.append("defs").append("filter") .attr("id", "dropshadow") .append("feDropShadow") .attr("dx",0.2) .attr("dy",1) .attr("stdDeviation",1) .attr("flood-color",'gray') let background = svg.append("g"); background.append("rect") .attr("fill", "#FF7A00") .attr("opacity", 0.2) .attr("x", margin.left) .attr("y", margin.top) .attr("width", w-margin.left-margin.right) .attr("height", h-margin.top-margin.bottom); background.call(grid); const svgTime = d3.create("svg") .attr("width", w) .attr("height", hTime); // // The x Axis and labels // let firstYear = new Set(); let yearTicks = new Set(); nonEmptyTimes.forEach(t => { let year = Math.trunc(t); if (firstYear.has(year)) return; firstYear.add(year); yearTicks.add(t) }) let xrange = x.range(); let shortLabels = (xrange[1]-xrange[0])/nonEmptyTimes.length < 24; let xAxis = g => g .attr("transform", `translate(0,${hTime - margin.bottomTime})`) .call(d3.axisTop(x) .tickFormat((d,i) => { let {ano,mes} = timeToAnoMes(d) return shortLabels && !yearTicks.has(d) ? mes[0] : mes; })) let xAxisYear = g => g .attr("transform", `translate(0,${hTime - margin.bottomTime})`) .call (d3.axisTop(x) .tickFormat((d,i) => { if (!yearTicks.has(d)) return ""; let {ano,mes} = timeToAnoMes(d) return `${ano}` })) let curTimeRule = svgTime.append("g").append("line") .attr("transform", `translate(0,${hTime - margin.bottomTime})`) .style ("stroke", "currentColor") .style ("opacity", 0.3) .style ("stroke-width", "6") .attr("x1", x.range()[0]) .attr("y1", -3) .attr("y2", -3) let monthAxis = svgTime.append("g").attr("class", "timeaxis").call(xAxis); let yearAxis = svgTime.append("g").attr("class", "timeaxis").call(xAxisYear); let pointer = svgTime.append("g") .append("path") .attr ("class", "timeCursor") .attr("d", "M-2,0 l0,-6 l4,0 l0,30 l-4,0 z") // Function to highlight the current time let highlightTime = function (time) { monthAxis.selectAll(".tick text") .style("font-weight", d => d == time ? "bold" : "normal") .style("font-size", d => d == time ? "120%" : "100%"); yearAxis.selectAll(".tick text") .style("font-weight", d => d == time ? "bold" : "normal") .style("font-size", d => d == time ? "120%" : "100%") .attr("dy","-1em"); curTimeRule.attr("x2", x(time)+x.bandwidth()*0.5); pointer.attr("transform", `translate(${x(time)+x.bandwidth()*0.5},${hTime - margin.bottomTime})`); } // The time cursor pointer.call( d3.drag() .on("drag", function () { d3.select(this) .attr("transform", `translate(${d3.event.x},${hTime - margin.bottomTime})`) }) .on("end", function () { let time = 0; let closest = 1e10; for (let t of nonEmptyTimes) { let dist = Math.abs(x(t)+x.bandwidth()*0.5 - d3.event.x); if (dist < closest) { time = t; closest = dist; } } highlightTime(time) mutable timeCurrent = time; }) ); highlightTime (defTime); svgTime.selectAll(".timeaxis .tick") .style("cursor", "pointer") .on ("click", (d) => { highlightTime(d); mutable timeCurrent = d; }); // // The legend for the species data // let legend = html`

`; // A tooltip element general let tooltip = d3.select(chartContainer).append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color","white") .style("border", "solid") .style("border-color","#FF7A00") .style("border-width", "2px") .style("border-radius", "5px") .style("padding-right", "3px") .style("padding-left", "3px") .style("min-width", "40px"); // // Draws the whitening (branqueamento) dots // let plotBranqueamento= function (species) { let bdata = nonEmptyTimes.map(t => ({time: t, value: getBranqueamento(t)/7})); let branqueamento = svg.append("g") .attr("class", "branqueamento") branqueamento.append("line") .attr("x1", xrange[0]) .attr("x2", xrange[1]) .attr("y1",h-margin.bottom/2) .attr("y2",h-margin.bottom/2) let branqueamentoColor = a => { let [r,g,b] = [255,127+a*128,a*255]; return `rgb(${r},${g},${b})` } let branqueamentoTitle = d => { let i = +Math.ceil(d*7); return ["0", "<5%", "6-10%", "11-20%","21-40%","41-60%","61-80%","81-100%"][i] } let branqueamentoTooltip = circle => { circle .on("mouseover", function(d) { let [x,y]=[d3.event.offsetX,d3.event.offsetY] tooltip .style("top", `${y+50}px`) .style("left",`${x+120}px`) tooltip.style("visibility", "visible") .html(`

${branqueamentoTitle(d.value)}`); }) .on("mousemove", function() { let [x,y]=[d3.event.offsetX,d3.event.offsetY] tooltip .style("top", `${y+50}px`) .style("left",`${x+120}px`) }) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }); } branqueamento .selectAll("circle") .data(bdata) .join("circle") .attr("stroke", "rgb(255,127,0)") .attr("stroke-width", 1) .attr("fill", d => branqueamentoColor(d.value)) .attr("cx", d => x(d.time)+x.bandwidth()*0.5) .attr("cy", h-margin.bottom/2) .attr("r", 4) .call(branqueamentoTooltip) //.append("title") //.text(d =>branqueamentoTitle(d.value)); let legData = [0,0.25,0.5,0.75,1]; let hl=55; let xb = d3.scaleLinear() .domain([0,1]) .range([4, 80]); let branqueamentoLegend = d3.create("svg") .attr("class", "branqueamento") .attr("width", 100) .attr("height", hl); branqueamentoLegend.append("text") .text("Branqueamento(%)") .attr("y", hl-40); branqueamentoLegend.append("line") .attr("x1", xb(0)) .attr("x2", xb(1)) .attr("y1",hl-margin.bottom/2) .attr("y2",hl-margin.bottom/2) let branqueamentoItems = branqueamentoLegend .selectAll("g") .data(legData) .join("g"); branqueamentoItems .append("circle") .attr("stroke", "rgb(255,127,0)") .attr("stroke-width", 1) .attr("fill", branqueamentoColor) .attr("cx", d => xb(d)) .attr("cy", hl-margin.bottom/2) .attr("r", 4); branqueamentoItems .append("text") .style("text-anchor", "middle") .attr("fill", 'black') .attr("x", d => xb(d)) .attr("y", hl-margin.bottom/2-10) .text(d=>`${d*100}`) legend.append(branqueamentoLegend.node()) } let plotSpecies = function (species) { // // The bar chart for the species // keys = Array.from(keys); // Aggregate the bars into series let series = d3.stack() .keys(keys) .value((d,key) => d[key] || 0) (data) .map((d,i) => (d.forEach(v => v.key = keys[i]), d)); // The species y scale let y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .rangeRound([h - margin.bottom, margin.top]); // The color palette let colorPalette = [ "rgb(255,122,0)", "rgb(197,95,0)", "#7B3D04", "green", "yellow" ]; // The series color mapping let color = d3.scaleOrdinal() .domain(series.map(d => d.key)) .range(colorPalette) .unknown("#ccc") // The tooltip let stackTooltip = rect => { rect .on("mouseover", function(d) { let [x,y]=[d3.event.offsetX,d3.event.offsetY] tooltip .style("top", `${y+50}px`) .style("left",`${x+120}px`) tooltip.style("visibility", "visible") .html(`

${d.key}: ${formatValue(d.data[d.key])}`); }) .on("mousemove", function() { let [x,y]=[d3.event.offsetX,d3.event.offsetY] tooltip .style("top", `${y+50}px`) .style("left",`${x+120}px`) }) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }); } // The stacked bars svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(d.data.time)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .call(stackTooltip); // .append("title") // .text(d => `${d.key} ${formatValue(d.data[d.key])}`); // The species y axis let yAxis = g => g .attr("class", "species") .attr("transform", `translate(${w-margin.right},0)`) .call(d3.axisRight(y).ticks(null, "s")); svg.append("g") .call(yAxis); // Populate the legend panel with the appropriate title and swatches //legend.append(html`

${speciesInfo[species].nome}

`); legend.append(html`

${speciesInfo[species].nome}

${gotoDescIcon}

`); legend.append(swatches({ color: color, columns: "100px" })); } if (speciesInfo[species]) { plotSpecies (species); if (speciesInfo[species].tipo == "coral") plotBranqueamento(species) } let plotAgua = function (indicador) { // // Create a scale for the currently selected indicator // let yAgua = d3.scaleLinear().rangeRound([h - margin.bottom, margin.top]); let yAguaOptions = plotOptionsAgua[indicador]; if (yAguaOptions) { yAgua.domain(yAguaOptions.scale.domain); } else { yAgua.domain([0, d3.max(indicadorDomain)]) } // Remove previous plot if any svg.selectAll(".agua").remove(); // The tooltip let aguaTooltip = rect => { rect .on("mouseover", function(d) { let [x,y]=[d3.event.offsetX,d3.event.offsetY] tooltip .style("top", `${y+50}px`) .style("left",`${x+120}px`) .style("border-color","#38a0e8") tooltip.style("visibility", "visible") .html(`

ok ${d}`) console.log(d); }) .on("mousemove", function() { let [x,y]=[d3.event.offsetX,d3.event.offsetY] tooltip .style("top", `${y+50}px`) .style("left",`${x+120}px`) }) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }); } // // The line chart for the selected water indicator // let aguaLine = d3.line() .defined(d => !isNaN(d[indicador])) .x(d => x(d.time)) .y(d => yAgua(d[indicador])) let pt = svg.append("path") .attr("class", "agua") .datum(data.filter (d=>nonEmptyTimesSet.has(d.time))) // .attr("stroke", "#38C0F8") // .attr("stroke-width", 3) pt.attr("fill", "none") .attr("transform", `translate(${0.5*x.bandwidth()},0)`) .style("filter", "url(#dropshadow)") .attr("d", aguaLine) .datum(d => d) .join("rect") .call(aguaTooltip); //.datum(d =>x(d[0].time)) //.join("rect") //.call(aguaTooltip) ; // The y axis for the water indicator let yAguaAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yAgua).ticks(null, "s")) svg.append("g") .attr("class", "agua") .call (yAguaAxis); } plotAgua(mutable indicadorCurrent); // The water indicator selector let indicadorMenu = html`

Dados Ambientais

`; d3.select(indicadorMenu).selectAll("div") .data(['Temperatura (C)', 'Luminosidade (Lux)', 'pH']) .join("div") .attr ("class", "indicadorMenuItem") .classed ("selected", d => d == mutable indicadorCurrent) .style("white-space","nowrap") .style("overflow", "hidden") .style("text-overflow", "ellipsis") .on ("click", d => { mutable indicadorCurrent = d; plotAgua(d); d3.select(indicadorMenu).selectAll("div.indicadorMenuItem") .classed ("selected", d => d == mutable indicadorCurrent) }) .text(d => d); // Return all components packed into one div legend.style.width = "100px"; legend.style.display = "inline-block"; legend.position = "relative"; legend.style ["vertical-align"] = "top"; let chart = svg.node(); chart.style.display = "inline-block"; chartContainer.append(html`

${svgTime.node()}

`); chartContainer.append(html`

${indicadorMenu}${chart}${legend}

`); return chartContainer }39:T44e,popTableCSV = { let corais = coraisData.filter(c => c.time == timeCurrent && c.recife == recifeCurrent); let crows = corais.map (c => [`"${c.species.trim()}"`, "coral", speciesInfo[c.species].tamanho, c.tipo=="colonias" ? c.value : 0, c.tipo=="recrutas" ? c.value : 0].join(",")) let peixes = peixesData.filter(c => c.time == timeCurrent && c.recife == recifeCurrent); let prows = peixes.map (c => [`"${c.species.trim()}"`, "fish", peixeSize[c.size], c.value, 0].join(",")); let invertebrados = invertebradosData.filter(c => c.time == timeCurrent && c.recife == recifeCurrent); let irows = invertebrados.map (c => [`"${c.species.trim()}"`, "invertebrate", speciesInfo[c.species].tamanho, c.value, 0].join(",")); return [`"name","type","size","adults","recruits"`].concat(crows).concat(prows).concat(irows).join("\n") }3a:T745,layout = { let floorspecs = []; let seaspecs = []; for (let {name,type,size,adults,recruits} of popData) { if (type != "fish") { if (adults) floorspecs.push ({type:name,size:size,count:adults}) if (recruits) floorspecs.push ({type:name,size:3,count:recruits}) } else { seaspecs.push ({type:name,size:size,count:adults}) } } let options = { sizeToRadius : sizeToRadius, fillRatio: 0.8, treemapPadding : 0.0, clusterPadding : 0.0 } //let nodes = rectLayout (floorspecs, 100, 100, options).nodes; let nodes = circleLayout (floorspecs, 100, options).nodes; let floorNodes = nodes.map (node => { let entry = getImageEntry(node.type); let scale = sizeToRadius(node.size) / 80; let spread = sizeToRadius(node.size)/node.r; let spreadRadius = 0.7 //spread / 3; // Larger populations are spread more widely let bottom = entry.ymax - 20; let visible = (bottom-entry.img.height/2)/entry.img.height*scale; return { entry : entry, name: node.type, scale : scale, //x : (node.x/100-0.5)*spreadRadius, x : (node.x/50)*spreadRadius, y : -0.5+visible, //z : (node.y/100-0.5)*spreadRadius z : (node.y/50)*spreadRadius } }) //return floorNodes; nodes = rectLayout (seaspecs, 100, 100, options).nodes; let seaNodes = nodes.map (node => { let entry = getImageEntry(node.type); let scale = sizeToRadius(node.size) / 80; //let scale = node.r / 40 // console.log (sizeToRadius(node.size)/node.r); let angle = node.x / 100 * Math.PI * 2; let radius = randomValue (0.4,1.3); return { entry : entry, scale : scale, name: node.type, x : radius*Math.cos(angle), y : node.y/100*0.9-0.3, z : radius*Math.sin(angle) } }) return floorNodes.concat(seaNodes) }3b:T461,imgDb = { let db = []; let n = attachments.length; let i = 0; for (let a of attachments) { mainDisplay.innerHTML = ``; mutable stepLoading= ++i/n; JSON.parse(await a.text()).map((entry,num) => { afterOnload(entry.img).then(img => { entry.img = img; entry.shadowImg = /*entry.img;/*/shadowImg(img);/**/ entry.name = entry.filename.split(".")[0]; entry.tex = textureFromImage (entry.shadowImg); entry.mat = new THREE.SpriteMaterial( { map: entry.tex, color: 0xffffff, sizeAttenuation : true, fog : true } ); entry.highlightMat = entry.mat.clone(); entry.highlightMat.defines = { INSET_OUTLINE: 1 } entry.highlightMat.onBeforeCompile = onBeforeCompile; entry.lowlightMat = entry.mat.clone(); entry.lowlightMat.opacity = 0.2 }); return entry }).forEach (x => db.push (x)) } mutable stepLoading = false; return db }3c:T408,getImageEntry = { let norm = (s) => s.toLowerCase().replace(/\s/g, ""); let qmark = await FileAttachment("qmark2.png").image(); let qmarktex = textureFromImage (qmark); let qmarkmat = new THREE.SpriteMaterial( { map: qmarktex, color: 0xffffff, sizeAttenuation : true, fog : true } ); let lowlightMat = qmarkmat.clone(); lowlightMat.opacity = 0.2; let unknownEntry = { filename:"qmark.png", xmin: 0, ymin: 0, xmax: 199, ymax: 199, img: qmark, name: "qmark", tex : qmarktex, mat: qmarkmat, highlightMat: qmarkmat, lowlightMat: lowlightMat }; let m = new Map() for (let i of imgDb) m.set (norm(i.name), i) return (name) => { if (speciesInfo [name]) name = speciesInfo[name].imgName; if (!name) return unknownEntry; name = norm(name); if (m.has (name)) return m.get(name) else return unknownEntry } }3d:Te2c,wavesOver =(fill = "#CCC",fill_opacity = "1")=>{ let svg= ` ` return html`${svg}`; }3e:T57b,function changeProgress(to, time = 0.5) { if(to == false){return null} let text = "Carregando..." let primaryColor = "white"; let secundaryColor = "#ccc" let style = html`` let main = html`

${text}
${wavesOver()}

${text}
${wavesOver(primaryColor)}

` let mainProgress = main.querySelector(".text-progress .overlay");//get the overlayed element //defaut transition duration is 0.5 second var currentWidth = parseInt(mainProgress.style.width); //get the current width of overlayed element if (!currentWidth) //in case width is null currentWidth = 0; mainProgress.style.transition = Math.abs(time * (to - currentWidth) / 100) + "s linear"; mainProgress.style.width = to + "%"; return main }3f:[{"id":"da843be28a6a353451655c26b46ad86d3a89fcd885c8cf7c484b1e50afe24aab7db327da62117e8fb0e71d8585ff87859123aac8745fd55eb39290db0a493b36","href":"https://static.observableusercontent.com/files/da843be28a6a353451655c26b46ad86d3a89fcd885c8cf7c484b1e50afe24aab7db327da62117e8fb0e71d8585ff87859123aac8745fd55eb39290db0a493b36","name":"qmark2.png","type":"image/png","lastModified":1590412705423.51,"size":1576},{"id":"7738868110ce62bcadc1a22cd22623c13048cbc67678db4d69c9fb9a08bfdc98e0d8c8112d9c4f43ccd312ed80b7392b1757a9400a564cec6202a5f43d33cb27","href":"https://static.observableusercontent.com/files/7738868110ce62bcadc1a22cd22623c13048cbc67678db4d69c9fb9a08bfdc98e0d8c8112d9c4f43ccd312ed80b7392b1757a9400a564cec6202a5f43d33cb27","name":"images61-65.json","type":"application/json","lastModified":1590412705423.51,"size":1532824},{"id":"fc17f1cb1df2ba5cdb26e38c31b1823afbc377f658498a2d2e2de1cf68942fdd2c743f6b4105301be362f2e9f2e79ca0f803f3b06e97c6bf8262842695678c39","href":"https://static.observableusercontent.com/files/fc17f1cb1df2ba5cdb26e38c31b1823afbc377f658498a2d2e2de1cf68942fdd2c743f6b4105301be362f2e9f2e79ca0f803f3b06e97c6bf8262842695678c39","name":"images41-60@1.json","type":"application/json","lastModified":1590412705423.51,"size":6106267},{"id":"b0b91167df6ddbe2679af6f7b2208e620e8f2770eb5790525eeb41c2c1854d35f80fa00fb5f7ef3671cc22efbb3cc26ea24c934567ecd463efe6599c36e19cea","href":"https://static.observableusercontent.com/files/b0b91167df6ddbe2679af6f7b2208e620e8f2770eb5790525eeb41c2c1854d35f80fa00fb5f7ef3671cc22efbb3cc26ea24c934567ecd463efe6599c36e19cea","name":"images21-40@1.json","type":"application/json","lastModified":1590412705423.51,"size":4077389},{"id":"46a902694cfbe311b5ddf6b405150f91d88f20dc5d8bb42862476a93d76b4f68b4e4e2c75f130ca863b7337090da8796540c8dd6fa543a52bbede00a5051c62f","href":"https://static.observableusercontent.com/files/46a902694cfbe311b5ddf6b405150f91d88f20dc5d8bb42862476a93d76b4f68b4e4e2c75f130ca863b7337090da8796540c8dd6fa543a52bbede00a5051c62f","name":"images1-20@1.json","type":"application/json","lastModified":1590412705423.51,"size":4174602},{"id":"e9d8974e4be07d2360bdad31d10ae8a5a3472652e961abb2405bbc26275fbb147d78b5b23d83610b6e6d0aeaf43237e20d1bc8e84df952897f3cf1299125766a","href":"https://static.observableusercontent.com/files/e9d8974e4be07d2360bdad31d10ae8a5a3472652e961abb2405bbc26275fbb147d78b5b23d83610b6e6d0aeaf43237e20d1bc8e84df952897f3cf1299125766a","name":"Nomenclatura - Visualização@4.csv","type":"text/csv","lastModified":1590412705423.51,"size":11344},{"id":"d9071ffe2ab165cac868a892bbab8a8e0acfbc454c36c246847b9137a69af9966259679f3eb23056e63616f98ed6cc59df1a3fb9812eed5d1e27d365b2680d7c","href":"https://static.observableusercontent.com/files/d9071ffe2ab165cac868a892bbab8a8e0acfbc454c36c246847b9137a69af9966259679f3eb23056e63616f98ed6cc59df1a3fb9812eed5d1e27d365b2680d7c","name":"external-link-symbol.svg","type":"application/xml","lastModified":1590412705423.51,"size":2135},{"id":"cb75f9fd0d9de134081f7775d2da31835464404a7623666805843b2390413a0aa632616d6b907972dbcff4b9ab6789dba5092b3063034d9039f9b4bc98d7776f","href":"https://static.observableusercontent.com/files/cb75f9fd0d9de134081f7775d2da31835464404a7623666805843b2390413a0aa632616d6b907972dbcff4b9ab6789dba5092b3063034d9039f9b4bc98d7776f","name":"coralDb@2.json","type":"application/json","lastModified":1590412705423.51,"size":80346},{"id":"e0c4c456f12d4d036a26d2a0dd3ac363e9e073fa60be6b6712ceac1ba3d3646d348f374a99b5ca200658fee3aabd330bc22fbfcccb5ffc98ad67d091dc105220","href":"https://static.observableusercontent.com/files/e0c4c456f12d4d036a26d2a0dd3ac363e9e073fa60be6b6712ceac1ba3d3646d348f374a99b5ca200658fee3aabd330bc22fbfcccb5ffc98ad67d091dc105220","name":"seatexture.jpg","type":"image/jpeg","lastModified":1590412705423.51,"size":19026},{"id":"fca7ae0e44b2985deebb82e5a7893541eb632595db486a916bf42fd991e32c4a761c84b0e7bbd6ceaf05cd7aee8a0f9c9f6a276b882adc8109acec0625a5a230","href":"https://static.observableusercontent.com/files/fca7ae0e44b2985deebb82e5a7893541eb632595db486a916bf42fd991e32c4a761c84b0e7bbd6ceaf05cd7aee8a0f9c9f6a276b882adc8109acec0625a5a230","name":"tileableSand.jpg","type":"image/jpeg","lastModified":1590412705423.51,"size":642381},{"id":"1b6b2c4f56ef2ac3e85711c4a14328488a9581877287c2135ff298e0e03a54a2c9bf3fa85dbc4182295580cb80a53804f43a892189ba69a4a05fbf8968d6255f","href":"https://static.observableusercontent.com/files/1b6b2c4f56ef2ac3e85711c4a14328488a9581877287c2135ff298e0e03a54a2c9bf3fa85dbc4182295580cb80a53804f43a892189ba69a4a05fbf8968d6255f","name":"zoomout.jpeg","type":"image/jpeg","lastModified":1597368708618.838,"size":118861}] 2f:{"title":"Coral Vivo Diorama","cells":[{"id":0,"value":"md`# Coral Vivo Diorama`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"mainDisplay = {\n let div = html`

Carregando...

`;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1447,"value":"chart = d3PlotEspecieIndicador(recifeCurrent,selectedElement,indicadorCurrent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3965,"value":"shotCoral ={\n return FileAttachment(\"zoomout.jpeg\").url()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2728,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1188,"value":"md`## Species table render code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"md`## 3D Drawing code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3035,"value":"setMainDisplay = {\n mainDisplay.innerHTML = \"\";\n mainDisplay.append(speciesTable ());\n mainDisplay.append(html`

${draw3D()}`)\n mainDisplay.append(html`

${chart}`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1107,"value":"// Returns true if the image with the given name is transparent at\n// the given webgl coordinates (y axis pointing up)\ntransparentPixel = function (imgName, glcoords) {\n let img = getImageEntry(imgName).img;\n let canvas = DOM.canvas (1,1);\n let ctx = canvas.getContext(\"2d\");\n ctx.drawImage(img,glcoords.x*512,(1-glcoords.y)*512,1,1,0,0,1,1)\n let imageData = ctx.getImageData(0,0, 1, 1);\n return imageData.data [3] < 128;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3656,"value":"revela = function (filo) {\n \n // let desligar = d3.selectAll(\"table.species .line\").each(function (d,i) {\n // let tr = d3.select(this);\n // tr.classList.remove('js-show')\n // });\n for (let type of [\"corals\", \"recruits\", \"invertebrates\", \"fishes\"]){\n let desligar = document.querySelectorAll(`div.menuAbsolute table.species .${type}`);\n\n for (var j = 0; j < desligar.length; j++) {\n desligar[j].classList.remove('js-show');\n }\n } \n let ligar = document.querySelectorAll(`div.menuAbsolute table.species .${filo}`);\n console.log(ligar);\n \n for (var j = 0; j < ligar.length; j++) {\n ligar[j].classList.add('js-show');\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4110,"value":"sobe = function (){\n let selecionado = document.querySelectorAll(\"div.drawCore\");\n selecionado[0].classList.add('up');\n let chart = document.querySelector(\"div.chartAbsolute\");\n chart.classList.add('up');\n return selecionado\n //return selecionado\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4138,"value":"desce = function (){\n let selecionado = document.querySelectorAll(\"div.drawCore\");\n selecionado[0].classList.remove('up');\n let chart = document.querySelector(\"div.chartAbsolute\");\n chart.classList.remove('up');\n return chart\n //return selecionado\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1036,"value":"// Called when a species is selected in the species panel or \n// in the 3d vis\nselectSpecies = function (s) {\n mutable selectedElement = s;\n d3.selectAll(\"table.species tr\").each(function (d,i) {\n let tr = d3.select(this);\n tr.select(\"td\").each(function (d) { \n tr.classed(\"selected\", s && d3.select(this).attr(\"species\") == s) \n })\n })\n \n for (let specimen of population.children[0].children) {\n let mat = (s == null || specimen.name == s) ? specimen.normalMat : specimen.lowlightMat; \n if (specimen.material != mat) {\n specimen.material = mat;\n }\n }\n renderer.render( scene, camera )\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`## 3D elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"speciesPanelWidth = 170","pinned":true,"hidden":false,"mode":"ojs"},{"id":1054,"value":"drawingWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":4012,"value":"fi ={\n return width-1\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4022,"value":"mutable sobre = fi/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":4029,"value":"outro = ()=>{\n mutable sobre = fi\n return sobre\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"height = Math.round(drawingWidth*9/17)","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"camera = {\n let camera = new THREE.PerspectiveCamera( 60, 18/9, 0.1, 20 );\n camera.position.z = 2.8;\n camera.position.x = 100;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"fog = new THREE.Fog( 0x287DBF, 4, 20 );","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"renderer = {\n let r = new THREE.WebGLRenderer({ antialias: true} );\n\tr.setPixelRatio( window.devicePixelRatio );\n\tr.setSize( drawingWidth, height );\n\tr.shadowMap.enabled = true;\n\tr.shadowMap.type = THREE.PCFSoftShadowMap; //THREE.VSMShadowMap;\t\t\n\tr.setClearColor( 0xCCCCCC, 1 );\n return r\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"plane = {\n var geometry = new THREE.PlaneBufferGeometry( 100, 100, 10, 10 );\n var sandTexture = textureFromImage (/*await FileAttachment(\"FloorsCheckerboard_S_Diffuse.jpg\").image()*/\n await FileAttachment(\"tileableSand.jpg\").image());\n sandTexture.wrapS = THREE.RepeatWrapping;\n sandTexture.wrapT = THREE.RepeatWrapping;\n sandTexture.repeat.set( 100, 100 );\n\n var material = new THREE.MeshPhongMaterial( {color: 0xffffff, side: THREE.DoubleSide, map:sandTexture} );\n var plane = new THREE.Mesh( geometry, material );\n plane.rotation.x = Math.PI/2;\n plane.position.y = -0.5;\n return plane;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"population = new THREE.Group() ","pinned":true,"hidden":false,"mode":"ojs"},{"id":3199,"value":"whitenedCoralMat = {\n let coralSet = new Set(layout.filter(n=>speciesInfo[n.name].tipo==\"coral\").map(node => node.name));\n let whitenMap = new Map();\n for (let b of branqueamentoData) {\n if (b.time == timeCurrent && b.recife == recifeCurrent && coralSet.has(b.species)) {\n let entry = getImageEntry(b.species);\n let tex = textureFromImage(whiten(entry.img,getBranqueamento(timeCurrent)/10));\n let mat = new THREE.SpriteMaterial( { map: tex, \n color: 0xffffff,\n sizeAttenuation : true,\n fog : true } );\n whitenMap.set(b.species,mat);\n }\n }\n return whitenMap\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3044,"value":"populationCallback = {\n if (population.children.length > 0) {\n population.remove(population.children[0])\n }\n let group = new THREE.Group();\n for (let node of layout) {\n let { name, entry, scale, x, y, z } = node;\n let mat = /*whitenedCoralMat.has(name) ? whitenedCoralMat.get(name) : */entry.mat;\n let sprite = new THREE.Sprite( mat );\n sprite.normalMat = mat;\n sprite.highlightMat = mat;\n sprite.lowlightMat = entry.lowlightMat;\n sprite.name = name,\n sprite.scale.set (scale,scale,scale);\n sprite.position.set(x,y,z);\n group.add(sprite)\n }\n population.add(group);\n selectSpecies(mutable selectedElement);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"randomValue = (min,max) => min + Math.random()*(max-min)","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"skyDome = {\n let imgs = [ \n await FileAttachment(\"seatexture.jpg\").image(), \n await FileAttachment(\"seatexture.jpg\").image(), \n await FileAttachment(\"seatexture.jpg\").image(), \n await FileAttachment(\"seatexture.jpg\").image(), \n await FileAttachment(\"seatexture.jpg\").image(), \n await FileAttachment(\"seatexture.jpg\").image(), \n //await FileAttachment(\"left.png\").image(), await FileAttachment(\"right.png\").image(),\n // await FileAttachment(\"bottom.png\").image(), await FileAttachment(\"top.png\").image(),\n // await FileAttachment(\"front.png\").image(), await FileAttachment(\"back.png\").image()\n ];\n\tlet skyDome = new THREE.CubeTexture( imgs );\n skyDome.needsUpdate = true;\n return skyDome\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"scene = {\n let scene = new THREE.Scene();\n scene.fog = fog;\n scene.background = skyDome;\n scene.add (lights);\n scene.add (plane);\n scene.add (population);\n return scene\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2277,"value":"md`## Canvas overlay`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2028,"value":"ctxOverlay = {\n let canvas = DOM.canvas(drawingWidth,height);\n canvas.onclick = (e) => {\n if (mutable selectedElement != null) \n selectSpecies(null);\n };\n canvas.style['pointer-events'] = \"none\";\n let ctx = canvas.getContext(\"2d\");\n return ctx\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2156,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2916,"value":"function whiten (img, ratio = 0.5) {\n if (ratio < 0.1) return img\n let [w,h] = [img.width,img.height];\n let canvas = html`