2f:Tb0b,viewof focus1 = { const defaultExtent = [d3.isoParse("2019-11-01"), d3.isoParse("2020-12-01")]; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); //used for the brush and xAxis const x = d3 .scaleTime() .domain([ d3.utcParse("%Y-%m-%d")("2018-12-01"), d3.utcParse("%Y-%m-%d")("2020-12-01") // one month extra to show the final month's bar ]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 1]) .range([focusHeight - margin.bottom, margin.top]); const xAxis = (g, x, height) => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); svg.append("g").call(xAxis, x, focusHeight); //.attr("class", "axisWhite"); // used for the bars const x2 = d3 .scaleBand() .range([margin.left, width - margin.right], 0.01) .padding(0.01) .domain(datesForPlot); const brush = d3 .brushX() .extent([ [margin.left, margin.top], [width - margin.right, focusHeight - margin.bottom] ]) .on("brush", brushed) .on("end", brushended); const bars = svg .selectAll("rect") .data(filledLineDataScrubber) .enter() .append("rect") .attr("x", (d) => x2(d.date)) .attr("y", (d) => { return y(1); }) .attr("width", (d) => x2.bandwidth()) .attr("height", (d) => y(0) - y(1)) .attr("fill", (d) => sstaColors(d.value)); // .attr("opacity", 0.8); let previousS0, previousS1; let gb = svg.append("g").call(brush); if (defaultExtent) gb.call(brush.move, defaultExtent.map(x)); // function brushed(event) { // svg.node().value = // event.selection === null ? null : event.selection.map(x.invert); // svg.node().dispatchEvent(new Event("input", { bubbles: true })); // const selection = event.selection; // } function brushed({ selection }) { // mutable debug2 = selection; if (selection) { // console.log("fire1"); var s = selection || x.range(); svg.property("value", selection.map(x.invert, x).map(d3.utcMonth.ceil)); svg.dispatch("input"); if ( ((s[1] - s[0]) / width) * 120 > 30 || ((s[1] - s[0]) / width) * 120 < 2 ) { gb.call(brush.move, [previousS0, previousS1]); return; } previousS0 = s[0]; previousS1 = s[1]; } } function brushended({ selection }) { if (!selection) { // mutable debug2 = defaultSelection; gb.call(brush.move, [previousS0, previousS1]); // changed from defaultSelection so that a single click doesn't mess things up } } // svg.node().value = defaultExtent ? defaultExtent : null; return svg.node(); }30:T5ac,viewof map = { console.log("map running"); // let map = this; const container = html`

