2f:T1796,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, endDate); // console.log("start ", d3.timeMonth.ceil(startDate)); const x = d3.scaleTime().range([0, chart_width]).domain([startDate, endDate]); // console.log(startDate); // .padding(0.1); const xAxis = d3 .axisBottom(x) .ticks(d3.timeMonth) .tickFormat((d, i) => { let nm = months > 20 ? 12 : months > 18 && months < 20 ? 3 : months < 12 ? 1 : 2; let monthNum = new Date(d).getMonth(); let isOdd = monthNum % 2 === 0; // console.log(i,nm, d,monthNum,monthNum % 2,isOdd) return (nm === 12 && monthNum === 0) || (nm === 12 && monthNum === 6) ? multiFormat(d, monthNum) : nm < 12 && isOdd ? multiFormat(d, monthNum) : nm === 1 ? multiFormat(d, monthNum) : ""; }); 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) ); console.log(isData); 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(d.date)) .attr("y", (d) => { // console.log(d.date); return y(d.species); }) .attr("width", (d) => { // console.log(d.date,(d3.utcMonth.offset((d.date), 1))) return x(d3.utcMonth.offset(d.date, 1)) - x(d3.utcMonth.floor(d.date)); }) .attr("height", y.bandwidth()) .attr("fill", (d) => { // console.log(d.count); 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["row_names"] == 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``; } }30:T71a,multiFormat = { var formatMillisecond = d3.timeFormat(".%L"), formatSecond = d3.timeFormat(":%S"), formatMinute = d3.timeFormat("%I:%M"), formatHour = d3.timeFormat("%I %p"), formatDay = d3.timeFormat("%a %d"), formatWeek = d3.timeFormat("%b %d"), formatMonth = d3.timeFormat("%b"), formatYear = d3.timeFormat("%Y"); function multiFormat(date,monthNum) { // console.log(date,monthNum,formatYear(date)) return monthNum === 0 ? formatYear(date) : (d3.timeSecond(date) < date ? formatMillisecond : d3.timeMinute(date) < date ? formatSecond : d3.timeHour(date) < date ? formatMinute : d3.timeDay(date) < date ? formatHour : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek) : d3.timeYear(date) < date ? formatMonth : formatYear)(date); } return multiFormat; } // multiFormat = { // var formatMillisecond = d3.timeFormat(".%L"), // formatSecond = d3.timeFormat(":%S"), // formatMinute = d3.timeFormat("%I:%M"), // formatHour = d3.timeFormat("%I %p"), // formatDay = d3.timeFormat("%a %d"), // formatWeek = d3.timeFormat("%b %d"), // formatMonth = d3.timeFormat("%b"), // formatYear = d3.timeFormat("%Y"); // function multiFormat(date) { // // console.log(d3.timeYear(date) < date) // return (d3.timeSecond(date) < date // ? formatMillisecond // : d3.timeMinute(date) < date // ? formatSecond // : d3.timeHour(date) < date // ? formatMinute // : d3.timeDay(date) < date // ? formatHour // : d3.timeMonth(date) < date // ? d3.timeWeek(date) < date // ? formatDay // : formatWeek // : d3.timeYear(date) < date // ? formatMonth // : formatYear)(date); // } // return multiFormat; // }31:T58c,brushFilterX = function ( extent, { defaultExtent, marginTop = 10, marginRight = 20, marginBottom = 20, marginLeft = 65, width = document.body.clientWidth, height = focusHeight } = {} ) { const x = d3 .scaleTime() .domain(extent) .range([marginLeft, width - marginRight]); const xAxis = (g) => g .attr("transform", `translate(0,${height - marginBottom + 1 - 5})`) .call(d3.axisBottom(x).ticks(width < 710 ? 6 : 10)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .attr("class", "timeScrubber"); const brush = d3 .brushX() .extent([ [marginLeft, marginTop], [width - marginRight, height - marginBottom - 5] ]) .on("brush end", brushed); svg.append("g").call(xAxis); let b = svg.append("g").call(brush); if (defaultExtent) b.call(brush.move, defaultExtent.map(x)); function brushed(event) { svg.node().value = event.selection === null ? null : event.selection .map(x.invert, x) .map((d, i) => i === 0 ? d3.utcMonth.floor(d) : d3.utcMonth.ceil(d) ); svg.node().dispatchEvent(new Event("input", { bubbles: true })); const selection = event.selection; d3.select(this).call(brushHandle, selection); } svg.node().value = defaultExtent ? defaultExtent : null; return svg.node(); }32:T5c0,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: true, doubleClickZoom: true, maxZoom: 12, minZoom: 4 })); map.on("load", function () { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); 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; }33:T731,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: .8 }); 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; } }34: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); }); }35:T731,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) => { console.log(d, radius(d.speciesNum)); console.log("range", radius.range()); // Gets [minRadius, maxRadius] console.log( "domain", radius.domain() // Gets [1, maxSpecies] ); 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 console.log(nodes); 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; }36:T4dc,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) ) ]; } // console.log(Allspecies) // if(Allspecies > 0) if (anySpecies.length < 1) { return md``; } if ( speciesList != null && familyGroupings.find((d) => d["row_names"] === 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); } }37:T44c,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); return svg.node(); }38:[{"id":"b66d40696aeab82ce152ad381e76b76dfadbd7865591cad9caae411a0c6e05b93685f968d31f4ebd737b78b59d3e6ec641589c4ad5399fb099abe7c8d40e7c3b","href":"https://static.observableusercontent.com/files/b66d40696aeab82ce152ad381e76b76dfadbd7865591cad9caae411a0c6e05b93685f968d31f4ebd737b78b59d3e6ec641589c4ad5399fb099abe7c8d40e7c3b","name":"sample_metadata.ICO_12S.combined (2) (1).txt","type":"text/plain","lastModified":1720709597995.889,"size":400669},{"id":"d2a4e456245bf668e9d9f983601f38def25fe5501b4bfccf6f5d9abd7708ae0c3d926893430c26194bd3129aedb3e40a2320a67dbbabbe2bdeeb8084b33ea132","href":"https://static.observableusercontent.com/files/d2a4e456245bf668e9d9f983601f38def25fe5501b4bfccf6f5d9abd7708ae0c3d926893430c26194bd3129aedb3e40a2320a67dbbabbe2bdeeb8084b33ea132","name":"dataRolled (6).csv","type":"text/csv","lastModified":1720709813487.189,"size":7036439},{"id":"537202b34ea502d8d3b3f488e6842ecc85703f9dc8b3af71c3ac8a90923e55ca52c0a4cad0658463dd99df856531918ca048e0adb56066f1e715c0f11f6ece74","href":"https://static.observableusercontent.com/files/537202b34ea502d8d3b3f488e6842ecc85703f9dc8b3af71c3ac8a90923e55ca52c0a4cad0658463dd99df856531918ca048e0adb56066f1e715c0f11f6ece74","name":"groups.ICO_12S.combined (2) (1).txt","type":"text/plain","lastModified":1720709834296.519,"size":15822},{"id":"7a4d378736e27839b6a36b8045ed561115cf1af28213649d33461c2dd466f1301d372286824a5906f25273736a3149f6b1590f8605e58ad43cfa57ad985b8471","href":"https://static.observableusercontent.com/files/7a4d378736e27839b6a36b8045ed561115cf1af28213649d33461c2dd466f1301d372286824a5906f25273736a3149f6b1590f8605e58ad43cfa57ad985b8471","name":"dataRolled (7).csv","type":"text/csv","lastModified":1728065102316.239,"size":7295822},{"id":"d4a48ab99d6c585f074bf84347867faf0cbf5c3c83a86a7f1b9e53510dd2d8aa9b15a0015e03c804f0faea1cf303de44fee8bc2dccd40688d34099d02aa12e62","href":"https://static.observableusercontent.com/files/d4a48ab99d6c585f074bf84347867faf0cbf5c3c83a86a7f1b9e53510dd2d8aa9b15a0015e03c804f0faea1cf303de44fee8bc2dccd40688d34099d02aa12e62","name":"sample_metadata.ICO_12S.combined (3).txt","type":"text/plain","lastModified":1728065113772.55,"size":400890},{"id":"f9faf45d43f7880bc5d5dd0541aac7d5d825cecd5dd7597d5f30c03bc6b508448371d8003b92563c28dc4aa86f010d9108943ba7b2fb4323f0ffdd585cead821","href":"https://static.observableusercontent.com/files/f9faf45d43f7880bc5d5dd0541aac7d5d825cecd5dd7597d5f30c03bc6b508448371d8003b92563c28dc4aa86f010d9108943ba7b2fb4323f0ffdd585cead821","name":"sample_metadata.ICO_12S.combined (4).txt","type":"text/plain","lastModified":1728574480128.361,"size":399480},{"id":"3d6c97a843ab5d03a8bdd95db6aba58d113b56fa94151bf6012143f7607430c85364fa5a6db3e6d9a515f134620d2cc9000a7656216737dce94ec82f991d693f","href":"https://static.observableusercontent.com/files/3d6c97a843ab5d03a8bdd95db6aba58d113b56fa94151bf6012143f7607430c85364fa5a6db3e6d9a515f134620d2cc9000a7656216737dce94ec82f991d693f","name":"dataRolled (8).csv","type":"text/csv","lastModified":1728574495186.076,"size":7264373},{"id":"cce7c771e029a064d9403d1aaf8bf5b228c845e56c55645aba25238162f8d736e912f13a3c03e40451e17650593932233049132abe7bbb345704c5d8af2fb048","href":"https://static.observableusercontent.com/files/cce7c771e029a064d9403d1aaf8bf5b228c845e56c55645aba25238162f8d736e912f13a3c03e40451e17650593932233049132abe7bbb345704c5d8af2fb048","name":"groups.ICO_12S.combined (4).txt","type":"text/plain","lastModified":1728574588160.365,"size":16001},{"id":"9a16a6f04e1ff8d2c53cc201510dc79c22d4957475a706a83be197dc2786e28b78821c48df5fd0f8343caa8107de5d2a6ebbd8bad327f1d92d543c9a6d096528","href":"https://static.observableusercontent.com/files/9a16a6f04e1ff8d2c53cc201510dc79c22d4957475a706a83be197dc2786e28b78821c48df5fd0f8343caa8107de5d2a6ebbd8bad327f1d92d543c9a6d096528","name":"groups.ICO_12S.combined (5).txt","type":"text/plain","lastModified":1733329845576.997,"size":16167},{"id":"96673e14eaf9461472116bb0dabbfa7db6c7537fc4a6f11f9964bc6459aac7d3cbe9044c708828ee3b56f5b14fae5fba6e997b36d7b139dc52baa7f61e6d0f31","href":"https://static.observableusercontent.com/files/96673e14eaf9461472116bb0dabbfa7db6c7537fc4a6f11f9964bc6459aac7d3cbe9044c708828ee3b56f5b14fae5fba6e997b36d7b139dc52baa7f61e6d0f31","name":"sample_metadata.ICO_12S.combined (5).txt","type":"text/plain","lastModified":1733329857305.052,"size":451830},{"id":"3dd2227ae3e18f61a110e06128b94a06555007b7e4c52c511e17a672921236742e0e8ac7164c73aa7f5ce10860029b8a55540c2e84d66ca2ac5f2f4b1f306f90","href":"https://static.observableusercontent.com/files/3dd2227ae3e18f61a110e06128b94a06555007b7e4c52c511e17a672921236742e0e8ac7164c73aa7f5ce10860029b8a55540c2e84d66ca2ac5f2f4b1f306f90","name":"dataRolled (9).csv","type":"text/csv","lastModified":1733329925824.862,"size":8089305},{"id":"3dd2227ae3e18f61a110e06128b94a06555007b7e4c52c511e17a672921236742e0e8ac7164c73aa7f5ce10860029b8a55540c2e84d66ca2ac5f2f4b1f306f90","href":"https://static.observableusercontent.com/files/3dd2227ae3e18f61a110e06128b94a06555007b7e4c52c511e17a672921236742e0e8ac7164c73aa7f5ce10860029b8a55540c2e84d66ca2ac5f2f4b1f306f90","name":"dataRolled (9)@1.csv","type":"text/csv","lastModified":1733329961078.183,"size":8089305},{"id":"89e1fcae006ae5fcc0836c70ab932636ee855f19753a6386751baab5d4eac2233b65bc743e18fd2800674ca426f4f147d9d637615c894dc6460abbdc4b778761","href":"https://static.observableusercontent.com/files/89e1fcae006ae5fcc0836c70ab932636ee855f19753a6386751baab5d4eac2233b65bc743e18fd2800674ca426f4f147d9d637615c894dc6460abbdc4b778761","name":"foragefish.jpg","type":"image/jpeg","lastModified":1657221869442.293,"size":487120},{"id":"64aed333f8072bae7d81fed476a9beea1f1a86eabd53ff6ea8c987aa5ee86bb001c1c3f709c32dedb64018cc05a43921a5ac8b1900f8dca058beac242147a8f2","href":"https://static.observableusercontent.com/files/64aed333f8072bae7d81fed476a9beea1f1a86eabd53ff6ea8c987aa5ee86bb001c1c3f709c32dedb64018cc05a43921a5ac8b1900f8dca058beac242147a8f2","name":"flatfish (1).png","type":"image/png","lastModified":1657221869442.293,"size":567110},{"id":"b25084e516627c195b25fbfdb164e2c3e5f0a49d44708cbe78b3196af1f494a00d59af52711eb7a386fef475acb22239c9689e4f2e925daa6a91b7fe588f1443","href":"https://static.observableusercontent.com/files/b25084e516627c195b25fbfdb164e2c3e5f0a49d44708cbe78b3196af1f494a00d59af52711eb7a386fef475acb22239c9689e4f2e925daa6a91b7fe588f1443","name":"rock.png","type":"image/png","lastModified":1657221869442.293,"size":535080},{"id":"d562afc5089e0b021237d9fba7c33a5d438ed955f215debc1473172c3f439a12e10609244c7c4289156e40d35a269710ef1c102a3bb81a501b070b00e475363c","href":"https://static.observableusercontent.com/files/d562afc5089e0b021237d9fba7c33a5d438ed955f215debc1473172c3f439a12e10609244c7c4289156e40d35a269710ef1c102a3bb81a501b070b00e475363c","name":"HumpbackTail_Josh Silberg.jpg","type":"image/jpeg","lastModified":1657221869442.293,"size":118711},{"id":"fb4d5c6dd1ac8b94a9faeffc1c8a21779d2d1235342728b9e291856f5c94b6e7c41f1cd2b01d240e050790492c0e4943f3eace5cf04b9a733dd6b88cc4104c56","href":"https://static.observableusercontent.com/files/fb4d5c6dd1ac8b94a9faeffc1c8a21779d2d1235342728b9e291856f5c94b6e7c41f1cd2b01d240e050790492c0e4943f3eace5cf04b9a733dd6b88cc4104c56","name":"Other.png","type":"image/png","lastModified":1657221869442.293,"size":578721},{"id":"18f72ae5b89026f2767aa2c9a77f6854c1df9e422f4f35444727bc09a47b2385a79c2cb618dfcf3940b2094615eac6e1109f9ff255a4786a0ed13226f66924ca","href":"https://static.observableusercontent.com/files/18f72ae5b89026f2767aa2c9a77f6854c1df9e422f4f35444727bc09a47b2385a79c2cb618dfcf3940b2094615eac6e1109f9ff255a4786a0ed13226f66924ca","name":"Crescent gunnel 3.jpeg","type":"image/jpeg","lastModified":1657221869442.293,"size":118521},{"id":"26448bfd1f1ed3ff62e412c775fe2ba4122bf2849cecc4ce2a4ecc53de2b2e0bb51703cb4af617850b3fc3ee7cb71c13222e6e07a074b08cc4975c1e72061a2d","href":"https://static.observableusercontent.com/files/26448bfd1f1ed3ff62e412c775fe2ba4122bf2849cecc4ce2a4ecc53de2b2e0bb51703cb4af617850b3fc3ee7cb71c13222e6e07a074b08cc4975c1e72061a2d","name":"perche (1).jpg","type":"image/jpeg","lastModified":1657221869442.293,"size":14544},{"id":"c75f4d836293fdb8678d9ae9932da15244acc7731548893cf6ca7fcb927f92a27d6aac4abe80a77b61a1fb5b02a1c24f9e9f84db8fa12cdad96f48f06cb78076","href":"https://static.observableusercontent.com/files/c75f4d836293fdb8678d9ae9932da15244acc7731548893cf6ca7fcb927f92a27d6aac4abe80a77b61a1fb5b02a1c24f9e9f84db8fa12cdad96f48f06cb78076","name":"salmon.png","type":"image/png","lastModified":1657221869442.293,"size":413580},{"id":"73edfa79ba517d92ac2357d146e6bc57ad195ce6a029bf31debc6285b6889a3e6643f7c9d1ccf39902afd0f0fff795005084ff7191e4a7d954bd79ffb5cf6bac","href":"https://static.observableusercontent.com/files/73edfa79ba517d92ac2357d146e6bc57ad195ce6a029bf31debc6285b6889a3e6643f7c9d1ccf39902afd0f0fff795005084ff7191e4a7d954bd79ffb5cf6bac","name":"sharks1.png","type":"image/png","lastModified":1657221869442.293,"size":468056},{"id":"b6e25766fa14fd7ecf338744186b1dd6dee770d8a3028bbcfa4e452e497d31e94bf3f9aa90b29771cf59a51f6c430c6f910cfff7df3901f4af0003344fd8fec1","href":"https://static.observableusercontent.com/files/b6e25766fa14fd7ecf338744186b1dd6dee770d8a3028bbcfa4e452e497d31e94bf3f9aa90b29771cf59a51f6c430c6f910cfff7df3901f4af0003344fd8fec1","name":"wa.topo.json","type":"application/json","lastModified":1657221869442.293,"size":434789},{"id":"9ec1e7eab950f5752693335255ce148019b80312b8c198f11afdf96d462877f394d04b6d4ea7d254ca98beb3cc27ba72a2d03ac88707c2d7c13203766897c981","href":"https://static.observableusercontent.com/files/9ec1e7eab950f5752693335255ce148019b80312b8c198f11afdf96d462877f394d04b6d4ea7d254ca98beb3cc27ba72a2d03ac88707c2d7c13203766897c981","name":"all_fish (1).png","type":"image/png","lastModified":1657221869442.293,"size":564505},{"id":"05ed84a2c4f06a5afb41ed787a5b50b79588b24a0124da89532c414f408409d3737e6da7a6d51e112e6ab10ab31c1bc70a52f84fbf87039ab38c5a03c5fcc119","href":"https://static.observableusercontent.com/files/05ed84a2c4f06a5afb41ed787a5b50b79588b24a0124da89532c414f408409d3737e6da7a6d51e112e6ab10ab31c1bc70a52f84fbf87039ab38c5a03c5fcc119","name":"innderLegend.json","type":"application/json","lastModified":1657221869442.293,"size":818},{"id":"4c07834c7dc2c5ceccc5e4f1da34805d9498ff8ddb700c388cb5a06ab54f9ef866cddbe25a4d6df90a60875b68929042353768518543308f35e584938d69474b","href":"https://static.observableusercontent.com/files/4c07834c7dc2c5ceccc5e4f1da34805d9498ff8ddb700c388cb5a06ab54f9ef866cddbe25a4d6df90a60875b68929042353768518543308f35e584938d69474b","name":"sculpins.png","type":"image/png","lastModified":1657221869442.293,"size":556328},{"id":"7ba550b22fdb22cba9fed3326a51f513cf291d8ea63f9db45879b66641f3935ce23bb2fa199e89c9fca8abcc84e39c72ed6a9e2ade12d479badfd9ce5e1b9044","href":"https://static.observableusercontent.com/files/7ba550b22fdb22cba9fed3326a51f513cf291d8ea63f9db45879b66641f3935ce23bb2fa199e89c9fca8abcc84e39c72ed6a9e2ade12d479badfd9ce5e1b9044","name":"BC_Midres_latlngTOPO (1) (2).json","type":"application/json","lastModified":1657221869442.293,"size":645776},{"id":"864dffbc82517f1cda6014a55d167bd8ac951248951c56da573e07617b9658cf260d8575e0e9d72dafe9ac1329a608728c93792030c014c7f6817e0b39576d38","href":"https://static.observableusercontent.com/files/864dffbc82517f1cda6014a55d167bd8ac951248951c56da573e07617b9658cf260d8575e0e9d72dafe9ac1329a608728c93792030c014c7f6817e0b39576d38","name":"Sample_metadata_Plates1-7 (1) (1).txt","type":"text/plain","lastModified":1657221869442.293,"size":116615},{"id":"464b804505bf12458a2fdbbfb1338db5f5d32b0af46bf0675e1a7f9d534dfd4d0e421f6316091960eb0498a5aad5aacf610b05e20c4cec3c585a3734fb75b71f","href":"https://static.observableusercontent.com/files/464b804505bf12458a2fdbbfb1338db5f5d32b0af46bf0675e1a7f9d534dfd4d0e421f6316091960eb0498a5aad5aacf610b05e20c4cec3c585a3734fb75b71f","name":"dataRolled.json","type":"application/json","lastModified":1657221869442.293,"size":3907918},{"id":"aad52c3d23d93b5bbe46fb41fe8ba94c769b562015dd56bd16cd90310afa3e6e04b577402e67e30d5681e1396b6b7b3cd3090c275d8544422650b5be5b9e95f6","href":"https://static.observableusercontent.com/files/aad52c3d23d93b5bbe46fb41fe8ba94c769b562015dd56bd16cd90310afa3e6e04b577402e67e30d5681e1396b6b7b3cd3090c275d8544422650b5be5b9e95f6","name":"Groups_July8b,2021 (1)-3-1.txt","type":"text/plain","lastModified":1657221869442.293,"size":14256},{"id":"800dddec27a3270496af5a9414801af82519ff8f90b833736b90a4c2869e9040e67f4b99b117d6dfabe4086987fb4b9db7c58409fd5ad20ea452f3c86b3c4496","href":"https://static.observableusercontent.com/files/800dddec27a3270496af5a9414801af82519ff8f90b833736b90a4c2869e9040e67f4b99b117d6dfabe4086987fb4b9db7c58409fd5ad20ea452f3c86b3c4496","name":"snail.png","type":"image/png","lastModified":1657221869442.293,"size":441726},{"id":"3ad5733151a856634e29b851a0ac7c14c73bb3f709e8010fe1dba0dde20e040c23b5444ee5111a7bb1d8585f514fd1187e9539ae3e13f1e57c4bc95d16c597d1","href":"https://static.observableusercontent.com/files/3ad5733151a856634e29b851a0ac7c14c73bb3f709e8010fe1dba0dde20e040c23b5444ee5111a7bb1d8585f514fd1187e9539ae3e13f1e57c4bc95d16c597d1","name":"untitled (19).png","type":"image/png","lastModified":1657221869442.293,"size":496725},{"id":"e1d261f3126340fdc485da133aadcf34990b312aad0c150a76aa12d40dfd5c6716f8aef338314faaacbff73ddd6c067d2e29181e3ab948f58ab9943a9ff7c59b","href":"https://static.observableusercontent.com/files/e1d261f3126340fdc485da133aadcf34990b312aad0c150a76aa12d40dfd5c6716f8aef338314faaacbff73ddd6c067d2e29181e3ab948f58ab9943a9ff7c59b","name":"values1.json","type":"application/json","lastModified":1657221869442.293,"size":4962},{"id":"f69bfcbdb0073adccf65715de0cec626ad969ef9247efb23e77c4316175ad44e72dfb0b3d8ea290e6de93ffadb598a19ab4c08e47874a3f82ba0814c711f2401","href":"https://static.observableusercontent.com/files/f69bfcbdb0073adccf65715de0cec626ad969ef9247efb23e77c4316175ad44e72dfb0b3d8ea290e6de93ffadb598a19ab4c08e47874a3f82ba0814c711f2401","name":"dataRolled (1).csv","type":"text/csv","lastModified":1674159292912.746,"size":4089368},{"id":"fc5388725fab6d81e5b8f6d9eb28845213559c5dc75910b51a7aa8af27e8717877ccf48ee9a64d50b5f3ba0be71612e6ae8a96b81972c42fe500732a5b359fb4","href":"https://static.observableusercontent.com/files/fc5388725fab6d81e5b8f6d9eb28845213559c5dc75910b51a7aa8af27e8717877ccf48ee9a64d50b5f3ba0be71612e6ae8a96b81972c42fe500732a5b359fb4","name":"Groups_Jan2023.txt","type":"text/plain","lastModified":1674159308574.722,"size":14143},{"id":"3aac9b2eca3c791c7cf6012d0edca5f55c6b4f77a5e422e48fca8d72914bdec20e2d76eb10d1e82eb364c221d977159890c96dd9dd90afe6548af1ce4762fc0f","href":"https://static.observableusercontent.com/files/3aac9b2eca3c791c7cf6012d0edca5f55c6b4f77a5e422e48fca8d72914bdec20e2d76eb10d1e82eb364c221d977159890c96dd9dd90afe6548af1ce4762fc0f","name":"Groups_Jan2023@1.txt","type":"text/plain","lastModified":1674160971726.834,"size":14143},{"id":"40120e971ae38426dfad4ce26a08fd1aeade057cb54f330a0c8f29cd6276699393e1bb29bae7ca06eaca79d86d7aa678c457088571329ac10ec64bccab1d5a22","href":"https://static.observableusercontent.com/files/40120e971ae38426dfad4ce26a08fd1aeade057cb54f330a0c8f29cd6276699393e1bb29bae7ca06eaca79d86d7aa678c457088571329ac10ec64bccab1d5a22","name":"dataRolled (2).csv","type":"text/csv","lastModified":1674512929738.51,"size":4695551},{"id":"5efd0757815730ef628547982fec05845ce23c11f68ba96438903e0f3c59987f3e053021a44d8e827d10884eeb5056dd26e6845dce8920746cbbe71272ceb902","href":"https://static.observableusercontent.com/files/5efd0757815730ef628547982fec05845ce23c11f68ba96438903e0f3c59987f3e053021a44d8e827d10884eeb5056dd26e6845dce8920746cbbe71272ceb902","name":"dataRolled (4).csv","type":"text/csv","lastModified":1699026603243.065,"size":4745073},{"id":"33f210fbf00dfab20651c3e21b6cb9d2a6710666c242fa0b8fef1695468800463467df7a4e492fa9c06706b94c78af4e8ba08a2a912684e82f81d8d25cf7b1bf","href":"https://static.observableusercontent.com/files/33f210fbf00dfab20651c3e21b6cb9d2a6710666c242fa0b8fef1695468800463467df7a4e492fa9c06706b94c78af4e8ba08a2a912684e82f81d8d25cf7b1bf","name":"groups.ICO_12S.combined (1) (1).txt","type":"text/plain","lastModified":1699026619271.893,"size":14617},{"id":"15a227e6dd02791ace5e41b6b401d96b52d8978cd78de7939b3625f9a1cfe763beb9f351804a9728448fb561ab81edeb0b56a0417d033eec3f35cefc25508cee","href":"https://static.observableusercontent.com/files/15a227e6dd02791ace5e41b6b401d96b52d8978cd78de7939b3625f9a1cfe763beb9f351804a9728448fb561ab81edeb0b56a0417d033eec3f35cefc25508cee","name":"sample_metadata.ICO_12S.combined (2).txt","type":"text/plain","lastModified":1699026859112.822,"size":291634},{"id":"a08528ef729843d02f6dd16ba025294c51c9f41da764962dc8eebddd66dfb2a20b40c177907f632e22399ab49f744dc8cdd25fdc0d780f533da7d40c30818c5f","href":"https://static.observableusercontent.com/files/a08528ef729843d02f6dd16ba025294c51c9f41da764962dc8eebddd66dfb2a20b40c177907f632e22399ab49f744dc8cdd25fdc0d780f533da7d40c30818c5f","name":"dataRolled (5).csv","type":"text/csv","lastModified":1699026867419.487,"size":4746573},{"id":"5efd0757815730ef628547982fec05845ce23c11f68ba96438903e0f3c59987f3e053021a44d8e827d10884eeb5056dd26e6845dce8920746cbbe71272ceb902","href":"https://static.observableusercontent.com/files/5efd0757815730ef628547982fec05845ce23c11f68ba96438903e0f3c59987f3e053021a44d8e827d10884eeb5056dd26e6845dce8920746cbbe71272ceb902","name":"dataRolled (3).csv","type":"text/csv","lastModified":1698938691753.212,"size":4745073},{"id":"33f210fbf00dfab20651c3e21b6cb9d2a6710666c242fa0b8fef1695468800463467df7a4e492fa9c06706b94c78af4e8ba08a2a912684e82f81d8d25cf7b1bf","href":"https://static.observableusercontent.com/files/33f210fbf00dfab20651c3e21b6cb9d2a6710666c242fa0b8fef1695468800463467df7a4e492fa9c06706b94c78af4e8ba08a2a912684e82f81d8d25cf7b1bf","name":"groups.ICO_12S.combined (1).txt","type":"text/plain","lastModified":1698938708305.027,"size":14617},{"id":"05f95d66237fed95f261a5e0c3664f67e5682351d3e19611481773c5411d55b7eb3dcb43c72c455e46930b402a65664d50d741128f3894f5cef35058d1edd076","href":"https://static.observableusercontent.com/files/05f95d66237fed95f261a5e0c3664f67e5682351d3e19611481773c5411d55b7eb3dcb43c72c455e46930b402a65664d50d741128f3894f5cef35058d1edd076","name":"sample_metadata.ICO_12S.combined (1).txt","type":"text/plain","lastModified":1698938718186.248,"size":291622},{"id":"da64322f991e21b9ef1e8091860627937669a4eb94578a53994a77c69284cc73c51d87154d5d002dba93e57b15b066732f5685ccadb4d128ce0f39a2d1cb68c2","href":"https://static.observableusercontent.com/files/da64322f991e21b9ef1e8091860627937669a4eb94578a53994a77c69284cc73c51d87154d5d002dba93e57b15b066732f5685ccadb4d128ce0f39a2d1cb68c2","name":"Sample_metadata_Plates1-7.txt","type":"text/plain","lastModified":1658181855273.165,"size":116675},{"id":"c1fc9e6fe2852463b31a6fe837af3638b9beaa0e2205da8e8574c6bf923e74c06ed603df471618ecaf3fc4d34e3eac0b2adf44cbcbee50fe08a8c06127e76c26","href":"https://static.observableusercontent.com/files/c1fc9e6fe2852463b31a6fe837af3638b9beaa0e2205da8e8574c6bf923e74c06ed603df471618ecaf3fc4d34e3eac0b2adf44cbcbee50fe08a8c06127e76c26","name":"dataRolled@1.json","type":"application/json","lastModified":1672859342467.67,"size":8428528},{"id":"1934ee93645c32d0e8d230009f840f6d951c28c9d2f424e23af166f105be7eb0cd6c90cafb2df0bbe81c1dcef7f237a7065700148edaaf64024d889cfe4661f7","href":"https://static.observableusercontent.com/files/1934ee93645c32d0e8d230009f840f6d951c28c9d2f424e23af166f105be7eb0cd6c90cafb2df0bbe81c1dcef7f237a7065700148edaaf64024d889cfe4661f7","name":"Groups_Dec2022.txt","type":"text/plain","lastModified":1672859420174.629,"size":14051},{"id":"354ba66fad420e8ad035b11dfcbeeca97d53a1d532b8a51c19ad279a72cdc0a39752bc6b22257533cb950065f336faf60e3cece72ff064ab5a6664fbc0668306","href":"https://static.observableusercontent.com/files/354ba66fad420e8ad035b11dfcbeeca97d53a1d532b8a51c19ad279a72cdc0a39752bc6b22257533cb950065f336faf60e3cece72ff064ab5a6664fbc0668306","name":"metadata_Dec2022.txt","type":"text/plain","lastModified":1672859493309.366,"size":261631},{"id":"1085071cbfc96299f270ea000a3f76a0441bdb0689b0ca3ee461640300a8a57e46d42880523522e2d42be4ecbb6e7568e166310279150b58b7f2fdc444f75c5a","href":"https://static.observableusercontent.com/files/1085071cbfc96299f270ea000a3f76a0441bdb0689b0ca3ee461640300a8a57e46d42880523522e2d42be4ecbb6e7568e166310279150b58b7f2fdc444f75c5a","name":"dataRolled.csv","type":"text/csv","lastModified":1672953029029.992,"size":4066992},{"id":"81d16f21bc97b9efbb189ba42aa00d72af3b8f0fc82a97d6ec43e22557fa968ea0de8c5d3c0cab75fe84ed1ba2d70da29c138b4444abb34c40a67983cede38f6","href":"https://static.observableusercontent.com/files/81d16f21bc97b9efbb189ba42aa00d72af3b8f0fc82a97d6ec43e22557fa968ea0de8c5d3c0cab75fe84ed1ba2d70da29c138b4444abb34c40a67983cede38f6","name":"dataRolled (1).json","type":"application/json","lastModified":1672935169098.053,"size":8414288}] 2d:{"title":"ICO V2 Design","cells":[{"id":2942,"value":"md`\n# ICO V2 Design\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/). \n\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":13074,"value":"type","pinned":true,"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":11976,"value":"dateExtent = d3.extent(dataRolled, (d) => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":12174,"value":"x2 = d3\n .scaleBand()\n .range([margin.left, width - margin.right], 0.01)\n .padding(0.02)\n .domain(x2Dates)","pinned":true,"hidden":false,"mode":"ojs"},{"id":12675,"value":"x2Dates = {\n // add an extra month to show final month's bar end date\n const out = []\n \n filledLineDataScrubber.map(d => {\n out.push(d.date)})\n out.push(d3.utcMonth.offset(filledLineDataScrubber[filledLineDataScrubber.length-1].date, 1))\nreturn out\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12178,"value":"y = d3\n .scaleLinear()\n .domain([0, 1])\n .range([focusHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":12180,"value":"xAxis = (g, x, height) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom + 1})`)\n .call(d3.axisBottom(x).ticks(width < 710 ? 6 : 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12868,"value":"focus1","pinned":true,"hidden":false,"mode":"ojs"},{"id":12872,"value":" // focus1=[d3.utcMonth.floor(limits1[0]),d3.utcMonth.ceil(limits1[1])]","pinned":true,"hidden":false,"mode":"ojs"},{"id":12864,"value":"// viewof focus1 = brushFilterX(\n// [d3.isoParse(dateExtentForBarChart[0]),dateExtentForBarChart[1]],\n// { defaultExtent: [d3.isoParse(\"2020-02-01\"), d3.isoParse(\"2020-10-10\")] }\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":12878,"value":"dateExtentForBarChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":12252,"value":"dateExtentForBarChart = [dateExtent[0], dateExtent[1]]\n//d3.utcMonth.offset(dateExtent[1], 1)\n// add an extra month, so that there is room for the final month of data","pinned":true,"hidden":false,"mode":"ojs"},{"id":12904,"value":"width - margin.right -margin.left","pinned":true,"hidden":false,"mode":"ojs"},{"id":12907,"value":"margin.left","pinned":true,"hidden":false,"mode":"ojs"},{"id":12979,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":12974,"value":"$30","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":13044,"value":"margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":12916,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":13661,"value":"arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius((focusHeight - 10 - 20 - 8) / 2)\n .startAngle(0)\n .endAngle((d, i) => (i ? Math.PI : -Math.PI))","pinned":true,"hidden":false,"mode":"ojs"},{"id":13659,"value":"brushHandle = (g, selection) =>\n g\n .selectAll(\".handle--custom\")\n .data([{ type: \"w\" }, { type: \"e\" }])\n .join((enter) =>\n enter\n .append(\"path\")\n .attr(\"class\", \"handle--custom\")\n .attr(\"fill\", \"#666\")\n .attr(\"fill-opacity\", 0.6)\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"cursor\", \"ew-resize\")\n .attr(\"d\", arc)\n )\n .attr(\"display\", selection === null ? \"none\" : null)\n .attr(\n \"transform\",\n selection === null\n ? null\n : (d, i) =>\n `translate(${selection[i]},${(focusHeight + 10 - 20 - 5) / 2})`\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":8098,"value":"viewof focus1 = brushFilterX(\n [d3.isoParse(dateExtentForBarChart[0]), dateExtentForBarChart[1]],\n {\n defaultExtent: [d3.isoParse(\"2021-08-01\"), d3.isoParse(\"2023-08-01\")],\n width: width\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13746,"value":"dateExtentForBarChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":12160,"value":"mutable debug2 = null","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":13053,"value":"maxRadius = 10// was 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":13898,"value":"type","pinned":true,"hidden":false,"mode":"ojs"},{"id":13896,"value":"speciesList","pinned":true,"hidden":false,"mode":"ojs"},{"id":13056,"value":"minRadius = {\n return speciesList == null && type === \"All\" ? 2 : 4; // was 5/7\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13817,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiaGFrYWkiLCJhIjoiY20wbXlremJuMDJ4dTJrb2d4d2Qzb3F3cCJ9.XO01zYbe_A7vMf7Dary7Og\";\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"},{"id":8900,"value":"$32","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":true,"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":true,"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":false,"hidden":false,"mode":"ojs"},{"id":12372,"value":"html2canvas = require(\"html2canvas\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12376,"value":"showButton = selectedSite === null ? \"hide\" : \"show\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11534,"value":"md`Mapbox updates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10137,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":10178,"value":"$34","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: .8\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: 1\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":"$35","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":false,"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":false,"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":false,"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// +\n// 24 * 60 * 60 * 1000 * 30\n// )\n// ] //start and end date","pinned":true,"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":true,"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":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":13909,"value":"speciesList","pinned":true,"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[\"row_names\"] === speciesList).Group\n ]);\n } else {\n return legend1([type]);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11194,"value":"$36","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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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[\"row_names\"] === 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":6493,"value":"md`\n### Legend and Annotations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6516,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":6509,"value":"innerLegendVals = FileAttachment(\"innderLegend.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6511,"value":"legendVals = FileAttachment(\"values1.json\").json() // use static data to keep size from changing","pinned":true,"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":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":6506,"value":"annotations = applyAnnotations(getAnnotations(labelAnnotations), legChart)","pinned":true,"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":true,"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":13901,"value":"groupNumBySite","pinned":true,"hidden":false,"mode":"ojs"},{"id":13903,"value":"dateExtent","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":6544,"value":"packSiblings = (values) => d3.packSiblings(values)","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":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(\"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(\"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: \"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: \"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":13907,"value":"selectedGroup","pinned":true,"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\n // console.log(monthsStartToFinish);\n allDates.forEach((d) => {\n // d = d.toISOString().substring(0, 10);\n // console.log(d);\n let match = monthlySpeciesCountScrubber.find(\n (j) =>\n j.date.toISOString().substring(0, 10) ===\n d.toISOString().substring(0, 10) //.toISOString().substring(0, 10)\n );\n // match.date = match.date.toISOString().substring(0, 10);\n // console.log(match);\n // match === undefined ? out.push({ date: d, value: 0 }) : out.push({date: match.date, value: match.value});\n if (match) {\n out.push({ date: match.date, value: match.value });\n }\n });\n\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13716,"value":"allDates","pinned":true,"hidden":false,"mode":"ojs"},{"id":12434,"value":"format = d3.utcFormat(\"%c\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":6679,"value":"endDate = focus1[1]//new Date(filledLineData[timeSlider[1]].date) //d3.timeMonth.ceil(new Date(endDate2)) //filledLineData[timeSlider[1]].date","pinned":true,"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":13728,"value":"familyGroupings","pinned":true,"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[\"row_names\"] == d).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":true,"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.utcMonth.range(d3.utcMonth.floor(dateExtent[0]), dateExtent[1]) \n// .map((d) => )\n// [...new Set(dataForBars.map((d) => d.date))].sort((a, b) =>\n// d3.ascending(a, b)| \n// )","pinned":true,"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 return (\n new Date(d.date) >= d3.utcMonth(startDate) &&\n new Date(d.date) <= d3.utcMonth(endDate) &&\n d.site === selectedSite\n );\n})\n","pinned":true,"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 = focus1[0]//d3.timeMonth.ceil(new Date(focus[0])) //new Date(filledLineData[timeSlider[0]].date)","pinned":true,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":1810,"value":"dataWithCount = dataRolled.filter((d) => {\n const speciesType = 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})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":13928,"value":"dataRolled","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"dataBySiteandGroup = d3.group(dataWithCount, d => d.site, d => d.group) // this includes multiples of same species","pinned":true,"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":12064,"value":"dataRolled = d3.csvParse(\n await FileAttachment(\"dataRolled (9).csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7955,"value":"familyGroupings = {\n const raw = d3.tsvParse(\n await FileAttachment(\"groups.ICO_12S.combined (5).txt\").text(),\n d3.autoType\n );\n const clean = raw.filter((d) => d[\"row_names\"] != 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.ICO_12S.combined (5).txt\").text(),\n d3.autoType\n );\n const clean = raw.filter((d) => d.row_names != undefined); // remove blank lines\n return clean;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13799,"value":"[...new Set(d3.map(metadata, (d) => d.Organization))]","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":12848,"value":"// import {brushFilterX} from \"fc0c1c247281008d\"","pinned":true,"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"}],"files":"$W38","stdlib":"1","titling":"auto"}