31:T8a4,viewof focus1 = { const defaultExtent = [d3.isoParse("2019-11-01"), d3.isoParse("2020-11-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 end", brushed); // const defaultExtent = [ // x(d3.utcYear.offset(x.domain()[1], -1)), // x.range()[1] // ]; // console.log(defaultSelection); // let previousS0, previousS1; // svg.append("path") const bars = svg .selectAll("rect") .data(data) .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("d", area(x, y.copy().range([focusHeight - margin.bottom, 4]))); 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); svg.node().dispatchEvent(new Event("input", { bubbles: true })); const selection = event.selection; } svg.node().value = defaultExtent ? defaultExtent : null; return svg.node(); }32:Tf9d,map = { const map = createBaseMap(); const svg = d3.select(map); const countriesPacked = createCountryPacks(dataBySiteandGroup); let values = [...new Map(countriesPacked).values()]; values = applySimulation(values); //collision detection const zoomable = svg.append("g"); let view; let gTitle = zoomable .append("g") .attr( // position the legend on the right side of the map "transform", `translate(${10}, ${height - 10})` ) .attr("text-anchor", "start"); let title = gTitle .append("text") .attr("font-family", "sans-serif") .text("👆🏽 click a station") .attr("font-weight", "normal"); //country circles const sitePacks = zoomable .append("g") .classed("state-packs", true) .selectAll(".state-pack") .data(values) .enter() .append("g") .classed("state-pack", true) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); sitePacks .append("circle") .attr("r", (d) => d.r) .attr("fill", "#fff") .attr("stroke", "#333") .attr("class", "outterCircle no-stick") .attr("id", (d) => d.k.replace(/\s+/g, "")) .on("mouseover", function (event, d) { tooltip.html( `${d.k}
${d.obs.length} groups
${d3.sum( d.obs, (k) => k.speciesNum )} species` ); tooltip.style("visibility", "visible"); d3.select(this).attr("stroke", "#00aeff"); }) .on("mousemove", function (event, d) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", function (event, d) { tooltip.style("visibility", "hidden"); d3.select(this).attr("stroke", "#333"); }) .on("click", function (event, d) { if ( d3.select("#" + d.k.replace(/\s+/g, "")).attr("class") === "outterCircle no-stick" ) { // console.log('here'); set(viewof selectedSite, d.k); // d3.selectAll('.outterCircle') // .attr('opacity', 1) // .classed("stick", true) // .classed("no-stick", false); } else { set(viewof selectedSite, null); // d3.selectAll('.outterCircle') // .attr('opacity', .4) // .classed("stick", false) // .classed("no-stick", true); } mutable selectedGroup = d.obs.map((g) => g.key); // d3.selectAll('.outterCircle') // .attr('opacity', .4) // .classed("stick", false) // .classed("no-stick", true); }); // .on("dblclick", function(event, d) { // set(viewof selectedSite, null); // }); //species circles const groupSvg = sitePacks .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) => { // console.log(d.data.key, colorScale(d.data.key)); return colorScale(d.data.key); }) .on("mouseover", function (event, d) { tooltip.html( `${d.data.site}
${d.data.key}
${d.data.speciesNum} species` ); tooltip.style("visibility", "visible"); d3.select(this).attr("stroke", "#00aeff"); }) .on("mousemove", function (event, d) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", function (event, d) { tooltip.style("visibility", "hidden"); d3.select(this).attr("stroke", "none"); }) .on("click", function (event, d) { set(viewof selectedSite, d.data.site); // mutable selectedSite = d.data.site; mutable selectedGroup = d.data.key; // d3.selectAll('.outterCircle') // .attr('opacity', .4) // .classed("stick", false) // .classed("no-stick", true); }); return map; }33:T7d5,highlight = { let keepSiteHighlighted = false; if ( selectedSite && selectedGroup !== "All" && !Array.isArray(selectedGroup) && d3.select("#" + selectedSite.replace(/\s+/g, '')).attr("class") === "outterCircle stick" ) { keepSiteHighlighted = true; } // on types, don't keep inner circle highlighted on second click if ( type !== "All" && d3.select("#" + selectedSite.replace(/\s+/g, '')).attr("class") === "outterCircle stick" ) { keepSiteHighlighted = false; } if ( // if already clicked on don't keep highlighted on second click selectedSite && (d3.select("#" + selectedSite.replace(/\s+/g, '')).attr("class") === "outterCircle" || d3.select("#" + selectedSite.replace(/\s+/g, '')).attr("class") === "outterCircle no-stick") && keepSiteHighlighted === false ) { d3.selectAll('.outterCircle') .attr('opacity', .4) .classed("stick", false) .classed("no-stick", true); d3.selectAll('.county-centroid') .attr('opacity', .4) .classed("stick", false) .classed("no-stick", true); d3.select("#" + selectedSite.replace(/\s+/g, '')) .attr('stroke', '#00aeff') .attr('opacity', 1) .classed("no-stick", false) .classed("stick", true); d3.selectAll('#centroid_' + selectedSite.replace(/\s+/g, '')) .attr('opacity', 1) .classed("no-stick", false) .classed("stick", true); mutable showplots = true; } else if (keepSiteHighlighted === true) { // console.log('do nothing'); } else if (keepSiteHighlighted === false) { d3.selectAll('.outterCircle') .attr('opacity', 1) .classed("no-stick", true) .classed("stick", false); d3.selectAll('.county-centroid') .attr('opacity', 1) .classed("no-stick", true) .classed("stick", false); mutable showplots = false; // set(viewof selectedSite, null); // console.log("keepSiteHighlighted = ", keepSiteHighlighted); } }34:T513,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', .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", .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(); }35:T8f2,createBaseMap = () => { const width = 700; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", "map") .style("width", "100%") .style("height", "auto") .style("background-color", "aliceblue"); const rect = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("height", height) .attr("width", width) .style("fill", "aliceblue"); rect.on("click", function (event, d) { set(viewof selectedSite, null); // mutable selectedSite = null; d3.selectAll(".outterCircle") .attr("opacity", 1) .classed("no-stick", false) .classed("stick", true); d3.selectAll(".county-centroid") .attr("opacity", 1) .classed("no-stick", false) .classed("stick", true); }); // const svg = d3 // .select('#map') // .append("svg") // .attr('width', width) // .attr('height', height) // .attr('viewBox', [0, 0, width, height]) // .style("background-color", "aliceblue"); svg .append("g") .selectAll("path") .data(states.features) .join("path") .attr("fill", (d) => { return "#e4e2e2"; }) .attr("opacity", 1) .attr("d", geoPath); // svg // .append("svg") // .selectAll("path") // .data(topojson.feature(AlbJson, AlbJson.objects['alberta-mapper']).features) // .join("path") // .attr("d", geoPath) // .attr("stroke", "#e4e2e2") // .attr("stroke-linejoin", "round") // .attr("fill", "#e4e2e2") // .attr("id", "map-layers"); svg .append("svg") .selectAll("path") .data( topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng).features ) .join("path") .attr("d", geoPath) .attr("fill", "#e4e2e2") .attr("opacity", 1) .attr("stroke", "none") // .attr("stroke-linejoin", "round") .attr("id", "map-layers") .on("click", function (event, d) { set(viewof selectedSite, null); // mutable selectedSite = null; d3.selectAll(".outterCircle") .attr("opacity", 1) .classed("no-stick", false) .classed("stick", true); d3.selectAll(".county-centroid") .attr("opacity", 1) .classed("no-stick", false) .classed("stick", true); }); return svg.node(); }36:T6cb,createCountryPacks = data => { const statesPacked = new Map(); for (let [k, v] of data) { let obs = Array.from(v, ([key, value]) => { // console.log(value); let uniqSpe = [...new Set(value.map(d => d.species))]; // console.log(uniqSpe); 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; // console.log(d); 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 // console.log(nodes, r); // find country in countries topojson const site = bcSiteLocs.find(d => { if (d.site) { if (d.site === k) { return d.site === k; } } }); // step 3 // console.log(site); if (site) { const coords = projection([site.long, site.lat]); // step 3 const x = coords[0]; const y = coords[1]; // console.log(x, y); const name = site; statesPacked.set(k, { nodes, r, x, y, total_count, k, name, obs }); // step 4 } } catch { // console.info(k,v) } } return statesPacked; }37:T1697,chart2 = function (types, speciesInput) { const width = 400; // console.clear(); if (Array.isArray(types) === false) { types = [types]; } const n = types.length; // const width = 400; 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) ) ]); // console.log(Allspecies); 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)); // let focus0; 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; // console.log(i % n); return nm === 1 ? multiFormat(d) : i % nm === 1 ? multiFormat(d) : ""; }); const top_margins = []; types.forEach((vari, i) => { 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) ) ]); // mutable debug = species; let h_each_plot = height; //(height * species.length) / Allspecies.length; top_margins.push(h_each_plot); let chart_bounds = h_each_plot - margin1.top - margin1.bottom; // console.log(chart_bounds); 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 }; //adjust top let variableName = "focus" + i; myVariables[variableName] = svg .append("g") .attr("class", "focus" + i) .attr( "transform", `translate(${margin_others.left},${margin_others.top})` ); console.log( heatData.filter((d) => d.group === vari && species.includes(d.species)) ); 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))) - 1 ) .attr("height", y.bandwidth()) .attr("fill", (d) => { // console.log(colorScale(d.group)); 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) { // console.log("tick", 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); }); }); return svg.node(); }38:T8d0,function widget(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach((key) => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend(html`

${title}

`); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = ""; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = (e) => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; } 39:Tff9,function rangeInput(options = {}) { const { min = 0, max = 100, step = 1, value: defaultValue = [min, max], theme = theme_NoUiSlider } = options; const controls = {}; const scope = randomScope(); // Will be used to sanitize values while avoiding floating point issues. const input = DOM.element("input", { type: "range", min, max, step }); const dom = html`

${(controls.track = html`

${(controls.zone = html`

${(controls.range = html`

${(controls.min = html`

`)} ${(controls.max = html`

`)} `)} `)} `)} ${html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":5389,"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":8428,"value":"timeSlider","pinned":true,"hidden":false,"mode":"ojs"},{"id":4876,"value":"// viewof timeSlider = rangeSlider({\n// min: 0,\n// max: d3.timeMonth.count(\n// new Date(filledLineData[0].date),\n// new Date(allDates[allDates.length - 1])\n// ),\n// step: 1,\n// // value: [10, 13],\n// separator: \" - \",\n// theme: theme_NoUiSlider,\n// color: \"rgb(49, 128, 189)\",\n// format: (date) =>\n// formatDate(d3.timeMonth.offset(filledLineData[0].date, date)),\n// title: \"Date range\"\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":8330,"value":"allDates","pinned":true,"hidden":false,"mode":"ojs"},{"id":8316,"value":"timeSlider","pinned":true,"hidden":false,"mode":"ojs"},{"id":8218,"value":"new Date(filledLineData[0].date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8111,"value":"filledLineData.map((d) => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8103,"value":"dateExtent = [\n new Date(filledLineData[0].date),\n new Date(\n +new Date(filledLineData[filledLineData.length - 1].date) +\n 24 * 60 * 60 * 1000 * 30\n )\n] //start and end date","pinned":true,"hidden":false,"mode":"ojs"},{"id":8106,"value":"data = filledLineData","pinned":true,"hidden":false,"mode":"ojs"},{"id":8109,"value":"focusHeight = 60","pinned":true,"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":8134,"value":"allDates","pinned":true,"hidden":false,"mode":"ojs"},{"id":8120,"value":"margin = ({ top: 4, right: 20, bottom: 30, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":8180,"value":"xTest = d3\n .scaleTime()\n .domain(dateExtent)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":8185,"value":"xTest.domain()[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8182,"value":"xTest(d3.utcYear.offset(xTest.domain()[1], -1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8188,"value":"[xTest(d3.utcMonth.offset(xTest.domain()[1], -1)), xTest.range()[1]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8171,"value":"sstaColors = d3.scaleDiverging(d3.interpolateRdBu).domain([-1, 0, 200])","pinned":true,"hidden":false,"mode":"ojs"},{"id":8246,"value":"datesForPlot","pinned":true,"hidden":false,"mode":"ojs"},{"id":8684,"value":"new Date(focus[0]).toISOString().substring(0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8230,"value":"// timeSlider = [\n// datesForPlot.indexOf(new Date(focus[0]).toISOString().substring(0, 10)),\n// datesForPlot.indexOf(new Date(focus[1]).toISOString().substring(0, 10))\n// ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8178,"value":"datesForPlot","pinned":true,"hidden":false,"mode":"ojs"},{"id":8249,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":8430,"value":"dateExtent","pinned":true,"hidden":false,"mode":"ojs"},{"id":8426,"value":"focus","pinned":true,"hidden":false,"mode":"ojs"},{"id":8197,"value":"// mutable debug1 = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":8093,"value":"// timeSlider","pinned":true,"hidden":false,"mode":"ojs"},{"id":7203,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":8525,"value":"datesForPlot","pinned":true,"hidden":false,"mode":"ojs"},{"id":6900,"value":"dateExtent","pinned":true,"hidden":false,"mode":"ojs"},{"id":8529,"value":"focusHeight","pinned":true,"hidden":false,"mode":"ojs"},{"id":8556,"value":"[new Date(\"2019-12-01\"), new Date(\"2020-11-01\")]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8641,"value":"dateExtent","pinned":true,"hidden":false,"mode":"ojs"},{"id":8600,"value":"focus1","pinned":true,"hidden":false,"mode":"ojs"},{"id":8722,"value":"formatMonth(d3.timeMonth.ceil(focus1[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8658,"value":"formatMonth = d3.timeFormat(\"%Y-%m\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8653,"value":"focus = [\n formatMonth(d3.timeMonth.ceil(focus1[0])) + \"-01\",\n formatMonth(d3.timeMonth.floor(focus1[1])) + \"-01\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8823,"value":"focus1","pinned":true,"hidden":false,"mode":"ojs"},{"id":8098,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":7488,"value":"maxRadius = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":4889,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":8030,"value":"dataForCountours = createCountryPacks(dataBySiteandGroup)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7220,"value":"mutable showplots = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":7208,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":7235,"value":"showplots","pinned":true,"hidden":false,"mode":"ojs"},{"id":7019,"value":"mutable debug = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":7151,"value":"old = clicked","pinned":true,"hidden":false,"mode":"ojs"},{"id":7149,"value":"debug === clicked","pinned":true,"hidden":false,"mode":"ojs"},{"id":7146,"value":"mutable clicked = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":7185,"value":"mutable species = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":7191,"value":"{\n mutable selectedGroup = species;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7229,"value":"showplots","pinned":true,"hidden":false,"mode":"ojs"},{"id":7231,"value":"selectedSite","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['Common Name'] === speciesList).Group\n ]);\n } else {\n return legend1([type]);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5599,"value":"gp1 = {\n // control how bar chart plotting is done\n if (selectedSite !== null) {\n if (Array.isArray(barData) === true) {\n return md`${barData[0]}`;\n } else {\n return md`${barData}`;\n }\n } else if (\n selectedGroup === \"All\" ||\n selectedGroup === null ||\n (type === \"All\" && speciesList === null)\n ) {\n return md``;\n }\n {\n return render_data_table(speciesTableData);\n }\n}","pinned":true,"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 // control how bar chart plotting is done\n if (Array.isArray(barData) === true && selectedSite !== null) {\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 // control how bar chart plotting is done\n if (Array.isArray(barData) === true && barData[2] && selectedSite !== null) {\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 // control how bar chart plotting is done\n 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":2328,"value":"gp5 = {\n // control how bar chart plotting is done\n if (Array.isArray(barData) === true && barData[4] && selectedSite !== null) {\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 // control how bar chart plotting is done\n 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":true,"hidden":false,"mode":"ojs"},{"id":2331,"value":"gp7 = {\n // control how bar chart plotting is done\n if (Array.isArray(barData) === true && barData[6] && selectedSite !== null) {\n return md`${barData[6]}`;\n } else {\n return md``;\n }\n}","pinned":true,"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 // control how bar chart plotting is done\n 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":8457,"value":"speciesList","pinned":true,"hidden":false,"mode":"ojs"},{"id":2335,"value":"gp9 = {\n // control how bar chart plotting is done\n if (Array.isArray(barData) === true && barData[8] && selectedSite !== null) {\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 // control how bar chart plotting is done\n 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 // control how bar chart plotting is done\n 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":7503,"value":"gp12 = {\n // control how bar chart plotting is done\n if (Array.isArray(barData) === true && barData[10] && selectedSite !== null) {\n return md`${barData[11]}`;\n } else {\n return md``;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7496,"value":"gp12Chart ={\n // control how bar chart plotting is done\n if (typeof barData !== \"string\" && selectedSite !== null) {\n return chart2(barData[11], speciesList);\n } else {\n return md``;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2763,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6493,"value":"md`\n### Annotations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6516,"value":"$34","pinned":false,"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":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: -20,\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":true,"hidden":false,"mode":"ojs"},{"id":6527,"value":"md`\n### Map\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":6602,"value":"projection = d3\n .geoAlbers()\n .rotate([126, 0])\n .center([0, 50.3])\n .parallels([50, 58.5])\n .scale(10000)\n .translate([960 / 3.1, 600 / 2])\n// projection = d3.geoAlbers().rotate([126, -10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":6675,"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":6538,"value":"$35","pinned":false,"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":6553,"value":"minRadius = {\n return speciesList == null ? 3 : 5;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6710,"value":"geoPath = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6716,"value":"packEnclose = nodes => d3.packEnclose(nodes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6713,"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":6541,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":6529,"value":"tooltip = d3\n .select('body')\n .append('div')\n .style('position', 'absolute')\n .style('visibility', 'hidden')\n .style('color', 'white')\n .style('padding', '8px')\n .style('background-color', '#626D71')\n .style('border-radius', '6px')\n .style('text-align', 'center')\n .style('font-family', 'avenir next')\n .text('')","pinned":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":7455,"value":"// import { preload } from \"1dce6476f6164b8f\"","pinned":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":6571,"value":"mutable type = \"All\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6565,"value":"function previews(mins) {\n return html`

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

`;\n}","pinned":true,"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 set(viewof selectedSite, null);\n\n // selectedSite !== null\n // ? set(viewof selectedSite, selectedSite)\n // : selectedSite;\n }}\n\n>\n

\n\n\n

${\n min.species\n }

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6575,"value":"md`\n## Selection controls\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6593,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6643,"value":"mutable groupName = \"All\"","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":6581,"value":"resetSite = {\n if (speciesList !== null) set(viewof selectedSite, null);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6587,"value":"mutable selectedGroup = type //{\n// if (type === \"All\") {\n// return [\n// ...new Set(\n// dataRolled.filter(d => d.site === selectedSite).map(d => d.group)\n// )\n// ];\n// } else type;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":6629,"value":"md`\n## Bar chart\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8460,"value":"[\n ...new Set(\n heatData\n .filter((d) => [\"Salmon\"].includes(d.group) && d.count === 1)\n .map((d) => d.species)\n )\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8693,"value":"heatData","pinned":true,"hidden":false,"mode":"ojs"},{"id":8699,"value":"startDate","pinned":true,"hidden":false,"mode":"ojs"},{"id":8701,"value":"endDate","pinned":true,"hidden":false,"mode":"ojs"},{"id":8732,"value":"new Date(focus[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":8710,"value":"// d3.timeMonth.ceil(+endDate + 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8750,"value":"endDate","pinned":true,"hidden":false,"mode":"ojs"},{"id":8697,"value":"d3.timeMonth.count(startDate, d3.timeMonth.ceil(endDate))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8776,"value":"[startDate, d3.timeMonth.ceil(endDate)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6631,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":6607,"value":"md`\n## Data manipulation\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6747,"value":"locationsSpeciesFound = [\n ...new Set(\n dataForBars.filter(d => d.species == [uniqSpecies[0]]).map(d => d.site)\n )\n].length","pinned":true,"hidden":false,"mode":"ojs"},{"id":6694,"value":"maxSpeciesPerMonth = d3.max(\n Array.from(speciesCountbyMonth, ([key, values]) => {\n return values;\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6687,"value":"bannerHeight = 320","pinned":true,"hidden":false,"mode":"ojs"},{"id":6685,"value":"speciesCount = [...new Set(dataRolled.map(d => d.species))].length","pinned":true,"hidden":false,"mode":"ojs"},{"id":8264,"value":"monthlySpeciesCount","pinned":true,"hidden":false,"mode":"ojs"},{"id":8299,"value":"d3.min(dataRolled, (d) => new Date(d.date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":6682,"value":"filledLineData = {\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 = monthlySpeciesCount.find((j) => j.date === d);\n // match.date = match.date.toISOString().substring(0, 10);\n // console.log(match);\n match === undefined\n ? out.push({ date: d, value: undefined })\n : out.push(match);\n });\n\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8375,"value":"d3.max(dataRolled, (d) => new Date(d.date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8388,"value":"new Date(+d3.max(dataRolled, (d) => new Date(d.date)) + 24 * 60 * 60 * 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8414,"value":"Date.now()","pinned":true,"hidden":false,"mode":"ojs"},{"id":8343,"value":"// d3.timeMonth\n// .range(\n// d3.min(dataRolled, (d) => new Date(d.date)),\n// d3.max(dataRolled, (d) => new Date(d.date))\n// )\n// .map((d) => d.toISOString().substring(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8354,"value":"d3.max(dataRolled, (d) => new Date(d.date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8333,"value":"// d3.timeMonth.ceil(d3.max(dataRolled, (d) => new Date(d.date)))\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":8307,"value":"filledLineData","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":8325,"value":"// filledLineData[timeSlider[1]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8323,"value":"filledLineData","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":true,"hidden":false,"mode":"ojs"},{"id":6670,"value":"chartData = dataRolled","pinned":true,"hidden":false,"mode":"ojs"},{"id":7385,"value":"typeof selectedGroup","pinned":true,"hidden":false,"mode":"ojs"},{"id":6623,"value":"barData = {\n return selectedGroup === \"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 : typeof selectedGroup === \"string\" || selectedGroup === null\n ? selectedGroup\n : selectedGroup.sort((a, b) =>\n d3.ascending(a.toLowerCase(), b.toLowerCase())\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6617,"value":"allSites = bcSiteLocs.map(d => d.site)","pinned":true,"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).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":true,"hidden":false,"mode":"ojs"},{"id":7952,"value":"[...new Set(dataRolled.map((d) => d.group))]","pinned":true,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":8531,"value":"d3.timeMonth\n .range(new Date(dateExtent[0]), new Date(\"2021-01-01\"))\n .map((d) => d.toISOString().substring(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8535,"value":"dateExtent","pinned":true,"hidden":false,"mode":"ojs"},{"id":8318,"value":"dataForBars","pinned":true,"hidden":false,"mode":"ojs"},{"id":1960,"value":"formatDate = d3.timeFormat(\"%Y-%m\")","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":8499,"value":"dataRolled[0].date","pinned":true,"hidden":false,"mode":"ojs"},{"id":8494,"value":"d3.timeMonth.ceil(dataRolled[0].date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1598,"value":"heatData = dataRolled.filter((d) => {\n // d.date = new Date(+new Date(d.date) + 24 * 60 * 60 * 1000);\n // console.log(d.date);\n return (\n new Date(d.date) >= d3.timeMonth(startDate) &&\n new Date(d.date) <= d3.timeMonth(endDate) &&\n // d.count === 1 &&\n d.site === selectedSite\n );\n})","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":1564,"value":"interval = d3.timeMonth.every(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6123,"value":"speciesCountbyMonth","pinned":true,"hidden":false,"mode":"ojs"},{"id":1573,"value":"monthlySpeciesCount = Array.from(speciesCountbyMonth, ([key, values]) => {\n return {\n date: key,\n // datestr: key,\n value: values\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":8297,"value":"timeSlider","pinned":true,"hidden":false,"mode":"ojs"},{"id":6661,"value":"startDate = new Date(focus[0]) //new Date(filledLineData[timeSlider[0]].date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6659,"value":"eachDay = d3.timeDay.range(startDate, new Date(allDates[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1089,"value":"dataForBars = dataRolled\n // .map(d => {\n // d.total > 0 ? (d.count = 1) : (d.count = 0);\n // return d;\n // })\n .filter((d) => {\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":8445,"value":"d3.timeMonth(startDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8447,"value":"dataRolled","pinned":true,"hidden":false,"mode":"ojs"},{"id":1810,"value":"dataWithCount = dataRolled.filter((d) => {\n // d.date = new Date(d.date);\n // startDate = new Date(startDate);\n // endDate = new Date(endDate);\n return speciesList === null\n ? type === \"All\"\n ? d.count === 1 &&\n new Date(d.date) >= d3.timeMonth(startDate) &&\n new Date(d.date) <= d3.timeMonth(endDate)\n : d.count === 1 &&\n new Date(d.date) >= d3.timeMonth(startDate) &&\n new Date(d.date) <= d3.timeMonth(endDate) &&\n d.group === type\n : type === \"All\"\n ? d.count === 1 &&\n new Date(d.date) >= d3.timeMonth(startDate) &&\n new Date(d.date) <= d3.timeMonth(endDate) &&\n d.species === speciesList\n : d.count === 1 &&\n new Date(d.date) >= d3.timeMonth(startDate) &&\n new Date(d.date) <= d3.timeMonth(endDate) &&\n d.group === type &&\n d.species === speciesList;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1100,"value":"dataBySite = d3.group(dataWithCount, d => {\n return d.site;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1367,"value":"dataAsArray = Array.from(dataBySiteGroup, ([key, value]) => ({\n key: key,\n value: Array.from(value)\n}))","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":1332,"value":"dataBySiteGroup = d3.rollup(\n dataWithCount,\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":6649,"value":"md`\n## CSS\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6638,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":6647,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## libraries and imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7970,"value":"// FileAttachment(\"dataRolled.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":8007,"value":"// d3.autoType({site: \"Victoria\", date: \"2018-12-01T00:00\"})","pinned":true,"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 (1) (1).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":true,"hidden":false,"mode":"ojs"},{"id":6705,"value":"// import {\n// bcSiteLocs,\n// // dataRolled\n// // metadata\n// // familyGroupings\n// } from \"a918fce3c1f416e8\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7346,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":8080,"value":"function randomScope(prefix = \"scope-\") {\n return (\n prefix + (performance.now() + Math.random()).toString(32).replace(\".\", \"-\")\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6764,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":8077,"value":"function clamp(a, b, v) {\n return v < a ? a : v > b ? b : v;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6702,"value":"// import { rangeInput } from \"2ce7726104e7e1b7\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7343,"value":"d3format = require(\"d3-format@1\") // import { d3format } from '@jashkenas/inputs@2173'","pinned":true,"hidden":false,"mode":"ojs"},{"id":6556,"value":"html1 = (await require(\"htl@0.2\")).html","pinned":true,"hidden":false,"mode":"ojs"},{"id":8068,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6559,"value":"// import { Table } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7459,"value":"BC_Midres = FileAttachment(\"BC_Midres_latlngTOPO (1) (2).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7460,"value":"// usOld = FileAttachment(\"states (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7463,"value":"states = topojson.feature(us, us.objects.counties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6721,"value":"us =FileAttachment(\"wa.topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","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":true,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}