28:null 29:["$","title",null,{"children":"Coral Vivo Diorama v3 | Claudio Esperança | Observable"}] 2e:T12b7,main = { let titleIN = html`

${title()}

`; let main = html`

`; let card = html`

`; let side = html`

`; let sidebutton = html`

${pulso( "right", !bottomCount )}

`; let bottom = html`

`; let bottombutton = html`

${pulso( "up", !sideCount )}

`; let zoomControl = html`

`; let [w, h] = [1024, height]; let wside = 220; let hbottom = 220; let styles = html` `; }30:T5a2,zoomControl = { let zoombuttons = html`

`; 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 ); }; let plus= html``; let increseZoom = () => { selectSpecies(null); let z = zoomScale.getValue() zoomScale.setValue(z-0.3) setZoom(); } plus.onclick = increseZoom; let decreseZoom = () => { selectSpecies(null); let z = zoomScale.getValue() zoomScale.setValue(z+0.3) console.log(-1) setZoom(); } let minus= html``; minus.onclick = decreseZoom; zoombuttons.append(plus); zoombuttons.append(html`

`) zoombuttons.append(minus); let zoom = main.querySelector('.zoomControl') zoom.replaceChild(zoombuttons, zoom.childNodes[0]); }31:T639,cardInfo =(species) => { if(species ===null){ let card = main.querySelector('#card'); return html``} let info = speciesInfo[species]; let cont = info.tipo==='coral' ? dataSum.coral.rows.get(species)+'/'+dataSum.recruits.rows.get(species) :dataSum[info.tipo].rows.get(species); let legenda = info.tipo==='coral' ? 'colônias/recrutas' : species // let close = html`

` function closeCard(){ mutable selectedElement = null; } close.onclick = closeCard return( html`

${info.nome} ${gotoDescIcon}

Também conhecido como ${speciesInfo[species].nome_popular}

Total de ${legenda}

${cont}

`) }32:T5f8,dataSum = { let data = {"peixe":{name: "Peixes", total:0,rows:new Map()}, "coral":{name: "Corais", total:0,rows:new Map()}, "recruits":{name: "Recrutas", total:0,rows:new Map()}, "invertebrado":{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); } let allSpecies = Object.keys(speciesInfo); for(let o of allSpecies){ let specie = speciesInfo[o] //console.log(specie.tipo) //data[specie.tipo].total = 0; if(specie.tipo==='coral'){ addMap(data[specie.tipo].rows, specie.chave,0); addMap(data['recruits'].rows, specie.chave,0); } else{ addMap(data[specie.tipo].rows, specie.chave,0); } } for (let pop of popData) { switch (pop.type) { case "fish": data.peixe.total += pop.adults; addMap(data.peixe.rows,pop.name, pop.adults); break; case "invertebrate": data.invertebrado.total += pop.adults; addMap(data.invertebrado.rows,pop.name, pop.adults); break; case "coral": data.coral.total += pop.adults; addMap(data.coral.rows,pop.name, pop.adults); // data.recruits.total += 0; addMap(data.recruits.rows,pop.name, 0); if (pop.recruits) { data.recruits.total += pop.recruits; addMap(data.recruits.rows,pop.name, pop.recruits); } break; } } return data }33:Tcb0,styles2 = html` `34:T726,popups = { let title = main.querySelector(".title"); setMainDisplay; speciesTable; removePopups(title); removePopups(main); let titulo = title.querySelector("#titulo"); let colonias = coloniasHelp; let pop1 = await addPopupHelp(titulo, { contents: html`

${textoTitulo}

`, mode: "i", popx: 30, popy: 0, insetCloseIcon: true, insetTop: 0, insetRight: 0 }); await Promises.delay(1000); // Wait for the diorama popup help image to load let dioramaWidth = renderer.domElement.getBoundingClientRect().width; let pop2 = await addPopupHelp(renderer.domElement, { insetCloseIcon: true, anchor: "ne", popy: 3, popx: 0, //35-dioramaPopup.width-(dioramaWidth-dioramaPopup.width)/2, insetTop: 0, insetRight: 0, contents: dioramaPopup, offsetx: 60 - dioramaWidth, offsety: 12 }); pop2.popbox.style.padding = "0px"; pop2.popbox.style.width = dioramaPopup.width - 2 + "px"; pop2.popbox.style.height = dioramaPopup.height - 2 + "px"; let recife = title.querySelector("#menurecife"); let recifeHelp = html`

${ textoRecife[mutable recifeCurrent] }

`; let pop3 = await addPopupHelp(recife, { mode: "i", contents: recifeHelp, offsetx: recifeCurrent === "RFO" ? -75 : -110, offsety: 2, popx: -380, popy: 0, insetCloseIcon: true, insetTop: 0, insetRight: 0 }); let pop4 = await addPopupHelp(colonias, { mode: "i", contents: html`

Recrutas são colônias pequenas

`, offsetx: 133, offsety: 20, popx: -60, popy: 30, insetCloseIcon: true, insetTop: 0, insetRight: 0 }); return [pop1, pop2, pop3, pop4]; }35:Tf47,styles = html` `36:Tcec,speciesTable = function (dataSum) { 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"]) { for (let type of ["peixe", "coral", "invertebrado"]) { let datum = dataSum[type]; let selectedType = selectedElement===null? null:speciesInfo[selectedElement].tipo; let tituloCategoria = html` ${(type===selectedType)? '': ''} ${datum.name} ${type==='coral' ? (type===selectedType)?`

Colônias/recrutas`:`

`; return div }37:Ted6,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"; const 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) => { if (mutable selectedElement) return; 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)) } 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 }38: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' ) ); }39: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; }3a:T644,zoomScale = { let ctx = ctxOverlay; let [w,h] = [drawingWidth, height]; let padding = 10; let [dx,dy] = [20,80]; let [x0,y0] = [w-dx-padding,h-padding-50-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 }; }3b:T3fbf,d3PlotEspecieIndicador = function (recife, species, indicador) { // Geometric parameters let [w,h,hTime] = [width-250,164,50]; let margin = {left:40, right:40, top:0, 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", "#C0C0C0") .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", "#D3D3D3") .attr("opacity", 1) .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("z-index", 120) .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", "8") .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") // Buttons to change time // let nextButton = svgTime.append("g") // .attr("class", "nextButton") // .append("polygon") // .attr("transform", `translate(${x.range()[0]-20},${hTime - margin.bottomTime-3}) scale(2)`) // .attr("points", "-4,-4 -4,4 4,0") // .attr("fill", "black") // .on ("click", () => { // let t = mutable timeCurrent; // let i = nonEmptyTimes.indexOf(t); // if (i >= 0 && i+1 < nonEmptyTimes.length) { // mutable timeCurrent = nonEmptyTimes[i+1] // } // }) // Function to highlight the current time text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); let highlightTime = function (time) { monthAxis.selectAll(".tick text") .style("font-weight", d => d == time ? "bold" : "normal") .style("color", d => d == time ? "#FF7A00" : "#000000") .style("text-shadow", d => d == time ? "0px 2px 4px rgba(0, 0, 0, 0.18)" : "none") .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%") .style("color", d => d == time ? "#FF7A00" : "#000000") .style("text-shadow", d => d == time ? "0px 2px 4px rgba(0, 0, 0, 0.18)" : "none") .attr("dy","-1.2em"); 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") .attr("class", "tooltip"); // // 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.pageX,d3.event.pageY] tooltip .style("top", `${y-20}px`) .style("left",`${x-20}px`) tooltip.style("visibility", "visible") .html(`${branqueamentoTitle(d.value)}`); }) .on("mousemove", function() { let [x,y]=[d3.event.pageX,d3.event.pageY] tooltip .style("top", `${y-20}px`) .style("left",`${x-20}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.pageX,d3.event.pageY] tooltip .style("top", `${y-20}px`) .style("left",`${x-20}px`) tooltip.style("visibility", "visible") .html(`${d.key}: ${formatValue(d.data[d.key])}`); }) .on("mousemove", function() { let [x,y]=[d3.event.pageX,d3.event.pageY] tooltip .style("top", `${y-20}px`) .style("left",`${x-20}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].tipo == "peixe"?"Tamanho dos peixes":speciesInfo[species].tipo == "coral"?"Tipos de corais":speciesInfo[species].tipo == "invertebrado"?"Quantidade encontrada":''}

