2b:null 2c:["$","title",null,{"children":"Fish based view | Mathew Brown | Observable"}] 31:Te4b,viewof sites = { const width = 500; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // .call(zoom); const g = svg.append("g").attr("id", "map-layers"); // BC Alberts projection // const projection = d3.geoAlbers().rotat e([126, 0]); // projection.fitSize( // [width, height], // topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng) // ); // svg.call(tip); // we want a custom projection to zoom in a bit // const projection = d3 // .geoAlbers() // .rotate([126, 0]) // .center([0, 50.5]) // .parallels([50, 58.5]) // .scale(5500) // .translate([width / 3, height / 2]); const projection = d3 .geoAlbers() .rotate([126, 0]) .center([0, 49.8]) // .parallels([50, 60.5]) .scale(7500) .translate([960 / 4, 600 / 2]); let current_circle = undefined; // generate the shapes we want - this case bc const path = d3.geoPath().projection(projection); // create the svg of our features g.append("svg") .selectAll("path") .data( topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng).features ) .join("path") .attr("d", path) .attr("fill", "#ddd") .attr("id", "map-layers"); g.append("g") .selectAll("path") .data(states.features) .join("path") .attr("fill", d => { return "#ddd"; }) .attr("opacity", 0.4) .attr("d", path); // Add stations! g.insert("g") .selectAll("circle") .data(mapLocs) .join("circle") .attr("r", function(d) { return d.present === "yes" ? 8 : d.present === "past" ? 8 : 6; }) .attr("transform", function(d) { // Project our stations to the same projeciton as our map! return `translate(${projection([d.long, d.lat])})`; }) // .attr("opacity", 0.6) .attr("fill", function(d) { return d.present === "yes" ? present_colour : d.present === "past" ? past_colour : none_colour; }) .attr("fill-opacity", function(d) { return d.present === "yes" ? 0.6 : d.present === "past" ? 0.1 : 0.6; }) .style("stroke-opacity", function(d) { return d.present === "yes" ? 0.8 : d.present === "past" ? 0.8 : 0; }) .attr("stroke", function(d) { return d.present === "yes" ? present_colour : d.present === "past" ? past_colour : none_colour; }) .on("mouseover", function(event, d) { d3.select(this).attr("stroke", "#000"); tooltip .html(`

${d.site}

${d.Location}

`) .style('visibility', 'visible'); }) .on('mousemove', function(event) { tooltip .style('top', event.pageY - 10 + 'px') .style('left', event.pageX + 10 + 'px'); }) .on("mouseout", function(event) { d3.select(this).attr("stroke", function(d) { return d.present === "yes" ? present_colour : d.present === "past" ? past_colour : none_colour; }); tooltip.html(``).style('visibility', 'hidden'); }); // .on("click", function(event, d) { // if (current_circle !== undefined) { // current_circle.attr("fill", d => "steelblue"); // } // current_circle = d3.select(this); // d3.select(this).attr("fill", "orange"); // const node = svg.node(); // // node.value = value = value === d.ARMS_number ? null : d.ARMS_number; // node.value = d.site; // // console.log(node); // node.dispatchEvent(new CustomEvent("input")); // // outline.attr("d", value ? path(d) : null); // }); return Object.assign(svg.node(), { value: null }); }32:T1009,chart2 = function(types) { // console.clear(); const n = types.length; const width = 960; // const height = 500; // types = ["other"]; // All speceis in types ploted // console.log(types); const Allsites = [ ...new Set(heatData.filter(d => types.includes(d.species)).map(d => d.site)) ]; console.log('species', Allsites); // const height = Allsites.length * 20; const height = Allsites.length * 20 < 100 ? 100 : Allsites.length * 20; // console.log("height", height); //Calculate margins to use const to_chart_sites = [ ...new Set(heatData.filter(d => d.species === types[0]).map(d => d.site)) ]; // this will be the bottom of the top chart (based on proportion of species) // const bh_top_chart = (height * to_chart_species.length) / Allsites.length; // console.log("bh_top_chart", bh_top_chart); const margin1 = { top: 20, right: 40, bottom: 40, left: 140 }; //adjust bottom const chart_width = width - margin1.left - margin1.right; // const chart_height = height - margin1.top - margin1.bottom; let margin_others; // const zoom = d3 // .zoom() // .scaleExtent([1, Infinity]) // .translateExtent([[0, 0], [chart_width, chart_bounds]]) // .extent([[0, 0], [chart_width, chart_bounds]]); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); 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; // let focus0; const x = d3 .scaleTime() .range([0, chart_width]) .domain([ d3.min(heatData, d => d.date), d3.timeMonth.ceil(+d3.max(heatData, d => d.date) + 1) ]); const xAxis = d3.axisBottom(x); const top_margins = []; types.forEach((vari, i) => { // console.log('here', i); let yside = "y" + i; const sites = [ ...new Set(heatData.filter(d => d.species === vari).map(d => d.site)) ]; // console.log(species, Allspecies); // mutable debug = species; let h_each_plot = (height * sites.length) / Allsites.length; top_margins.push(h_each_plot); let chart_bounds = (height * sites.length) / Allsites.length - margin1.top - margin1.bottom; y = d3 .scaleBand() .domain(sites) .range([chart_bounds, 0]) .padding(.2); const yAxis = g => g.call(d3.axisLeft(y)).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(vari, variableName); console.log('blac', heatData.filter(d => d.species === vari)); myVariables[variableName] .selectAll('rect') .data(heatData.filter(d => d.species === vari)) .enter() .append('rect') .attr("class", "line" + i) .attr('x', d => x(d.date)) .attr('y', d => { // console.log('i', d); return y(d.site); }) .attr('width', d => x(d3.timeMonth.ceil(+d.date + 1)) - x(d.date) - 4) .attr('height', y.bandwidth()) .attr('fill', d => { return d.count > 0 ? "#ec4977" : "#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") .attr("transform", "translate(0," + chart_bounds + ")") .call(xAxis); myVariables[variableName] .append("g") .attr("class", "axis axis--y") .call(yAxis); }); return svg.node(); }33:Td5f,function barz() { const height = 80; // const width = 800; const margin = { left: 225, right: 250, top: 0, bottom: 20 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const brushHandle = (g, selection) => g .selectAll(".handle--custom") .data([{ type: "w" }, { type: "e" }]) .join(enter => enter .append("path") .attr("class", "handle--custom") .attr("fill", "#666") .attr("fill-opacity", 0.8) .attr("stroke", "#000") .attr("stroke-width", 1.5) .attr("cursor", "ew-resize") .attr("d", arc) ) .attr("display", selection === null ? "none" : null) .attr( "transform", selection === null ? null : (d, i) => `translate(${selection[i]},${(height + margin.top - margin.bottom) / 2})` ); const arc = d3 .arc() .innerRadius(0) .outerRadius((height - margin.top - margin.bottom) / 2) .startAngle(0) .endAngle((d, i) => (i ? Math.PI : -Math.PI)); let minX = 0, maxX = 0; const brush = d3 .brushX() .extent([ [margin.left, margin.top], [width - margin.right, height - margin.bottom] ]) .on("brush end", brushed); const x = d3 .scaleTime() .range([margin.left, width - margin.right]) .domain([ d3.min(chartData, d => d.date), d3.timeMonth.ceil(+d3.max(chartData, d => d.date) + 1) ]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); const y = d3 .scaleLinear() .domain([0, maxSitesPerMonth]) .range([height - margin.bottom, margin.top]); const yAxis = g => g.call(d3.axisLeft(y)).call(g => g.select(".domain").remove()); svg.append('g').call(xAxis); svg.append('g').call(yAxis); svg .selectAll('rect') .data(monthlySiteCount) .enter() .append('rect') .attr('x', d => x(d.date)) .attr('y', d => { return y(d.value); }) .attr('width', d => x(d3.timeMonth.ceil(+d.date + 1)) - x(d.date) - 1) .attr('height', d => y(0) - y(d.value)) .attr('fill', d => "#ec4977"); let returnValue = Object.assign(svg.node(), { value: { range: [minX, maxX] } }); // add 1 month to make sure we include the latest month in initial brush const end_date = _.clone(monthlySiteCount[monthlySiteCount.length - 1].date); console.log(end_date); svg .append("g") .call(brush) .call( brush.move, [ monthlySiteCount[0].date, new Date(end_date.setMonth(end_date.getMonth() + 1)) ].map(x) ); function brushed(event) { const selection = event.selection; const node = svg.node(); if (selection === null) { } else { const d0 = selection.map(x.invert); const d1 = d0.map(interval.round); // If empty when rounded, use floor instead. if (d1[0] >= d1[1]) { d1[0] = interval.floor(d0[0]); d1[1] = interval.offset(d1[0]); } node.val = d0; output({ range: [d0[0], d0[1]] }); } d3.select(this).call(brushHandle, selection); } function output(value) { const node = svg.node(); node.value = value; node.dispatchEvent(new CustomEvent('input')); } return returnValue; }34:[{"id":"9d6c6a1c6ffb5027b32c6bf5d8b5ec633cd42dba3cd291f24f7e984a1f665ca8723d7bd02f9bd1850192cdd2fa209646295d405483e0c5246cd13ea6352a6339","href":"https://static.observableusercontent.com/files/9d6c6a1c6ffb5027b32c6bf5d8b5ec633cd42dba3cd291f24f7e984a1f665ca8723d7bd02f9bd1850192cdd2fa209646295d405483e0c5246cd13ea6352a6339","name":"rockfish.jpg","type":"image/jpeg","lastModified":1603468004226.319,"size":398109},{"id":"320356008aa938190795854cbe6873e0619a5e164b0449cb65620e618500ef9d672747b7a4677af12b22c031b241dcbdcada8f40b9310f05a353f7f25b3a2873","href":"https://static.observableusercontent.com/files/320356008aa938190795854cbe6873e0619a5e164b0449cb65620e618500ef9d672747b7a4677af12b22c031b241dcbdcada8f40b9310f05a353f7f25b3a2873","name":"salmon.jpg","type":"image/jpeg","lastModified":1603483049150.243,"size":117765},{"id":"98569687427006ddab746aa9780929366a20871d5cef029414718cbe4c289a065de4c55bae47d94404c757d4d29e05522ae912cb44c341709086d407332bbc52","href":"https://static.observableusercontent.com/files/98569687427006ddab746aa9780929366a20871d5cef029414718cbe4c289a065de4c55bae47d94404c757d4d29e05522ae912cb44c341709086d407332bbc52","name":"forage.jpg","type":"image/jpeg","lastModified":1603467989603.864,"size":53912},{"id":"fbbaa66360b3f69e9b84ed8cfca604e396c009ca123eed5edae2aea437a1bea42292809062534d4015e10449648761ab8e6b63a6ce2a132b0bb4ad1ab2ce0313","href":"https://static.observableusercontent.com/files/fbbaa66360b3f69e9b84ed8cfca604e396c009ca123eed5edae2aea437a1bea42292809062534d4015e10449648761ab8e6b63a6ce2a132b0bb4ad1ab2ce0313","name":"sculpin.jpg","type":"image/jpeg","lastModified":1603467989694.119,"size":257374},{"id":"6e76d3675e72a3a2e7ce8994293ee1df2464e61aeca41a2dde1caf7d5e5c96e9b326c5fd069491543a660b8e0d28d3676c6c86e5769f749a8c6190bf88a91556","href":"https://static.observableusercontent.com/files/6e76d3675e72a3a2e7ce8994293ee1df2464e61aeca41a2dde1caf7d5e5c96e9b326c5fd069491543a660b8e0d28d3676c6c86e5769f749a8c6190bf88a91556","name":"sharks.jpg","type":"image/jpeg","lastModified":1603468003977.102,"size":31605},{"id":"2850c9b6512b4a5fceaafa0c53cbbea54124cdbb460cc980878316e0573f8f45eadbd0431ad844f36f4d5cb4a8fe9ce429e79d2b290863d7e49f700b9e205348","href":"https://static.observableusercontent.com/files/2850c9b6512b4a5fceaafa0c53cbbea54124cdbb460cc980878316e0573f8f45eadbd0431ad844f36f4d5cb4a8fe9ce429e79d2b290863d7e49f700b9e205348","name":"flatfish.jpg","type":"image/jpeg","lastModified":1603468004068.82,"size":87455},{"id":"f2189c664346c55eab5a1d52a9cb772b88b010eb694e44493f29cb9206145ab42db858fd7d9aca03b0bd1f0fc738392f08dfa799283dae4e0825b3cfaabb9c25","href":"https://static.observableusercontent.com/files/f2189c664346c55eab5a1d52a9cb772b88b010eb694e44493f29cb9206145ab42db858fd7d9aca03b0bd1f0fc738392f08dfa799283dae4e0825b3cfaabb9c25","name":"salmon@2.jpg","type":"image/jpeg","lastModified":1603483919311.681,"size":119194},{"id":"0a74cf83eb392781d71d2b1c5a87c21c1d8242d4e4e97b5982faa0be4a25b90a570e1eae35d2039d3a85e0ac277bfa2477c19dc10a6c55ceebed100a60d8e88b","href":"https://static.observableusercontent.com/files/0a74cf83eb392781d71d2b1c5a87c21c1d8242d4e4e97b5982faa0be4a25b90a570e1eae35d2039d3a85e0ac277bfa2477c19dc10a6c55ceebed100a60d8e88b","name":"P1004685.00_00_01_09.Still034_T.jpg","type":"image/jpeg","lastModified":1606419062371.473,"size":6531270},{"id":"d43a5f4aed432bee064ae5e5c3ac882935939dacc34eaa11d261c519c084831113de59a8eaf9fb5287724d4effe298fec80fad2e5d64d328c3a726152c26ffd1","href":"https://static.observableusercontent.com/files/d43a5f4aed432bee064ae5e5c3ac882935939dacc34eaa11d261c519c084831113de59a8eaf9fb5287724d4effe298fec80fad2e5d64d328c3a726152c26ffd1","name":"tavishcampbell.ca-1459 copy.jpg","type":"image/jpeg","lastModified":1606418904675.431,"size":1801640},{"id":"2994e184bd3cac4c857d3552150ff62584d29c7ecade57e4e70bdafff2865389d785158505c7450549fed9cc7a2bdfb632ca9c24dd6acd46bef0943e8a492451","href":"https://static.observableusercontent.com/files/2994e184bd3cac4c857d3552150ff62584d29c7ecade57e4e70bdafff2865389d785158505c7450549fed9cc7a2bdfb632ca9c24dd6acd46bef0943e8a492451","name":"P1344582.00_12_11_12.Still088-14.jpg","type":"image/jpeg","lastModified":1606418941852.725,"size":1893842},{"id":"3b783d14a3a97149fea88822a1d45e204bafb7461582e9ad012b230c35b37199901ecb606321689dda90760b44648b229b5e39fab879191e32b60fd492fe7158","href":"https://static.observableusercontent.com/files/3b783d14a3a97149fea88822a1d45e204bafb7461582e9ad012b230c35b37199901ecb606321689dda90760b44648b229b5e39fab879191e32b60fd492fe7158","name":"Quillback rockfish - P1004685.00_05_23_13.Still009.jpg","type":"image/jpeg","lastModified":1606418966482.122,"size":3442524},{"id":"0b3909d5b6b9a3c05053cee9bf52944a7ad25917a6a1d43007301b135b8bd34348161df1f5b22675013a8148a788436e2321f8ccd8b5f6ff37c94b5f9033ab2f","href":"https://static.observableusercontent.com/files/0b3909d5b6b9a3c05053cee9bf52944a7ad25917a6a1d43007301b135b8bd34348161df1f5b22675013a8148a788436e2321f8ccd8b5f6ff37c94b5f9033ab2f","name":"P1266011.00_01_36_46.Still001.jpg","type":"image/jpeg","lastModified":1606418991843.915,"size":3759466},{"id":"98569687427006ddab746aa9780929366a20871d5cef029414718cbe4c289a065de4c55bae47d94404c757d4d29e05522ae912cb44c341709086d407332bbc52","href":"https://static.observableusercontent.com/files/98569687427006ddab746aa9780929366a20871d5cef029414718cbe4c289a065de4c55bae47d94404c757d4d29e05522ae912cb44c341709086d407332bbc52","name":"forage (1).jpg","type":"image/jpeg","lastModified":1606419271256.543,"size":53912},{"id":"4c0f7571e51f98bc2825017842bbe73fc2b2266a758eee56e8acfc0b13594fdf3bc74fbac20674f8c369762481bc65000d96f187ef0b57afda419f5c0e44f2f5","href":"https://static.observableusercontent.com/files/4c0f7571e51f98bc2825017842bbe73fc2b2266a758eee56e8acfc0b13594fdf3bc74fbac20674f8c369762481bc65000d96f187ef0b57afda419f5c0e44f2f5","name":"P1022092.00_00_42_45.Still010.jpg","type":"image/jpeg","lastModified":1606950615876.13,"size":7020329},{"id":"0b9945d5f9bbdcb3f905b67ccdb6b466e947c2dec6fbbd583b96747dd54c29a20b8053e6e2203b38cf7d9e33e66183e6a24cf14ff43669cbc74d7876e8799884","href":"https://static.observableusercontent.com/files/0b9945d5f9bbdcb3f905b67ccdb6b466e947c2dec6fbbd583b96747dd54c29a20b8053e6e2203b38cf7d9e33e66183e6a24cf14ff43669cbc74d7876e8799884","name":"Striped seaperch - P1004667.00_05_34_23.Still009.jpg","type":"image/jpeg","lastModified":1606951277504.184,"size":5636885},{"id":"bdf5f3a5b4efd44d5c828ae8c25c472000705f0b82e167377145a45ad26fe534b9d890f323f2c2431d7417807d31135320cbd1f0e480df61a68d9f17f9d499b4","href":"https://static.observableusercontent.com/files/bdf5f3a5b4efd44d5c828ae8c25c472000705f0b82e167377145a45ad26fe534b9d890f323f2c2431d7417807d31135320cbd1f0e480df61a68d9f17f9d499b4","name":"GOPR4083.00.jpg","type":"image/jpeg","lastModified":1606419237913.036,"size":1274658}] 2f:{"id":"1aff5f3ccb61927a","slug":null,"title":"Fish based view","thumbnail":"40bf08d2b1de50bce43b68d3650fb3e76d0743ecfab4892ecc381998f9f45d3e","access_level":"unlisted","create_time":"$D2020-10-23T15:39:30.599Z","update_time":"$D2021-03-09T17:57:14.561Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5f3658f85b1bd5ab","login":"mbrownshoes","name":"Mathew Brown","avatar_url":"https://avatars-next.observableusercontent.com/8d851e9b2c3656a745ef857c9e2881c47c470e8b59db24ca69b232a2554196fc","tier":"starter_2024","bio":"\n"},"version":2202,"publish_version":2202,"role":null,"authored":false,"authors":[{"type":"individual","id":"a9239813cf88562c","login":"mbrownshoes","name":"Mathew Brown","avatar_url":"https://avatars-next.observableusercontent.com/8d851e9b2c3656a745ef857c9e2881c47c470e8b59db24ca69b232a2554196fc","tier":null,"bio":"\n"}],"members":[{"type":"individual","id":"a9239813cf88562c","login":"mbrownshoes","name":"Mathew Brown","avatar_url":"https://avatars-next.observableusercontent.com/8d851e9b2c3656a745ef857c9e2881c47c470e8b59db24ca69b232a2554196fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fish based view","cells":[{"id":0,"value":"md`# Fish based view\n\n\nClick an image to view that type of fish. Select multipe types or double click to show all\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"viewof fishSelect = previews(fishWithPics)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1905,"value":"viewof speciesList = Select(uniqSpecies, {\n value: uniqSpecies[0],\n label: \"Species\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2193,"value":"Select(allSites, {\n value: allSites[0],\n label: \"Species\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2196,"value":"allSites = bcSiteLocs.map(d => d.site)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"// style = html`\n// \n// `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof date = Scrubber(uniqDates, {\n autoplay: false,\n format: date =>\n new Date(date).toLocaleString(undefined, {\n month: \"long\",\n year: \"numeric\"\n }),\n loop: false,\n delay: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1955,"value":"md`\n### ${new Date(date).toLocaleString(undefined, {\n month: \"short\",\n year: \"numeric\"\n})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"viewof cc = barz()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2045,"value":"share = chart2([speciesList])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2148,"value":"speciesList","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2145,"value":"heatData = dataRolled.filter(d => {\n return (\n d.date >= d3.timeMonth(cc.range[0]) &&\n d.date <= d3.timeMonth(cc.range[1]) &&\n d.species === speciesList\n );\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2046,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2132,"value":"chartData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"monthlySiteCount[monthlySiteCount.length - 1].date","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2104,"value":"monthlySiteCount","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"import { Select } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"import { preview, previews, fishWithPics, mutable type } from \"73c68590a6b8ba4c\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"present_colour = \"#0cb4f5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"past_colour = \"#0cb4f5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"none_colour = \"black\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"uniqSpecies = [\n ...new Set(dataRolled.filter(d => d.group === type).map(d => d.species))\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"mapLocs = bcSiteLocs.map(e => {\n e.present = \"no\";\n\n if (\n dataRolled.filter(\n d =>\n d.total > 0 &&\n d.site === e.site &&\n (+d.date === +d3.timeMonth(date) && d.species === speciesList)\n ).length > 0\n ) {\n e.present = \"yes\";\n } else if (\n dataRolled.filter(\n d =>\n d.total > 0 &&\n d.site === e.site &&\n +d.date < +d3.timeMonth(date) &&\n d.species === speciesList\n ).length > 0\n ) {\n e.present = \"past\";\n } else {\n e.present = \"no\";\n }\n return e;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2011,"value":"bcSiteLocs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2008,"value":"speciesList","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2006,"value":"date","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2015,"value":"dataRolled[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"dataRolled.filter(d => {\n // console.log(+d.date < +d3.timeMonth(date));\n return (\n d.total > 0 &&\n d.site === bcSiteLocs[0].site &&\n +d.date < +d3.timeMonth(date) &&\n d.species === speciesList\n );\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"md`\n### Join locations and dna data\n\nNeed 1 dataset with\n\nsite,\ndate,\npresence [yes, before, no]\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"function join(lookupTable, mainTable, lookupKey, mainKey, select) {\n const l = lookupTable.length,\n m = mainTable.length,\n output = [],\n // create an index for lookup table\n lookupIndex = new Map(lookupTable.map(d => [d[lookupKey], d]));\n\n return mainTable.map(d => select(d, lookupIndex.get(d[mainKey])));\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"// d3.timeMonth(joinedData[0].monthly)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"// +joinedData[0].monthly < +d3.timeMonth(date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"// joinedData[0].monthly","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"d3.timeMonth(date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"// mapData = joinedData.map(d => {\n// d.presence = \"no\";\n// if (+d.monthly === +d3.timeMonth(date) && d.class === type) {\n// d.presence = \"yes\";\n// } else if (+d.monthly < +d3.timeMonth(date) && d.class === type) {\n// d.presence = \"past\";\n// } else {\n// d.presence = \"no\";\n// }\n// return d;\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1975,"value":"speciesList","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1946,"value":"bcSiteLocs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1948,"value":"d3.timeMonth(date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1943,"value":"dataRolled.filter(\n d =>\n d.site === bcSiteLocs[0].site &&\n (+d.date === +d3.timeMonth(date) && d.species === speciesList)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2153,"value":"(2291 + 76385) * 0.04 + (2291 + 76385)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1941,"value":"type","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1938,"value":"dataRolled[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"type","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"// joinedData.filter(\n// d =>\n// d.site === bcSiteLocs[0].site &&\n// +d.monthly < +d3.timeMonth(date) &&\n// d.class === type.length > 0\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"// joinedData = join(bcSiteLocs, fakeData, \"site\", \"site\", (data, locs) => ({\n// site: data.site,\n// monthly: data.monthly,\n// species: data.species,\n// class: data.class,\n// lat: locs.lat,\n// long: locs.long\n// // : locs !== undefined ? locs.name : null\n// }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .text('a simple tooltip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"interval = d3.timeMonth.every(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"monthlySiteCount[monthlySiteCount.length - 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"maxSitesPerMonth = d3.max(\n Array.from(\n d3.rollup(chartData, v => v.length, d => d.date),\n ([key, values]) => {\n return values;\n }\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2117,"value":"monthlySiteCount = Array.from(\n d3.rollup(\n chartData,\n v =>\n d3.sum(v, d => {\n d.count;\n d.total > 0 ? (d.count = 1) : (d.count = 0);\n return d.count;\n }),\n d => d.date\n ),\n ([key, values]) => {\n return {\n date: new Date(key),\n // datestr: key,\n value: values\n };\n }\n).sort((a, b) => a.date - b.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2126,"value":"d3.rollup(\n chartData,\n v =>\n d3.sum(v, d => {\n d.count;\n d.total > 0 ? (d.count = 1) : (d.count = 0);\n return d.count;\n }),\n d => d.date\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2124,"value":"chartData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"// monthlySiteCount = Array.from(sitesCountbyMonth, ([key, values]) => {\n// return Array.from(values, ([month, count]) => {\n// return {\n// site: key,\n// monthly: month,\n// // datestr: key,\n// value: 1\n// };\n// });\n// }).sort((a, b) => a.monthly - b.monthly)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2067,"value":"// monthlySiteCount = d3.rollup(chartData, v => v.length, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"sitesCountbyMonth = d3.rollup(\n chartData,\n v => v.length,\n d => d.site,\n d => d.date\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"// sitesCountbyMonth = d3.rollup(\n// chartData,\n// v =>\n// d3.sum(v, d => {\n// d.count;\n// d.total > 0 ? (d.count = 1) : (d.count = 0);\n// return d.count;\n// }),\n// d => +d.date\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"chartData = dataRolled.filter(d => d.species === speciesList)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"dateFilter = new Date(date).toLocaleString(\"en\", {\n month: \"numeric\",\n year: 'numeric'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function zoom(s) {\n s.call(\n d3\n .zoom()\n .on(\"zoom\", event =>\n s.select(\"#map-layers\").attr(\"transform\", event.transform)\n )\n .scaleExtent([1, 18])\n .translateExtent([[0, 0], [width, height]])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"uniqDates = [...new Set(dataRolled.map(d => +d.date))].sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\", 'd3-gridding@0.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import { bcSiteLocs, dataRolled } from 'a918fce3c1f416e8'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"import { states } from '73c68590a6b8ba4c'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { BC_Midres } from '@mbrownshoes/how-i-start-maps-in-d3'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"img_height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"// area = {\n// const area = d3.create('div').attr('class', 'area');\n// // .on(\"mouseover\", function(event, d) {\n// // event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\";\n// // });\n\n// return area;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"modes = d3.gridding().modes()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"// import { preload } from '@severo/preload-a-list-of-images'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"// import { form } from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"// import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"// import { viewof stuff } from '3ba42860653e101c'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"