`; yield container; const map = (container.value = new mapboxgl.Map({ container, style: "mapbox://styles/hakai/ckwpei0yq08cj15nthgd4ql45", center: [-126, 50], zoom: 6, scrollZoom: false, doubleClickZoom: false, maxZoom: 12, minZoom: 4 })); map.on("load", function () { map.addControl(new mapboxgl.NavigationControl()); const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on("mouseenter", "stories", function (e) { map.getCanvas().style.cursor = "default"; const coordinates = e.features[0].geometry.coordinates.slice(); const properties = e.features[0].properties; const description = `${properties.site} `; while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } popup.setLngLat(coordinates).setHTML(description).addTo(map); }); map.on("mouseleave", "stories", function () { map.getCanvas().style.cursor = ""; popup.remove(); }); }); invalidation.then(() => map.remove()); // Wait until the map loads, then yield the container again. yield new Promise((resolve) => { if (map.loaded()) resolve(map); else map.on("load", () => resolve(map)); }); yield container; }31:T732,updateLayer = () => { // mutable debugLimits = focus; const sitesPacked = createSitePacks(); const values = [...new Map(sitesPacked).values()]; const valuesCollide = applySimulation(values); const flatData = []; valuesCollide.map((d) => { flatData.push({ r: d.r, x: d.x, y: d.y, site: d.k, species: "All", opacity: 0.7 }); d.nodes.map((node) => { flatData.push({ r: node.r, x: d.x + node.x, y: d.y + node.y, site: node.data.site, species: node.data.key, opacity: 1 }); }); }); let outdata = []; flatData.map((d) => { let loc = map.unproject(d); // key to getting the lat, lons back outdata.push({ ...d, lat: loc.lat, lng: loc.lng }); }); // console.log(outdata); const datageoZoom = outdata.map((d, i) => { let sel = {}; if (selected && selected[0]) { sel = selected[0]; } return { id: i, properties: { ...d, stroke: d.site === sel.site && d.species === "All" ? 1 : 0, color: d.species === "All" ? "white" : colorScale(d.species), radius: d.r, opacity: d.opacity }, geometry: { type: "Point", coordinates: [d.lng, d.lat] }, type: "Feature" }; }); let fc = { type: "FeatureCollection", features: datageoZoom.sort((a, b) => b.properties.r - a.properties.r) }; if (map._loaded) { if (!map.getSource("stories")) { map.addSource("stories", { type: "geojson", data: fc }); } else { map.getSource("stories").setData(fc); } if (map.getLayer(hexbinLayer.id)) { // console.log("remove layer"); map.removeLayer(hexbinLayer.id); } map.addLayer(hexbinLayer); return true; } }32:T439,runZoomUpdate = { map.on("viewreset", updateLayer); map.on("move", updateLayer); map.on("moveend", updateLayer); map.on("click", "stories", function (e) { // console.log(e); // set(viewof selectedSite, e.features[0].properties.site); mutable selectedSite = e.features[0].properties.site; mutable selectedGroup = type; const container = map.getContainer(); container.value.selected = { lng: e.lngLat.lng, lat: e.lngLat.lat, data: e.features[0].properties }; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); map.on("dblclick", "stories", function (ee) { // clicking outside map unselects site console.log(ee); mutable selectedSite = null; const container = map.getContainer(); container.value.selected = null; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); invalidation.then(() => { // console.log("invalidation cell"); map.off("viewreset", updateLayer); map.off("move", updateLayer); map.off("moveend", updateLayer); }); }33:T636,createSitePacks = () => { const data = dataBySiteandGroup; const statesPacked = new Map(); for (let [k, v] of data) { let obs = Array.from(v, ([key, value]) => { let uniqSpe = [...new Set(value.map((d) => d.species))]; var myString = ""; var i = 0; while (i < uniqSpe.length) { myString = myString + ("
" + uniqSpe[i]); i++; } return { key: key, species: myString, speciesNum: [...new Set(value.map((d) => d.species))].length, value: value.length, site: k }; }); try { // v.sort((a, b) => b.group - a.group); // step 0 let total_count = 0; //iterate regions v = obs.map((d) => { if (d && d.value) { total_count = total_count + d.value; let rad = radius(d.speciesNum); return { data: d, r: rad }; } }); // step 1 const nodes = packSiblings(v); // step 1 nodes.site = k; const { r } = packEnclose(nodes); // step 2 const site = bcSiteLocs.find((d) => { if (d.site) { if (d.site === k) { return d.site === k; } } }); // step 3 if (site) { // const coords = projection([site.long, site.lat]); // step 3 const coords = map.project(new mapboxgl.LngLat(site.long, site.lat)); const x = coords.x; const y = coords.y; const name = site; statesPacked.set(k, { nodes, r, x, y, total_count, k, name, obs }); // step 4 } } catch {} } return statesPacked; }34:T4c1,gp1 = { // control how bar chart plotting is done let Allspecies = 0; let anySpecies = 0; if (Array.isArray(barData) != false && barData[0]) { anySpecies = [ ...new Set( heatData .filter((d) => barData[0].includes(d.group) && d.count === 1) .map((d) => d.species) ) ]; } if (speciesList === null) { Allspecies = [ ...new Set( heatData .filter((d) => barData.includes(d.group) && d.count === 1) .map((d) => d.species) ) ]; } // if(Allspecies > 0) if (anySpecies.length < 1) { return md``; } if ( speciesList != null && familyGroupings.find((d) => d["Common Name"] === speciesList).Group !== barData[0] ) { return md``; } if (selectedSite !== null) { if (Array.isArray(barData) === true) { return md`${barData[0]}`; } else if (Allspecies.length < 1) { return md`${barData} - none observed`; } else { return md`${barData} `; } } else if ( // selectedGroup === "All" || // selectedGroup === null || type === "All" && speciesList === null ) { return md``; } { return render_data_table(speciesTableData); } }35:T15be,chart2 = function (types, speciesInput) { console.log(speciesInput); const width = 400; if (Array.isArray(types) === false) { types = [types]; } const n = types.length; let Allspecies; speciesInput === null ? (Allspecies = [ ...new Set( heatData .filter((d) => types.includes(d.group) && d.count === 1) .map((d) => d.species) ) ]) : (Allspecies = [ ...new Set( heatData .filter( (d) => types.includes(d.group) && d.species === speciesInput ) .map((d) => d.species) ) ]); const height = Allspecies.length === 1 ? Allspecies.length * 65 : Allspecies.length === 2 ? Allspecies.length * 40 : Allspecies.length === 3 ? Allspecies.length * 30 : Allspecies.length === 4 ? Allspecies.length * 25 : Allspecies.length * 20; //Calculate margins to use // const to_chart_species = [ // ...new Set(heatData.filter(d => d.group === types[0]).map(d => d.species)) // ]; // this will be the bottom of the top chart (based on proportion of species) // const bh_top_chart = (height * to_chart_species.length) / Allspecies.length; const margin1 = { top: 20, right: 40, bottom: 30, left: 140 }; //adjust bottom const chart_width = width - margin1.left - margin1.right; // const chart_height = height - margin1.top - margin1.bottom; let margin_others; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .attr("id", "barChart"); const today = new Date(); const startExt = new Date(); const endExt = new Date(); startExt.setDate(today.getDate() - 1); endExt.setDate(today.getDate() + 1); // HERE I CREATE A CHART (FOCUS) FOR EACH VARIABLE. let myVariables = {}; let myLines = {}; let myYs = {}; let myXs = {}; let y; const months = d3.timeMonth.count(startDate, d3.timeMonth.ceil(endDate)); const x = d3 .scaleTime() .range([0, chart_width]) .domain([startDate, d3.timeMonth.ceil(endDate)]); // .padding(0.1); const xAxis = d3 .axisBottom(x) .ticks(d3.timeMonth) .tickFormat((d, i) => { let nm = months > 18 ? 3 : months < 12 ? 1 : 2; return nm === 1 ? multiFormat(d) : i % nm === 1 ? multiFormat(d) : ""; }); const top_margins = []; let isData; types.forEach((vari, i) => { // console.log(vari); let yside = "y" + i; let species; speciesInput === null ? (species = [ ...new Set( heatData .filter((d) => d.group === vari && d.count === 1) .map((d) => d.species) ) ]) : (species = [ ...new Set( heatData .filter( (d) => d.group === vari && d.species === speciesInput && d.count === 1 ) .map((d) => d.species) ) ]); isData = heatData.filter( (d) => d.group === vari && species.includes(d.species) ); let h_each_plot = height; top_margins.push(h_each_plot); let chart_bounds = h_each_plot - margin1.top - margin1.bottom; y = d3.scaleBand().domain(species).range([chart_bounds, 0]).padding(0.05); const yAxis = (g) => g .call(d3.axisLeft(y).tickSize(0)) .call((g) => g.select(".domain").remove()); const mar_top = i === 0 ? 0 : i === 1 ? top_margins[0] : d3.sum(top_margins.slice(0, [i])); margin_others = { top: mar_top, right: 20, left: 140 }; let variableName = "focus" + i; myVariables[variableName] = svg .append("g") .attr("class", "focus" + i) .attr( "transform", `translate(${margin_others.left},${margin_others.top})` ); myVariables[variableName] .selectAll("rect") .data( heatData.filter((d) => d.group === vari && species.includes(d.species)) ) .enter() .append("rect") .attr("class", "line" + i) .attr("x", (d) => x(d3.timeMonth.ceil(new Date(d.date)))) .attr("y", (d) => { return y(d.species); }) .attr( "width", (d) => x(d3.timeMonth.ceil(new Date(d.date))) - x(d3.timeMonth.floor(new Date(d.date))) ) .attr("height", y.bandwidth()) .attr("fill", (d) => { return d.count > 0 ? colorScale(d.group) : "#ddd"; }) // .attr("fill", "none") .attr("clip-path", "url(#clip)"); // .style("stroke", "steelblue") // .style("stroke-width", "1.5px"); myVariables[variableName] .append("g") .attr("class", "axis axis--x") // .style("font-size", "6px") .attr("transform", "translate(0," + chart_bounds + ")") .call(xAxis); // .attr("font-size", "9px"); const myY = myVariables[variableName] .append("g") .attr("class", "axis axis--y") .call(yAxis); // add hyperlinks to y labels myY.selectAll("g.tick").each(function (tick) { d3.select(this.parentNode) .insert("a") .attr( "href", familyGroupings.find((d) => d["Common Name"] == tick).FishBaseURL ) .attr("target", "_blank") // This makes the link open in a new window .append(() => this); }); }); if (isData.length > 0) { return svg.node(); } else { return md``; } }36:T517,render_bubLeg = function () { // d3.select("svg").remove(); let data = type === "All" ? legendVals : innerLegendVals; const svg = d3.select(DOM.svg()).attr("height", 200).attr("width", 200); const legPack = svg .append("g") .selectAll(".leg-pack") .data(data) .join("g") .attr("transform", (d) => { // console.log('here', d); return `translate(${150}, ${80})`; }); legPack .append("circle") .attr("r", (d) => { // console.log(d.r); return d.r; }) .attr("fill", "none") .attr("stroke", "#333") .attr("opacity", 0.4); const groupLeg = legPack .selectAll(".county-centroid") .data((d) => d.nodes) .enter() .append("circle") // .classed("county-centroid", true) .attr("id", (d) => "centroid_" + d.data.site.replace(/\s+/g, "")) .attr("r", (d) => d.r) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("fill", (d) => { return type === "All" ? colorScale(d.data.key) : colorScale(selectedGroup); }) .attr("opacity", 0.4); // const annotationLabel = svg // .append("g") // .attr("class", "annotation-group") // .call(makeMyAnnotations); // Call it on a g element // svg.append("g").call(makeMyAnnotations2); return svg.node(); }37:[{"id":"89e1fcae006ae5fcc0836c70ab932636ee855f19753a6386751baab5d4eac2233b65bc743e18fd2800674ca426f4f147d9d637615c894dc6460abbdc4b778761","href":"https://static.observableusercontent.com/files/89e1fcae006ae5fcc0836c70ab932636ee855f19753a6386751baab5d4eac2233b65bc743e18fd2800674ca426f4f147d9d637615c894dc6460abbdc4b778761","name":"foragefish.jpg","type":"image/jpeg","lastModified":1672782942060.145,"size":487120},{"id":"64aed333f8072bae7d81fed476a9beea1f1a86eabd53ff6ea8c987aa5ee86bb001c1c3f709c32dedb64018cc05a43921a5ac8b1900f8dca058beac242147a8f2","href":"https://static.observableusercontent.com/files/64aed333f8072bae7d81fed476a9beea1f1a86eabd53ff6ea8c987aa5ee86bb001c1c3f709c32dedb64018cc05a43921a5ac8b1900f8dca058beac242147a8f2","name":"flatfish (1).png","type":"image/png","lastModified":1672782942060.145,"size":567110},{"id":"b25084e516627c195b25fbfdb164e2c3e5f0a49d44708cbe78b3196af1f494a00d59af52711eb7a386fef475acb22239c9689e4f2e925daa6a91b7fe588f1443","href":"https://static.observableusercontent.com/files/b25084e516627c195b25fbfdb164e2c3e5f0a49d44708cbe78b3196af1f494a00d59af52711eb7a386fef475acb22239c9689e4f2e925daa6a91b7fe588f1443","name":"rock.png","type":"image/png","lastModified":1672782942060.145,"size":535080},{"id":"d562afc5089e0b021237d9fba7c33a5d438ed955f215debc1473172c3f439a12e10609244c7c4289156e40d35a269710ef1c102a3bb81a501b070b00e475363c","href":"https://static.observableusercontent.com/files/d562afc5089e0b021237d9fba7c33a5d438ed955f215debc1473172c3f439a12e10609244c7c4289156e40d35a269710ef1c102a3bb81a501b070b00e475363c","name":"HumpbackTail_Josh Silberg.jpg","type":"image/jpeg","lastModified":1672782942060.145,"size":118711},{"id":"fb4d5c6dd1ac8b94a9faeffc1c8a21779d2d1235342728b9e291856f5c94b6e7c41f1cd2b01d240e050790492c0e4943f3eace5cf04b9a733dd6b88cc4104c56","href":"https://static.observableusercontent.com/files/fb4d5c6dd1ac8b94a9faeffc1c8a21779d2d1235342728b9e291856f5c94b6e7c41f1cd2b01d240e050790492c0e4943f3eace5cf04b9a733dd6b88cc4104c56","name":"Other.png","type":"image/png","lastModified":1672782942060.145,"size":578721},{"id":"18f72ae5b89026f2767aa2c9a77f6854c1df9e422f4f35444727bc09a47b2385a79c2cb618dfcf3940b2094615eac6e1109f9ff255a4786a0ed13226f66924ca","href":"https://static.observableusercontent.com/files/18f72ae5b89026f2767aa2c9a77f6854c1df9e422f4f35444727bc09a47b2385a79c2cb618dfcf3940b2094615eac6e1109f9ff255a4786a0ed13226f66924ca","name":"Crescent gunnel 3.jpeg","type":"image/jpeg","lastModified":1672782942060.145,"size":118521},{"id":"26448bfd1f1ed3ff62e412c775fe2ba4122bf2849cecc4ce2a4ecc53de2b2e0bb51703cb4af617850b3fc3ee7cb71c13222e6e07a074b08cc4975c1e72061a2d","href":"https://static.observableusercontent.com/files/26448bfd1f1ed3ff62e412c775fe2ba4122bf2849cecc4ce2a4ecc53de2b2e0bb51703cb4af617850b3fc3ee7cb71c13222e6e07a074b08cc4975c1e72061a2d","name":"perche (1).jpg","type":"image/jpeg","lastModified":1672782942060.145,"size":14544},{"id":"c75f4d836293fdb8678d9ae9932da15244acc7731548893cf6ca7fcb927f92a27d6aac4abe80a77b61a1fb5b02a1c24f9e9f84db8fa12cdad96f48f06cb78076","href":"https://static.observableusercontent.com/files/c75f4d836293fdb8678d9ae9932da15244acc7731548893cf6ca7fcb927f92a27d6aac4abe80a77b61a1fb5b02a1c24f9e9f84db8fa12cdad96f48f06cb78076","name":"salmon.png","type":"image/png","lastModified":1672782942060.145,"size":413580},{"id":"73edfa79ba517d92ac2357d146e6bc57ad195ce6a029bf31debc6285b6889a3e6643f7c9d1ccf39902afd0f0fff795005084ff7191e4a7d954bd79ffb5cf6bac","href":"https://static.observableusercontent.com/files/73edfa79ba517d92ac2357d146e6bc57ad195ce6a029bf31debc6285b6889a3e6643f7c9d1ccf39902afd0f0fff795005084ff7191e4a7d954bd79ffb5cf6bac","name":"sharks1.png","type":"image/png","lastModified":1672782942060.145,"size":468056},{"id":"9ec1e7eab950f5752693335255ce148019b80312b8c198f11afdf96d462877f394d04b6d4ea7d254ca98beb3cc27ba72a2d03ac88707c2d7c13203766897c981","href":"https://static.observableusercontent.com/files/9ec1e7eab950f5752693335255ce148019b80312b8c198f11afdf96d462877f394d04b6d4ea7d254ca98beb3cc27ba72a2d03ac88707c2d7c13203766897c981","name":"all_fish (1).png","type":"image/png","lastModified":1672782942060.145,"size":564505},{"id":"05ed84a2c4f06a5afb41ed787a5b50b79588b24a0124da89532c414f408409d3737e6da7a6d51e112e6ab10ab31c1bc70a52f84fbf87039ab38c5a03c5fcc119","href":"https://static.observableusercontent.com/files/05ed84a2c4f06a5afb41ed787a5b50b79588b24a0124da89532c414f408409d3737e6da7a6d51e112e6ab10ab31c1bc70a52f84fbf87039ab38c5a03c5fcc119","name":"innderLegend.json","type":"application/json","lastModified":1672782942060.145,"size":818},{"id":"4c07834c7dc2c5ceccc5e4f1da34805d9498ff8ddb700c388cb5a06ab54f9ef866cddbe25a4d6df90a60875b68929042353768518543308f35e584938d69474b","href":"https://static.observableusercontent.com/files/4c07834c7dc2c5ceccc5e4f1da34805d9498ff8ddb700c388cb5a06ab54f9ef866cddbe25a4d6df90a60875b68929042353768518543308f35e584938d69474b","name":"sculpins.png","type":"image/png","lastModified":1672782942060.145,"size":556328},{"id":"464b804505bf12458a2fdbbfb1338db5f5d32b0af46bf0675e1a7f9d534dfd4d0e421f6316091960eb0498a5aad5aacf610b05e20c4cec3c585a3734fb75b71f","href":"https://static.observableusercontent.com/files/464b804505bf12458a2fdbbfb1338db5f5d32b0af46bf0675e1a7f9d534dfd4d0e421f6316091960eb0498a5aad5aacf610b05e20c4cec3c585a3734fb75b71f","name":"dataRolled.json","type":"application/json","lastModified":1672782942060.145,"size":3907918},{"id":"aad52c3d23d93b5bbe46fb41fe8ba94c769b562015dd56bd16cd90310afa3e6e04b577402e67e30d5681e1396b6b7b3cd3090c275d8544422650b5be5b9e95f6","href":"https://static.observableusercontent.com/files/aad52c3d23d93b5bbe46fb41fe8ba94c769b562015dd56bd16cd90310afa3e6e04b577402e67e30d5681e1396b6b7b3cd3090c275d8544422650b5be5b9e95f6","name":"Groups_July8b,2021 (1)-3-1.txt","type":"text/plain","lastModified":1672782942060.145,"size":14256},{"id":"800dddec27a3270496af5a9414801af82519ff8f90b833736b90a4c2869e9040e67f4b99b117d6dfabe4086987fb4b9db7c58409fd5ad20ea452f3c86b3c4496","href":"https://static.observableusercontent.com/files/800dddec27a3270496af5a9414801af82519ff8f90b833736b90a4c2869e9040e67f4b99b117d6dfabe4086987fb4b9db7c58409fd5ad20ea452f3c86b3c4496","name":"snail.png","type":"image/png","lastModified":1672782942060.145,"size":441726},{"id":"3ad5733151a856634e29b851a0ac7c14c73bb3f709e8010fe1dba0dde20e040c23b5444ee5111a7bb1d8585f514fd1187e9539ae3e13f1e57c4bc95d16c597d1","href":"https://static.observableusercontent.com/files/3ad5733151a856634e29b851a0ac7c14c73bb3f709e8010fe1dba0dde20e040c23b5444ee5111a7bb1d8585f514fd1187e9539ae3e13f1e57c4bc95d16c597d1","name":"untitled (19).png","type":"image/png","lastModified":1672782942060.145,"size":496725},{"id":"e1d261f3126340fdc485da133aadcf34990b312aad0c150a76aa12d40dfd5c6716f8aef338314faaacbff73ddd6c067d2e29181e3ab948f58ab9943a9ff7c59b","href":"https://static.observableusercontent.com/files/e1d261f3126340fdc485da133aadcf34990b312aad0c150a76aa12d40dfd5c6716f8aef338314faaacbff73ddd6c067d2e29181e3ab948f58ab9943a9ff7c59b","name":"values1.json","type":"application/json","lastModified":1672782942060.145,"size":4962},{"id":"da64322f991e21b9ef1e8091860627937669a4eb94578a53994a77c69284cc73c51d87154d5d002dba93e57b15b066732f5685ccadb4d128ce0f39a2d1cb68c2","href":"https://static.observableusercontent.com/files/da64322f991e21b9ef1e8091860627937669a4eb94578a53994a77c69284cc73c51d87154d5d002dba93e57b15b066732f5685ccadb4d128ce0f39a2d1cb68c2","name":"Sample_metadata_Plates1-7.txt","type":"text/plain","lastModified":1672782942060.145,"size":116675}] 2d:{"title":"Only made this to avoid republishing and breaking my production stie!","cells":[{"id":2942,"value":"md`\n# Only made this to avoid republishing and breaking my production stie!\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3685,"value":"md`These visualizations of eDNA data collected at coastal sites in British Columbia are used in the production [ICO website](https://ico.hakai.org/). \nsfsafasdf\nData raw data must be uploaded to the data processing notebook the results uploaded here, along with the metadata txt file provided by Matt L.\n\nData processing: \nhttps://observablehq.com/@mbrownshoes/edna-data-processing-and-prep-for-plotting-used-in-producti\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6854,"value":"sampleNum = md`\n${metadata.length} samples analyzed\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7824,"value":"speciesNum = md`\n${[...new Set(dataRolled.map((d) => d.species))].length} species observed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7831,"value":"siteNum = md`${d3.group(dataRolled, d => d.site).size} sites`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4136,"value":"viewof rects = previews(fishWithPics)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4882,"value":"mutable selectedSite = null //Select([null].concat(allSites), {\n// label: \"Selected site\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":11775,"value":"focus1","pinned":true,"hidden":false,"mode":"ojs"},{"id":8098,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":10796,"value":"scrubberLegend = Plot.legend({\n marginLeft: 10,\n marginRight: 10,\n\n style: {\n // backgroundColor: \"#000000\",\n // color: \"#e0f5ee\",\n // fontSize: \"16px\",\n // fontWeight: \"normal\"\n },\n color: {\n scheme: \"blues\",\n fillOpacity: 0.1,\n // type: \"diverging\",\n domain: [0, d3.max(filledLineDataScrubber, (d) => d.value)],\n // pivot: 0,\n // reverse: true,\n // legend: true\n label: \"Number of species\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8900,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4879,"value":"viewof speciesList = Inputs.select(\n [null].concat(\n uniqSpecies.sort((a, b) => d3.ascending(a.toLowerCase(), b.toLowerCase()))\n ),\n {\n label: \"Species\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10303,"value":"mutable type = \"All\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11452,"value":"viewof click = {\n return selectedSite != null\n ? Inputs.button(\"Deselect site\", {\n value: null,\n // width: 100,\n reduce: () => {\n mutable selectedSite = null;\n const container = map.getContainer();\n container.value.selected = null;\n container.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n }\n })\n : md``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11068,"value":"viewof reset = Inputs.button(\"Reset map\", {\n value: null,\n // width: 100,\n reduce: () => {\n mutable selectedSite = null;\n mutable type = \"All\";\n // fishWithPics.map(preview);\n d3.selectAll(\".badge\").style(\"border\", \"3px solid #e8e8e8\");\n d3.select(\"#All\").style(\"border\", \"3px solid #ec4977\");\n const container = map.getContainer();\n container.value.selected = null;\n container.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11534,"value":"md`Mapbox updates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10137,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":10178,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":8989,"value":"updateMapbox = {\n // Updates after brushing\n console.log(\"updateMapBox\");\n\n // This allows us to update the map with data without re-rendering the whole cell\n // There is a bit of weirdness around adding and removing the layer to make sure mapbox rerenders\n let fc = {\n type: \"FeatureCollection\",\n features: hexgeo.sort((a, b) => b.properties.r - a.properties.r)\n };\n if (map._loaded) {\n // update();\n\n if (!map.getSource(\"stories\")) {\n map.addSource(\"stories\", {\n type: \"geojson\",\n data: fc\n });\n } else {\n map.getSource(\"stories\").setData(fc);\n }\n if (map.getLayer(hexbinLayer.id)) {\n map.removeLayer(hexbinLayer.id);\n }\n map.addLayer(hexbinLayer);\n\n return true;\n }\n // console.log(\"does this run?\");\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10107,"value":"circleLocations = {\n const sitesPacked = createSitePacks();\n const values = [...new Map(sitesPacked).values()];\n const valuesCollide = applySimulation(values);\n const flatData = [];\n valuesCollide.map((d) => {\n flatData.push({\n r: d.r,\n x: d.x,\n y: d.y,\n site: d.k,\n species: \"All\",\n opacity: 0.6\n });\n d.nodes.map((node) => {\n flatData.push({\n r: node.r,\n x: d.x + node.x,\n y: d.y + node.y,\n site: node.data.site,\n species: node.data.key,\n opacity: 0.9\n });\n });\n });\n let outdata = [];\n flatData.map((d) => {\n let loc = map.unproject(d); // key to getting the lat, lons back\n outdata.push({\n ...d,\n lat: loc.lat,\n lng: loc.lng\n });\n });\n return outdata;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10181,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":8921,"value":"hexbinLayer = {\n return {\n id: \"stories\",\n type: \"circle\",\n source: \"stories\",\n paint: {\n \"circle-stroke-color\": \"rgb(232,97,36)\",\n \"circle-stroke-width\": [\"get\", \"stroke\"],\n \"circle-radius\": [\"get\", \"radius\"],\n \"circle-color\": [\"get\", \"color\"],\n \"circle-opacity\": [\"get\", \"opacity\"]\n },\n layout: {}\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9006,"value":"hexgeo = circleLocations.map((d, i) => {\n let sel = {};\n if (selected && selected[0]) {\n sel = selected[0];\n }\n // if (d.acf.geolocation != null) {\n return {\n id: i,\n properties: {\n ...d,\n stroke: d.site === sel.site && d.species === \"All\" ? 1 : 0,\n color: d.species === \"All\" ? \"white\" : colorScale(d.species),\n radius: d.r,\n opacity: d.opacity\n },\n geometry: {\n type: \"Point\",\n coordinates: [d.lng, d.lat]\n },\n type: \"Feature\"\n };\n // }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8929,"value":"hex = {\n const data = [];\n for (let i = 0; i < bcSiteLocs.length; i++) {\n data.push({\n site: bcSiteLocs[i].site,\n lat: bcSiteLocs[i].lat,\n lng: bcSiteLocs[i].long,\n category: \"none\"\n });\n }\n // replace categories with real value\n if (sitesForDate.length > 0) {\n data.forEach((d) => {\n let sta = sitesForDate.find((h) => h.site === d.site);\n\n if (sta === undefined) {\n d.category = \"noMeasurements\";\n }\n if (sta) {\n d.catCount = d3.sum(sta.species_present[0][1], (d) => d.count);\n d.catCount > 0 ? (d.category = \"present\") : (d.category = \"none\");\n }\n });\n }\n\n return data.filter((d) => d.category != \"noMeasurements\"); // lets hide sites not visited\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8103,"value":"dateExtent = [\n new Date(filledLineDataScrubber[0].date),\n new Date(\n +new Date(filledLineDataScrubber[filledLineDataScrubber.length - 1].date) +\n 24 * 60 * 60 * 1000 * 30\n )\n] //start and end date","pinned":false,"hidden":false,"mode":"ojs"},{"id":8109,"value":"focusHeight = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":8164,"value":"datesForPlot = allDates.map((d) => new Date(d).toISOString().substring(0, 10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8120,"value":"margin = ({ top: 4, right: 20, bottom: 30, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":8171,"value":"sstaColors = d3\n .scaleSequential(d3.interpolateBlues)\n .domain([0, d3.max(filledLineDataScrubber, (d) => d.value)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":8658,"value":"formatMonth = d3.timeFormat(\"%Y-%m\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8653,"value":"focus = [\n formatMonth(d3.timeMonth.floor(focus1[0])) + \"-01\",\n formatMonth(d3.timeMonth.ceil(focus1[1])) + \"-01\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":9318,"value":"mutable circleLocs = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":8925,"value":"selected = hexbyLocation.get(map.selected ? map.selected.data.site : \"\") || []","pinned":false,"hidden":false,"mode":"ojs"},{"id":8927,"value":"hexbyLocation = d3.group(hex, (d) => d.site)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8940,"value":"sitesForDate = {\n const data = d3.groups(\n dataWithCount,\n (d) => d.site,\n (d) => d.group\n );\n\n return data.map((d) => {\n return {\n site: d[0],\n species_present: d[1]\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8916,"value":"mutable siteClicked = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":8902,"value":"r = \"mapbox://styles/hakai/ckwuxmze164c314pe8hs0s1on\" //\"mapbox://styles/hakai/ckwuxmze164c314pe8hs0s1on\" //\"mapbox://styles/hakai/ckwuxmze164c314pe8hs0s1on\" //\"mapbox://styles/hakai/ckwpei0yq08cj15nthgd4ql45\" //\"mapbox://styles/mapbox/dark-v10\" //mapbox://styles/hakai/ckwp8ahbx2u0w15o5zwx3odtn\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11550,"value":"md`### barcharts and headings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4894,"value":"siteName = {\n if (selectedSite !== null) {\n if (Array.isArray(selectedGroup) === true || selectedGroup === \"All\") {\n return md`All species observed at **${selectedSite}**`;\n } else {\n return md`**${selectedSite}**`;\n }\n } else if (type === \"All\" && speciesList == null) {\n return legend1(uniqGroups);\n } else if (type === \"All\" && speciesList != null) {\n return legend1([\n familyGroupings.find(d => d['Common Name'] === speciesList).Group\n ]);\n } else {\n return legend1([type]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11194,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2267,"value":"gp1Chart = {\n // control how bar chart plotting is done\n if (Array.isArray(barData) === false && selectedSite != null) {\n return chart2(barData, speciesList);\n } else if (barData && selectedSite != null) {\n return chart2(barData[0], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2303,"value":"gp2 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false && barData[1]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[1].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n //Is single species is selected from \"All\" group\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[1]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[2] &&\n selectedSite !== null\n ) {\n return md`${barData[1]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2286,"value":"gp2Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[1], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2307,"value":"gp3 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false && barData[2]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[2].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n //Is single species is selected from \"All\" group\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[4]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[2] &&\n selectedSite !== null\n ) {\n return md`${barData[2]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2305,"value":"gp3Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[2], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2311,"value":"gp4 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false && barData[4]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[3].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n //Is single species is selected from \"All\" group\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[3]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[3] &&\n selectedSite !== null\n ) {\n return md`${barData[3]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2309,"value":"gp4Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[3], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11378,"value":"md`need to find when speciesList is not part of this group, then return nothing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2328,"value":"gp5 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false&& barData[4]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[4].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n //Is single species is selected from \"All\" group\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[4]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[4] &&\n selectedSite !== null\n ) {\n return md`${barData[4]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2313,"value":"gp5Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[4], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"gp6 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false&& barData[5]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[5].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[5]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[5] &&\n selectedSite !== null\n ) {\n return md`${barData[5]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2314,"value":"gp6Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[5], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2331,"value":"gp7 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false && barData[6]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[6].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[6]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[6] &&\n selectedSite !== null\n ) {\n return md`${barData[6]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2316,"value":"gp7Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[6], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2333,"value":"gp8 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false&& barData[7]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[7].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[7]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[7] &&\n selectedSite !== null\n ) {\n return md`${barData[7]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2319,"value":"gp8Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[7], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2335,"value":"gp9 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false && barData[8]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[8].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[8]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[8] &&\n selectedSite !== null\n ) {\n return md`${barData[8]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2321,"value":"gp9Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[8], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2337,"value":"gp10 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false && barData[9]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[9].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[9]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[9] &&\n selectedSite !== null\n ) {\n return md`${barData[9]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2323,"value":"gp10Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[9], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2373,"value":"gp11 = {\n let anySpecies = 0;\n if (Array.isArray(barData) != false && barData[10]) {\n anySpecies = [\n ...new Set(\n heatData\n .filter((d) => barData[10].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n ];\n }\n if (\n speciesList != null &&\n familyGroupings.find((d) => d[\"Common Name\"] === speciesList).Group !==\n barData[10]\n ) {\n return md``;\n }\n if (anySpecies.length < 1) {\n return md``;\n } else if (\n Array.isArray(barData) === true &&\n barData[10] &&\n selectedSite !== null\n ) {\n return md`${barData[10]}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"gp11Chart = {\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[10], speciesList);\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10868,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":6493,"value":"md`\n### Legend and Annotations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6516,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":6509,"value":"innerLegendVals = FileAttachment(\"innderLegend.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6511,"value":"legendVals = FileAttachment(\"values1.json\").json() // use static data to keep size from changing","pinned":false,"hidden":false,"mode":"ojs"},{"id":11166,"value":"legChart = {\n labelAnnotations;\n if (speciesList !== null) {\n return md``;\n } else {\n return render_bubLeg();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6500,"value":"applyAnnotations = function(annotations, target) {\n /*Draws d3.annotation objects onto a designated DOM node */\n // const gAnnote = svg.append(\"g\").attr(\"class\", \"annotation-group\");\n d3.select(target)\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(annotations);\n\n return annotations;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6497,"value":"labelAnnotations = {\n if (speciesList !== null) {\n return [{}];\n } else if (type === \"All\") {\n return [\n {\n note: { label: \"Sized by number of unique species\" },\n data: { xy: [108, 95], shiftBy: [18, -38] },\n dy: -9,\n dx: -10,\n color: \"#dc143c\"\n },\n {\n note: { label: \"Sized by number of species in group\" },\n data: { xy: [116, 135], shiftBy: [18, -48] },\n dy: 9,\n dx: -20,\n color: \"#dc143c\"\n }\n ];\n } else {\n return [\n {\n note: { label: \"Sized by number of species in group\" },\n data: { xy: [121, 135], shiftBy: [18, -48] },\n dy: 9,\n dx: -20,\n color: \"#dc143c\"\n }\n ];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6503,"value":"getAnnotations = function(annotationList, chart) {\n legChart;\n let makeMyAnnotations = d3_svg_annotation\n .annotation()\n .type(d3_svg_annotation.annotationCalloutElbow) //annotationCalloutCircle\n .accessors({\n x: d => d.xy[0] + d.shiftBy[0],\n y: d => d.xy[1] + d.shiftBy[1]\n })\n .editMode(false)\n .annotations(annotationList);\n\n return makeMyAnnotations;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6506,"value":"annotations = applyAnnotations(getAnnotations(labelAnnotations), legChart)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6527,"value":"md`\n### Map functions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6620,"value":"legend1 = function(groups) {\n const svg = d3\n .select(DOM.svg(200, groups.length * (groups.length === 1 ? 50 : 30)))\n .style(\"font\", \"12px sans-serif\");\n\n const g = svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(groups)\n .enter()\n .append(\"g\")\n .attr(\n \"transform\",\n (d, i) => `translate(${20},${i === 0 ? 27 : i * 27 + 27})`\n );\n\n g.append(\"circle\")\n .attr(\"cx\", 10)\n .attr(\"cy\", 10)\n .attr(\"r\", 12)\n .attr(\"fill\", function(d) {\n return colorScale(d);\n });\n\n g.append(\"text\")\n .attr(\"x\", 26)\n .attr(\"y\", 12)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.replace(\"(\", \" (\"));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9251,"value":"applySimulation = (nodes) => {\n const simulation = d3\n .forceSimulation(nodes)\n .force(\n \"x\",\n d3\n .forceX()\n .x((d) => d.x)\n .strength(0.3)\n )\n .force(\n \"y\",\n d3\n .forceY()\n .y((d) => d.y)\n .strength(0.3)\n )\n //.force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\n \"collide\",\n d3\n .forceCollide()\n .radius((d) => d.r + NODE.PADDING)\n .strength(0.1)\n ) //force packs apart\n .stop();\n while (simulation.alpha() > 0.01) {\n simulation.tick();\n }\n return simulation.nodes();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9258,"value":"radius = d3\n .scaleSqrt()\n .domain([1, d3.max(groupNumBySite, (d) => d3.max(d[1], (v) => v[1]))])\n .range([NODE.MIN_RADIUS, NODE.MAX_RADIUS])","pinned":false,"hidden":false,"mode":"ojs"},{"id":6544,"value":"packSiblings = (values) => d3.packSiblings(values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9254,"value":"maxRadius = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":6546,"value":"NODE = ({ MIN_RADIUS: minRadius, MAX_RADIUS: maxRadius, PADDING: 2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6553,"value":"minRadius = {\n return speciesList == null ? 5 : 7;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6716,"value":"packEnclose = nodes => d3.packEnclose(nodes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6534,"value":"colorScale = d3 // ) // .reverse() // ) // [...new Set(d3.map(dataRolled, d => d.group))].length // d3.interpolateRainbow, // .quantize( // d3 // d3.scaleOrdinal(\n .scaleOrdinal()\n // .unknown(\"#ccc\")\n .domain(\n uniqGroups\n // .sort((a, b) =>\n // d3.ascending(a, b)\n // )\n )\n .range(\n d3\n .quantize(\n d3.interpolateRainbow,\n [...new Set(d3.map(dataRolled, d => d.group))].length + 1\n )\n .reverse()\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":6562,"value":"md`\n## Image buttons\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7452,"value":"images = [\n ...(\n await preload([\n await FileAttachment(\"all_fish (1).png\").url(),\n await FileAttachment(\"sculpins.png\").url(),\n await FileAttachment(\"rock.png\").url(),\n await FileAttachment(\"flatfish (1).png\").url(),\n await FileAttachment(\"foragefish.jpg\").url(),\n await FileAttachment(\"sharks1.png\").url(),\n await FileAttachment(\"salmon.png\").url(),\n await FileAttachment(\"Crescent gunnel 3.jpeg\").url(),\n await FileAttachment(\"snail.png\").url(),\n await FileAttachment(\"untitled (19).png\").url(),\n await FileAttachment(\"HumpbackTail_Josh Silberg.jpg\").url(),\n await FileAttachment(\"perche (1).jpg\").url(),\n await FileAttachment(\"Other.png\").url()\n ])\n ).values()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6653,"value":"text = [\n { species: \"All\" },\n { species: \"Sculpins\" },\n { species: \"Rockfish\" },\n { species: \"Flatfish\" },\n { species: \"Forage fish\" },\n { species: \"Cartilaginous fishes\" },\n\n { species: \"Salmon\" },\n { species: \"Eelpouts and pricklebacks\" },\n { species: \"Snailfish\" },\n { species: \"Poachers\" },\n { species: \"Marine Mammal\" },\n { species: \"Perches\" },\n { species: \"Other\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8073,"value":"fetchImage = (src) => {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = src;\n return img.decode().then(() => img);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8071,"value":"// Preload all images\npreload = async (\n urls,\n {\n ignoreExceptions = false,\n throttle = false,\n throttleNumber = 1,\n throttlePeriod = 1000,\n throttleEquallySpaced = false\n } = {\n ignoreExceptions: false,\n throttle: false,\n throttleNumber: 1,\n throttlePeriod: 1000,\n throttleEquallySpaced: false\n }\n) => {\n const f = throttle ? (fn) => fn() : (fn) => fn();\n return Promise.all(\n [...new Set(urls)].map(\n (src) =>\n new Promise((resolve, reject) =>\n f(() =>\n fetchImage(src)\n .then((img) => resolve([src, img]))\n .catch((e) => {\n if (ignoreExceptions) {\n resolve([src, undefined]);\n } else {\n reject(e);\n }\n })\n )\n )\n )\n ).then((imgs) => new Map(imgs));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6691,"value":"fishWithPics = {\n return Array.from({ length: images.length }, (d, i) => {\n return [\n images[i],\n {\n img: images[i % images.length].src,\n id: DOM.uid(),\n species: text[i].species\n }\n ];\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6565,"value":"function previews(mins) {\n return html`