`); console.log(color) 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 =>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 }3c: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") }3d: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) }3e:T47f,imgDb = { let db = []; let n = attachments.length; let i = 0; for (let a of attachments) { // mainDisplay.innerHTML = `Loading (${++i}/${n})`; main.querySelector(".mainpanel").innerHTML = `Loading (${++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)) } return db }3f: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 } }40:[{"id":"fca7ae0e44b2985deebb82e5a7893541eb632595db486a916bf42fd991e32c4a761c84b0e7bbd6ceaf05cd7aee8a0f9c9f6a276b882adc8109acec0625a5a230","href":"https://static.observableusercontent.com/files/fca7ae0e44b2985deebb82e5a7893541eb632595db486a916bf42fd991e32c4a761c84b0e7bbd6ceaf05cd7aee8a0f9c9f6a276b882adc8109acec0625a5a230","name":"tileableSand.jpg","type":"image/jpeg","lastModified":1623171799541.872,"size":642381},{"id":"e0c4c456f12d4d036a26d2a0dd3ac363e9e073fa60be6b6712ceac1ba3d3646d348f374a99b5ca200658fee3aabd330bc22fbfcccb5ffc98ad67d091dc105220","href":"https://static.observableusercontent.com/files/e0c4c456f12d4d036a26d2a0dd3ac363e9e073fa60be6b6712ceac1ba3d3646d348f374a99b5ca200658fee3aabd330bc22fbfcccb5ffc98ad67d091dc105220","name":"seatexture.jpg","type":"image/jpeg","lastModified":1623171799541.872,"size":19026},{"id":"d9071ffe2ab165cac868a892bbab8a8e0acfbc454c36c246847b9137a69af9966259679f3eb23056e63616f98ed6cc59df1a3fb9812eed5d1e27d365b2680d7c","href":"https://static.observableusercontent.com/files/d9071ffe2ab165cac868a892bbab8a8e0acfbc454c36c246847b9137a69af9966259679f3eb23056e63616f98ed6cc59df1a3fb9812eed5d1e27d365b2680d7c","name":"external-link-symbol.svg","type":"application/xml","lastModified":1623171799541.872,"size":2135},{"id":"2ce11d56733ea9aa834dd34d09bafae706e7498c6c74d5af77208888baa76ef083a1aa25080f2d2156ff0e493c6a2345acff6ba5b3c632044a760474abb45ad4","href":"https://static.observableusercontent.com/files/2ce11d56733ea9aa834dd34d09bafae706e7498c6c74d5af77208888baa76ef083a1aa25080f2d2156ff0e493c6a2345acff6ba5b3c632044a760474abb45ad4","name":"Nomenclatura@2.csv","type":"text/csv","lastModified":1623171799541.872,"size":12203},{"id":"3ee37cff7a247104c0997ea57ba0a33b638ae8d9d4c63fa6c0a2b6d12e8d7dc15b220efc1cef87ccf3eb1c3c5c26224ba97d67995db89fde6a42fa3890f9f57a","href":"https://static.observableusercontent.com/files/3ee37cff7a247104c0997ea57ba0a33b638ae8d9d4c63fa6c0a2b6d12e8d7dc15b220efc1cef87ccf3eb1c3c5c26224ba97d67995db89fde6a42fa3890f9f57a","name":"images1-20@4.json","type":"application/json","lastModified":1623171799541.872,"size":4486523},{"id":"87e286c44aa80471e160d56e9c0820fc2cee403dada4b3506a9d1e53401220787b38897be5a6ac779ac50eca9e7000587d049019879cf657b9176d849069e35b","href":"https://static.observableusercontent.com/files/87e286c44aa80471e160d56e9c0820fc2cee403dada4b3506a9d1e53401220787b38897be5a6ac779ac50eca9e7000587d049019879cf657b9176d849069e35b","name":"images21-40@4.json","type":"application/json","lastModified":1623171799541.872,"size":3876808},{"id":"7f6410af15f0f937433cf1b1bfe125b7def5ca67273f72c48508faa7838fbc9fb8c5f32663e0b92c0ca51131ca1cd3609c862142f303657d1f3e2e17645fe8ff","href":"https://static.observableusercontent.com/files/7f6410af15f0f937433cf1b1bfe125b7def5ca67273f72c48508faa7838fbc9fb8c5f32663e0b92c0ca51131ca1cd3609c862142f303657d1f3e2e17645fe8ff","name":"images41-60@4.json","type":"application/json","lastModified":1623171799541.872,"size":5940976},{"id":"8f16d8798254744b268abf66dbd42af7da57405f8839466d70a5f23424c0854047e6e71ddb649e7680ffd5e4d55788a28bd1b2538d75bcdb2533c3b2ea8691e6","href":"https://static.observableusercontent.com/files/8f16d8798254744b268abf66dbd42af7da57405f8839466d70a5f23424c0854047e6e71ddb649e7680ffd5e4d55788a28bd1b2538d75bcdb2533c3b2ea8691e6","name":"images61-80@2.json","type":"application/json","lastModified":1623171799541.872,"size":5464043},{"id":"f65c06e8c1e33e818afd1d6a9b70ba66b495a9562f73072c9e3badcaa1fa8c960ab21252dff3f2c4cb0a607a9119cc5bb9b1e51432f7cd027ebcd66cfd1c04cc","href":"https://static.observableusercontent.com/files/f65c06e8c1e33e818afd1d6a9b70ba66b495a9562f73072c9e3badcaa1fa8c960ab21252dff3f2c4cb0a607a9119cc5bb9b1e51432f7cd027ebcd66cfd1c04cc","name":"images81-87@1.json","type":"application/json","lastModified":1623171799541.872,"size":1980270},{"id":"da843be28a6a353451655c26b46ad86d3a89fcd885c8cf7c484b1e50afe24aab7db327da62117e8fb0e71d8585ff87859123aac8745fd55eb39290db0a493b36","href":"https://static.observableusercontent.com/files/da843be28a6a353451655c26b46ad86d3a89fcd885c8cf7c484b1e50afe24aab7db327da62117e8fb0e71d8585ff87859123aac8745fd55eb39290db0a493b36","name":"qmark2.png","type":"image/png","lastModified":1623171799541.872,"size":1576},{"id":"b25c8622d36b96e957712ef5f5a0ef1bb4344c39eef4dcdd7f2d7bdc6273a896981664cdac325c426842a2fa17d2c3f186eec848e39f82ec28ddd969b1a5be29","href":"https://static.observableusercontent.com/files/b25c8622d36b96e957712ef5f5a0ef1bb4344c39eef4dcdd7f2d7bdc6273a896981664cdac325c426842a2fa17d2c3f186eec848e39f82ec28ddd969b1a5be29","name":"popup diorama5.svg","type":"image/svg+xml","lastModified":1623171799541.872,"size":8193},{"id":"3aaf4a557d837f7396f2344451ac71f5ae1229f6ba9ec1d731ff697816b3cd5943e204dae7abdb6ce7c0a22ae782a3678c616b268b4ea978c3ca9c8eee26a194","href":"https://static.observableusercontent.com/files/3aaf4a557d837f7396f2344451ac71f5ae1229f6ba9ec1d731ff697816b3cd5943e204dae7abdb6ce7c0a22ae782a3678c616b268b4ea978c3ca9c8eee26a194","name":"coralDb.json","type":"application/json","lastModified":1623171906103.761,"size":99400},{"id":"30e74bae5970d6b9b389e0b33fc87e3296cdd157ecf52c5a6132da88f13b3791d2622c699145eaa0b165a9257d43ba86fed2d77d628f4f3ae1a5fec39347de5c","href":"https://static.observableusercontent.com/files/30e74bae5970d6b9b389e0b33fc87e3296cdd157ecf52c5a6132da88f13b3791d2622c699145eaa0b165a9257d43ba86fed2d77d628f4f3ae1a5fec39347de5c","name":"coralDb@1.json","type":"application/json","lastModified":1660170111370.617,"size":125419}] 2c:{"id":"a1150c6b7642d6e4","slug":"coral-vivo-diorama-v3","title":"Coral Vivo Diorama v3","thumbnail":null,"access_level":"public","create_time":"$D2021-06-08T17:03:19.541Z","update_time":"$D2022-08-11T17:04:23.158Z","view_time":null,"first_public_time":"$D2021-06-15T15:14:04.751Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":6199,"publish_version":6199,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8bfe3c73fc63b3fb","slug":"visualizacao-de-dados","title":"Data Visualization","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"Coral Vivo Diorama v3","cells":[{"id":0,"value":"md`# Coral Vivo Diorama v3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3627,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6088,"value":"width = 1024","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3595,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5995,"value":"converteLegenda = async() => {\n if (speciesInfo[selectedElement] && speciesInfo[selectedElement].tipo == 'coral'){\n let legenda = await document.querySelector('[title=\"colonias\"]');\n legenda.textContent = 'Colônias'\n return legenda.textContent\n }}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5788,"value":"converteLegendaCallback = setTimeout(converteLegenda,500);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5992,"value":"s = {\n converteLegenda;\n let container = document.querySelector('div.legendcontainer')\n let d = container.querySelector('div div')\n // return html`${d}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5470,"value":"pulso = function (direction='down',pulsar=false) {\n let transform = {\n down:'rotate(90)',\n up:'rotate(-90)',\n left:'rotate(180)',\n right:'rotate(0)',\n }\n const node = html`\n`;\n\n if(!pulsar) return node\n \n let circle = d3.select(node).select('circle');\n pulse(circle);\n circle.on('click')\n \n \n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5476,"value":"function pulse(circle) {\n (function repeat() {\n circle\n .transition()\n .duration(500)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0)\n .transition()\n .duration(500)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0.75)\n .transition()\n .duration(1000)\n .attr(\"stroke-width\", 65)\n .attr('stroke-opacity', 0)\n .ease(d3.easeSin)\n .on(\"end\", repeat);\n })();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5553,"value":"arrow = function (direction='down') {\n let transform = {\n down:'rotate(0)',\n up:'rotate(180)',\n left:'rotate(90)',\n right:'rotate(-90)',\n }\n const node = html``\n \n return node\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5581,"value":"mutable sideCount = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5585,"value":"mutable bottomCount = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4990,"value":"md`## Zoom`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4920,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"chart = d3PlotEspecieIndicador(recifeCurrent,selectedElement,indicadorCurrent)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6004,"value":"gotoDescIcon = {\n let imgText=await FileAttachment(\"external-link-symbol.svg\").text();\n let img = html`${imgText}`;\n d3.select(img).select('svg')\n .attr(\"width\",\"20\")\n .attr(\"height\",\"18\")\n .attr(\"cursor\",\"pointer\")\n .selectAll(\"path\").style('fill','#FF7A00')\n return img;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4333,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4244,"value":"card = cardInfo(selectedElement)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4318,"value":"cardPanelAdd = { \n let item = main.querySelector('.cardpanel');\n item.replaceChild(card, item.childNodes[0]);\n let entry = getImageEntry(selectedElement)\n function label(){\n if (getBranqueamento(timeCurrent)>0)\n return html`

\n ${d3.format(\".0f\")(getBranqueamento(timeCurrent)*10)+'% branqueado'}

`\n }\n let imagem = html`\n

\n \n ${whiten(entry.shadowImg,getBranqueamento(timeCurrent)/10)}\n ${label()?label():''}\n

`;\n let cardpanel =() => {\n for(let i=0;i<100;i++){\n let card = main.querySelector('.cardpanel').querySelector('#card');\n if(card){\n return card\n }\n }\n }\n if(selectedElement===null) return;\n cardpanel().append(imagem);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4258,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3349,"value":"md`## Styles and popup help`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3672,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5373,"value":"coloniasHelp = html` `//main.querySelector(\".sidepanel .species .categoria .coral\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3354,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3398,"value":"textoTitulo = `Os dados são coletados de forma bimestral, utilizando unidades amostrais fixas (1,5 x 1,5m). \nMergulhadores utilizam censo visual e fotografias para levantar dados de abundância e saúde\ndas espécies de peixes, corais e outros invertebrados. Por meio de sensores são registradas\ncaracterísticas da água do mar, como a temperatura e a radiação solar incidente. Os valores\nusados nesta visualização são médias obtidas sobre 3 unidades amostrais em cada recife.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3405,"value":"textoRecife = ({\n 'ARA' : `Araripe [16°10´56.55´´S; 38°55´13,30´´O] – é um recife localizado em frente ao Distrito de\nSanto Antônio, Município de Santa Cruz Cabrália, a 20 quilômetros ao norte de Porto Seguro. O\nAraripe marca o extremo Norte da cadeia de recifes que compreende a unidade de\nconservação Parque Natural Municipal de Coroa Alta.`,\n 'ECO' : `Mucugê [16°29´42.09´´S; 39°4´1.47´´O] – é um recife costeiro localizado na principal praia de\nArraial d´Ajuda, Porto Seguro, BA. Os recifes do Mucugê se distribuem em duas faixas\nprincipais paralelas e próximas à praia.`,\n 'RFO' : `Recife de Fora [16°24´39.86´´S; 38°59´7.28´´O] - é o principal recife da Costa do\nDescobrimento. Localizado a 5 milhas de Porto Seguro, é uma Unidade de Conservação, o\nParque Natural Municipal do Recife de Fora.`\n})\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3420,"value":"popupCallback = {\n let help = html`

${textoRecife[recifeCurrent]}

`;\n popups [2].setPopupContents(help)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3369,"value":"dioramaPopup = {\n let svg = await FileAttachment(\"popup diorama5.svg\").image();\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5802,"value":"`styles`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2728,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"md`## Species table render code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1734,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"md`## 3D Drawing code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3035,"value":"setMainDisplay = {\n // mainDisplay.innerHTML = \"\";\n // mainDisplay.append(draw3D ());\n // mainDisplay.append(speciesTable ())\n let setPanel = function (selector, value) {\n let panel = main.querySelector(selector);\n panel.innerHTML = null;\n panel.append(value);\n }\n setPanel (\".mainpanel\", draw3D());\n setPanel (\".sidepanel\", speciesTable(dataSum));\n setPanel (\".bottompanel\", chart);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 let sel = s && d3.select(this).attr(\"species\") == s;\n tr.classed(\"selected\", sel) \n // console.log(sel)\n// if (sel) { tr.node().scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });\n \n// console.log(tr.node())}\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`## 3D elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"speciesPanelWidth = 215","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"mutable drawingWidth = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"height = Math.round(drawingWidth*9/16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"camera = {\n let camera = new THREE.PerspectiveCamera( 30, drawingWidth/height, 0.1, 20 );\n camera.position.z = 2.8;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"fog = new THREE.Fog( 0x287DBF, 4, 20 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"renderer = {\n let r = new THREE.WebGLRenderer({ antialias: true } );\n\tr.setPixelRatio( window.devicePixelRatio );\n\tr.setSize( drawingWidth, height*16/18 );\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"population = new THREE.Group() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"randomValue = (min,max) => min + Math.random()*(max-min)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2277,"value":"md`## Canvas overlay`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2156,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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`