${mins.map(\n preview\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6568,"value":"function preview([image, min]) {\n return html1`

{\n d3.selectAll(\".badge\").style(\"border\", \"3px solid #e8e8e8\");\n event.currentTarget.firstElementChild.style.borderColor = \"#ec4977\";\n mutable type = min.species;\n }}\n\n>\n

\n\n\n

${\n min.species\n }

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6575,"value":"md`\n## Selection controls\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6578,"value":"resetGroup = {\n if (speciesList !== null)\n mutable selectedGroup = [\n ...new Set(\n dataRolled.filter(d => d.species === speciesList).map(d => d.group)\n )\n ][0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6587,"value":"mutable selectedGroup = type","pinned":false,"hidden":false,"mode":"ojs"},{"id":6629,"value":"md`\n## Other / data manipulation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10468,"value":"filledLineDataScrubber = {\n console.log(\"cell is run\");\n const out = [];\n // add a day so that the last month is included in the range\n const endMonth = new Date(\n +d3.max(dataRolled, (d) => new Date(d.date)) + 24 * 60 * 60 * 1000\n );\n // new Date(endMonth.setMonth(endMonth.getMonth() + 1));\n const monthsStartToFinish = d3.timeMonth.range(\n d3.min(dataRolled, (d) => new Date(d.date)),\n endMonth\n );\n\n // console.log(monthsStartToFinish);\n monthsStartToFinish.forEach((d) => {\n d = d.toISOString().substring(0, 10);\n // console.log(d);\n let match = monthlySpeciesCountScrubber.find((j) => j.date === d);\n // match.date = match.date.toISOString().substring(0, 10);\n // console.log(match);\n match === undefined ? out.push({ date: d, value: 0 }) : out.push(match);\n });\n\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6679,"value":"endDate = new Date(focus[1]) //new Date(filledLineData[timeSlider[1]].date) //d3.timeMonth.ceil(new Date(endDate2)) //filledLineData[timeSlider[1]].date","pinned":false,"hidden":false,"mode":"ojs"},{"id":6673,"value":"speciesCountbyMonth = d3.rollup(\n dataForBars.filter((d) => d.count === 1),\n (v) => [...new Set(d3.map(v, (d) => d.species))].length,\n (d) => d.date\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10464,"value":"speciesCountbyMonthScrubber = d3.rollup(\n dataForScrubber.filter((d) => d.count === 1),\n (v) => [...new Set(d3.map(v, (d) => d.species))].length,\n (d) => d.date\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6623,"value":"barData = {\n return type === \"All\"\n ? [\n ...new Set(\n dataRolled\n .filter((d) => d.site === selectedSite && d.count > 0)\n .map((d) => d.group)\n .sort((a, b) => d3.ascending(a.toLowerCase(), b.toLowerCase()))\n )\n ]\n : type;\n\n // typeof selectedGroup === \"string\" || selectedGroup === null\n // ? selectedGroup\n // : selectedGroup.sort((a, b) =>\n // d3.ascending(a.toLowerCase(), b.toLowerCase())\n // );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6609,"value":"speciesTableData = {\n const out = [];\n uniqSpecies.forEach((d) => {\n out.push({\n Species: d,\n source_url: familyGroupings.find((j) => j[\"Common Name\"] == d)\n .FishBaseURL,\n \"Sites observed\": [\n ...new Set(\n dataForBars\n .filter((j) => j.species == d && j.count > 0)\n .map((j) => j.site)\n )\n ].length\n });\n });\n return speciesList == null\n ? out.filter((d) => d[\"Sites observed\"] > 0)\n : out.filter((d) => d[\"Sites observed\"] > 0 && d.Species === speciesList);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6590,"value":"uniqGroups = [...new Set(dataRolled.map(d => d.group))].sort((a, b) =>\n d3.ascending(a.toLowerCase(), b.toLowerCase())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6614,"value":"// Function to render a table\nrender_data_table = options => html` \n \n ${Object.keys(options[0]).map((d, i) => {\n let label = d;\n if (d === \"source_url\" || d === \"data_url\") return \"\";\n return ``;\n })}\n \n \n \n ${options.map(row => {\n // return html``\n return html`${Object.keys(row).map((key, index) => {\n if (key === \"Species\") {\n return ``;\n } else if (key === \"source_url\" || key === \"data_url\") return \"\";\n return ``;\n })}`;\n })}\n \n\n

${label}
${row[key]}	${row[key]}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1935,"value":"allDates = d3.timeMonth\n .range(new Date(dateExtent[0]), new Date(\"2020-12-01\"))\n .map((d) => d.toISOString().substring(0, 10))\n// [...new Set(dataForBars.map((d) => d.date))].sort((a, b) =>\n// d3.ascending(a, b)\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1792,"value":"uniqSpecies = type === \"All\"\n ? [...new Set(dataRolled.map(d => d.species))]\n : [...new Set(dataRolled.filter(d => d.group === type).map(d => d.species))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1598,"value":"heatData = dataRolled.filter((d) => {\n\n return (\n new Date(d.date) >= d3.timeMonth(startDate) &&\n new Date(d.date) <= d3.timeMonth(endDate) &&\n d.site === selectedSite\n );\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6351,"value":"multiFormat = {\n var formatMillisecond = d3.timeFormat(\".%L\"),\n formatSecond = d3.timeFormat(\":%S\"),\n formatMinute = d3.timeFormat(\"%I:%M\"),\n formatHour = d3.timeFormat(\"%I %p\"),\n formatDay = d3.timeFormat(\"%a %d\"),\n formatWeek = d3.timeFormat(\"%b %d\"),\n formatMonth = d3.timeFormat(\"%b\"),\n formatYear = d3.timeFormat(\"%Y\");\n\n function multiFormat(date) {\n return (d3.timeSecond(date) < date\n ? formatMillisecond\n : d3.timeMinute(date) < date\n ? formatSecond\n : d3.timeHour(date) < date\n ? formatMinute\n : d3.timeDay(date) < date\n ? formatHour\n : d3.timeMonth(date) < date\n ? d3.timeWeek(date) < date\n ? formatDay\n : formatWeek\n : d3.timeYear(date) < date\n ? formatMonth\n : formatYear)(date);\n }\n return multiFormat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10466,"value":"monthlySpeciesCountScrubber = Array.from(\n speciesCountbyMonthScrubber,\n ([key, values]) => {\n return {\n date: key,\n // datestr: key,\n value: values\n };\n }\n).sort((a, b) => a.date - b.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":6661,"value":"startDate = new Date(focus[0]) //new Date(filledLineData[timeSlider[0]].date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"dataForBars = dataRolled.filter((d) => {\n // const type = \"All\"\n d.date = new Date(d.date).toISOString().substring(0, 10);\n return speciesList === null\n ? type === \"All\"\n ? d.group !== \"nothing\"\n : d.group === type\n : type === \"All\"\n ? d.group !== \"nothing\"\n : d.group === type && d.species === speciesList;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10431,"value":"dataForScrubber = dataRolled.filter((d) => {\n // return 'all' for the brush\n let type = \"All\";\n let speciesList = null;\n d.date = new Date(d.date).toISOString().substring(0, 10);\n return speciesList === null\n ? type === \"All\"\n ? d.group !== \"nothing\"\n : d.group === type\n : type === \"All\"\n ? d.group !== \"nothing\"\n : d.group === type && d.species === speciesList;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"dataWithCount = dataRolled.filter((d) => {\n const speciesType = type;\n // console.log(\"dataWithCount \", type);\n\n return speciesList === null\n ? speciesType === \"All\"\n ? d.count === 1 &&\n new Date(d.date) >= new Date(startDate) &&\n new Date(d.date) < new Date(endDate)\n : d.count === 1 &&\n new Date(d.date) >= new Date(startDate) &&\n new Date(d.date) < new Date(endDate) &&\n d.group === speciesType\n : speciesType === \"All\"\n ? d.count === 1 &&\n new Date(d.date) >= new Date(startDate) &&\n new Date(d.date) < new Date(endDate) &&\n d.species === speciesList\n : d.count === 1 &&\n new Date(d.date) >= new Date(startDate) &&\n new Date(d.date) < new Date(endDate) &&\n d.group === speciesType &&\n d.species === speciesList;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4500,"value":"groupNumBySite = d3.rollups(\n dataRolled.filter((d) => d.count > 0),\n (v) => [...new Set(d3.map(v, (d) => d.species))].length,\n (d) => d.site,\n (d) => d.group\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"dataBySiteandGroup = d3.group(dataWithCount, d => d.site, d => d.group) // this includes multiples of same species","pinned":false,"hidden":false,"mode":"ojs"},{"id":6638,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":11736,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":6649,"value":"md`\n## Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8000,"value":"dataRolled = await FileAttachment(\"dataRolled.json\").json()\n// .map((d) => (d.date = new Date(d.date)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":7955,"value":"familyGroupings = {\n const raw = d3.tsvParse(\n await FileAttachment(\"Groups_July8b,2021 (1)-3-1.txt\").text(),\n d3.autoType\n );\n const clean = raw.filter((d) => d[\"Common Name\"] != undefined); // remove blank lines\n return clean;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7960,"value":"metadata = {\n const raw = d3.tsvParse(\n await FileAttachment(\"Sample_metadata_Plates1-7.txt\").text(),\n d3.autoType\n );\n const clean = raw.filter((d) => d.Sample_ID != undefined); // remove blank lines\n return clean;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8025,"value":"bcSiteLocs = _.uniqBy(metadata, ({ lat, long }) => lat)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11715,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":6556,"value":"html1 = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1790,"value":"import { Select, Text, bind } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5048,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8914,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiaGFrYWkiLCJhIjoiY2lyNTcwYzY5MDAwZWc3bm5ubTdzOWtzaiJ9.6QhxH6sQEgK634qO7a8MoQ\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}