2c:null 2d:["$","title",null,{"children":"Location based view | Mathew Brown | Observable"}] 32:Tdf1,viewof sites = { const width = 500; // const height = 300; 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().rotate([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.3]) // // .parallels([50, 60.5]) // .scale(10500) // .translate([960 / 2.5, 600 / 2]); // .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("stroke", "#f3f3f3") .attr("fill", d => { // console.log(d); return "#ddd"; }) .attr("opacity", 0.4) .attr("d", path); // Add stations! g.append("g") .selectAll("circle") .data(bcSiteLocs) .join("circle") .attr("r", 8) .attr("transform", function(d) { // Project our stations to the same projeciton as our map! return `translate(${projection([d.long, d.lat])})`; }) .attr("opacity", 0.8) .attr("fill", function(d) { return d.site === selectedSite ? "#ec4977" : "#0cb4f5"; }) .attr("id", d => d.site) .on("mouseover", function(event, d) { // console.log(d.Location); d3.select(this).attr("stroke", "#000"); d3.select(this).attr("r", 10); // d3.select(this).attr("stroke", "#000"); tooltip .html(`

${d.site}

${d.Location}

`) .style('visibility', 'visible'); // tip.show(d, this); }) .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", null); d3.select(this).attr("r", 8); tooltip.html(``).style('visibility', 'hidden'); // tip.hide(); }) .on("click", function(event, d) { set(viewof selectedSite, d.site); // mutable selectedSite = d.site; // console.log(d); // if (current_circle !== undefined) { // current_circle.attr("fill", d => "#0cb4f5"); // d3.select(this).attr("r", 8); // } // // console.log(this); // current_circle = d3.select(this); // d3.select(this).attr("fill", "#ec4977"); // d3.select(this).attr("r", 8); // 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); }); // console.log(current_circle); // function start() { // console.log('here'); // d3.select('#Victoria').dispatch('click'); // } // start(); // return Object.assign(svg.node(), { value: "Victoria" }); // d3.select('#Victoria').dispatch('click'); return svg.node(); }33:T41c,function preview([image, min]) { return html` { // event.currentTarget.firstElementChild.style.borderColor = "red"; d3.selectAll(".badge") // .style("border-radius", "50px") .style("border", "2px solid #e8e8e8"); // console.log(event.currentTarget).attr("fill", d => "steelblue"); event.currentTarget.firstElementChild.style.borderColor = "#ec4977"; mutable type = min.species; }} >

${ min.species }

`; }34:Tf27,chart2 = function(types) { // console.clear(); const n = types.length; const width = 960; const Allspecies = [ ...new Set( heatData.filter(d => types.includes(d.group)).map(d => d.species) ) ]; const height = Allspecies.length * 20 < 100 ? 100 : Allspecies.length * 20; console.log('here', Allspecies); //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: 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 species = [ ...new Set(heatData.filter(d => d.group === vari).map(d => d.species)) ]; // console.log(species, Allspecies); mutable debug = species; let h_each_plot = (height * species.length) / Allspecies.length; top_margins.push(h_each_plot); let chart_bounds = (height * species.length) / Allspecies.length - margin1.top - margin1.bottom; y = d3 .scaleBand() .domain(species) .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(heatData.filter(d => d.group === vari)); myVariables[variableName] .selectAll('rect') .data(heatData.filter(d => d.group === vari)) .enter() .append('rect') .attr("class", "line" + i) .attr('x', d => x(d.date)) .attr('y', d => { return y(d.species); }) .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(); }35:Te76,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(dataRolled, d => d.date), d3.timeMonth.ceil(+d3.max(dataRolled, 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, maxSpeciesPerMonth]) .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(fakeData) .data(monthlySpeciesCount) // .data(fakeData) .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 = d3.timeMonth.ceil(+d3.max(dataRolled, d => d.date)); // _.clone( // monthlySpeciesCount[monthlySpeciesCount.length - 1].date // ); // console.log( // "end", // end_date, // d3.timeMonth.ceil(+d3.max(dataRolled, d => d.date) + 1) // ); svg .append("g") .call(brush) .call( brush.move, [ // monthlySpeciesCount[0].date, d3.min(dataRolled, d => d.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; }36:[{"id":"89e1fcae006ae5fcc0836c70ab932636ee855f19753a6386751baab5d4eac2233b65bc743e18fd2800674ca426f4f147d9d637615c894dc6460abbdc4b778761","href":"https://static.observableusercontent.com/files/89e1fcae006ae5fcc0836c70ab932636ee855f19753a6386751baab5d4eac2233b65bc743e18fd2800674ca426f4f147d9d637615c894dc6460abbdc4b778761","name":"GOPR4083.00.jpg","type":"image/jpeg","lastModified":1607455397547.83,"size":487120},{"id":"fddaf991b910154eb05bd9d947c3da2af25390539c549b992fba3c33bf2605aec5304924e215731b9db65786823349e315a68f28898f31e83081aa2cfb8d600e","href":"https://static.observableusercontent.com/files/fddaf991b910154eb05bd9d947c3da2af25390539c549b992fba3c33bf2605aec5304924e215731b9db65786823349e315a68f28898f31e83081aa2cfb8d600e","name":"Striped seaperch - P1004667.00_05_34_23.Still009.jpg","type":"image/jpeg","lastModified":1607455399004.963,"size":1674310},{"id":"d76cc15e29c01ac40ab123054d4f0acf3a6f059011dc456bf0adc00cfe52f90cbd38dab06910cd0412596bc9f7fe7a41ec9a2e672f91a55b6909b485c09cc3f1","href":"https://static.observableusercontent.com/files/d76cc15e29c01ac40ab123054d4f0acf3a6f059011dc456bf0adc00cfe52f90cbd38dab06910cd0412596bc9f7fe7a41ec9a2e672f91a55b6909b485c09cc3f1","name":"P1022092.00_00_42_45.Still010 (1).jpg","type":"image/jpeg","lastModified":1607455399151.31,"size":2005197},{"id":"fc39470fa43361cd1769ee4cdf8281e2edb35aab9295b7f9094574949cb314f266a7e7895652fed7a17f0a3030be77607a5cb86e4679bc195bb1f130107f1eb2","href":"https://static.observableusercontent.com/files/fc39470fa43361cd1769ee4cdf8281e2edb35aab9295b7f9094574949cb314f266a7e7895652fed7a17f0a3030be77607a5cb86e4679bc195bb1f130107f1eb2","name":"P1344582.00_12_11_12.Still088-14.jpg","type":"image/jpeg","lastModified":1607455425022.453,"size":623177},{"id":"67e531c008b9c0395735ba4616eadba429fe94c5072314c94db7521205e4a740e1aa6fe8f436fcabf21d38921dd2ebb1392b05afa030a27d691cd48c6257af38","href":"https://static.observableusercontent.com/files/67e531c008b9c0395735ba4616eadba429fe94c5072314c94db7521205e4a740e1aa6fe8f436fcabf21d38921dd2ebb1392b05afa030a27d691cd48c6257af38","name":"tavishcampbell.ca-1459 copy.jpg","type":"image/jpeg","lastModified":1607455425122.933,"size":680755},{"id":"0ff7ee1bce2662dd964b6b0f07469d4b99e429fcc824f6718d5bc67c8b69bca772c5cb188e7262b8ff83b8a0341cd91569fa2227f40b97db4843d5284e80386c","href":"https://static.observableusercontent.com/files/0ff7ee1bce2662dd964b6b0f07469d4b99e429fcc824f6718d5bc67c8b69bca772c5cb188e7262b8ff83b8a0341cd91569fa2227f40b97db4843d5284e80386c","name":"P1266011.00_01_36_46.Still001 (1).jpg","type":"image/jpeg","lastModified":1607455425513.209,"size":1139991},{"id":"873bf1102c4b053ce58d147d2e8dc64306eebf615aeef56d5d9ffc5d8a2e56a5d18f2f2b6afedd41a9ebcdcfd0f2243426bbfe1e7259e0d37860d61983ed498c","href":"https://static.observableusercontent.com/files/873bf1102c4b053ce58d147d2e8dc64306eebf615aeef56d5d9ffc5d8a2e56a5d18f2f2b6afedd41a9ebcdcfd0f2243426bbfe1e7259e0d37860d61983ed498c","name":"P1004685.00_00_01_09.Still034_T (1).jpg","type":"image/jpeg","lastModified":1607455425885.589,"size":1884266},{"id":"a0f243c4214599fa6a2f97c063eeaaff42e61c3d7b73bc27bb9a1b4091418703fac55c008319336f86860dadb15046ffd91c0cf2f1fd2d45d258f4a7ca727f7d","href":"https://static.observableusercontent.com/files/a0f243c4214599fa6a2f97c063eeaaff42e61c3d7b73bc27bb9a1b4091418703fac55c008319336f86860dadb15046ffd91c0cf2f1fd2d45d258f4a7ca727f7d","name":"Quillback rockfish - P1004685.00_05_23_13.Still009 (1).jpg","type":"image/jpeg","lastModified":1607455425619.338,"size":1006052},{"id":"73edfa79ba517d92ac2357d146e6bc57ad195ce6a029bf31debc6285b6889a3e6643f7c9d1ccf39902afd0f0fff795005084ff7191e4a7d954bd79ffb5cf6bac","href":"https://static.observableusercontent.com/files/73edfa79ba517d92ac2357d146e6bc57ad195ce6a029bf31debc6285b6889a3e6643f7c9d1ccf39902afd0f0fff795005084ff7191e4a7d954bd79ffb5cf6bac","name":"untitled (10).png","type":"image/png","lastModified":1616450232596.118,"size":468056},{"id":"b25084e516627c195b25fbfdb164e2c3e5f0a49d44708cbe78b3196af1f494a00d59af52711eb7a386fef475acb22239c9689e4f2e925daa6a91b7fe588f1443","href":"https://static.observableusercontent.com/files/b25084e516627c195b25fbfdb164e2c3e5f0a49d44708cbe78b3196af1f494a00d59af52711eb7a386fef475acb22239c9689e4f2e925daa6a91b7fe588f1443","name":"untitled (9)@1.png","type":"image/png","lastModified":1616449887928.625,"size":535080},{"id":"95d11f56ca5b46162ae013f0fe19ad33ff38a0b59a05eab8fa9904e443ec0d6a8f5b607a9cdcf1c286e5c39e8fe71faa1b29ea40efb9b82f8332834fff6fa701","href":"https://static.observableusercontent.com/files/95d11f56ca5b46162ae013f0fe19ad33ff38a0b59a05eab8fa9904e443ec0d6a8f5b607a9cdcf1c286e5c39e8fe71faa1b29ea40efb9b82f8332834fff6fa701","name":"untitled (14).png","type":"image/png","lastModified":1616451741132.722,"size":401265},{"id":"fb4d5c6dd1ac8b94a9faeffc1c8a21779d2d1235342728b9e291856f5c94b6e7c41f1cd2b01d240e050790492c0e4943f3eace5cf04b9a733dd6b88cc4104c56","href":"https://static.observableusercontent.com/files/fb4d5c6dd1ac8b94a9faeffc1c8a21779d2d1235342728b9e291856f5c94b6e7c41f1cd2b01d240e050790492c0e4943f3eace5cf04b9a733dd6b88cc4104c56","name":"untitled (12).png","type":"image/png","lastModified":1616450442196.381,"size":578721},{"id":"4c07834c7dc2c5ceccc5e4f1da34805d9498ff8ddb700c388cb5a06ab54f9ef866cddbe25a4d6df90a60875b68929042353768518543308f35e584938d69474b","href":"https://static.observableusercontent.com/files/4c07834c7dc2c5ceccc5e4f1da34805d9498ff8ddb700c388cb5a06ab54f9ef866cddbe25a4d6df90a60875b68929042353768518543308f35e584938d69474b","name":"untitled (11).png","type":"image/png","lastModified":1616450264570.577,"size":556328},{"id":"155429bd5f8c48b90a8d06beda0de0ae1520eb985e5497e31142d69ed31029824771815c76488ce493087b17d4094e02cb2b955115e45ff76bcd1f993f092d2c","href":"https://static.observableusercontent.com/files/155429bd5f8c48b90a8d06beda0de0ae1520eb985e5497e31142d69ed31029824771815c76488ce493087b17d4094e02cb2b955115e45ff76bcd1f993f092d2c","name":"untitled (6).png","type":"image/png","lastModified":1616450482414.238,"size":415290},{"id":"64aed333f8072bae7d81fed476a9beea1f1a86eabd53ff6ea8c987aa5ee86bb001c1c3f709c32dedb64018cc05a43921a5ac8b1900f8dca058beac242147a8f2","href":"https://static.observableusercontent.com/files/64aed333f8072bae7d81fed476a9beea1f1a86eabd53ff6ea8c987aa5ee86bb001c1c3f709c32dedb64018cc05a43921a5ac8b1900f8dca058beac242147a8f2","name":"flatfish.png","type":"image/png","lastModified":1616450107399.552,"size":567110},{"id":"c75f4d836293fdb8678d9ae9932da15244acc7731548893cf6ca7fcb927f92a27d6aac4abe80a77b61a1fb5b02a1c24f9e9f84db8fa12cdad96f48f06cb78076","href":"https://static.observableusercontent.com/files/c75f4d836293fdb8678d9ae9932da15244acc7731548893cf6ca7fcb927f92a27d6aac4abe80a77b61a1fb5b02a1c24f9e9f84db8fa12cdad96f48f06cb78076","name":"untitled (7).png","type":"image/png","lastModified":1616450300154.143,"size":413580},{"id":"9ec1e7eab950f5752693335255ce148019b80312b8c198f11afdf96d462877f394d04b6d4ea7d254ca98beb3cc27ba72a2d03ac88707c2d7c13203766897c981","href":"https://static.observableusercontent.com/files/9ec1e7eab950f5752693335255ce148019b80312b8c198f11afdf96d462877f394d04b6d4ea7d254ca98beb3cc27ba72a2d03ac88707c2d7c13203766897c981","name":"all_fish.png","type":"image/png","lastModified":1617635615631.319,"size":564505},{"id":"7ba550b22fdb22cba9fed3326a51f513cf291d8ea63f9db45879b66641f3935ce23bb2fa199e89c9fca8abcc84e39c72ed6a9e2ade12d479badfd9ce5e1b9044","href":"https://static.observableusercontent.com/files/7ba550b22fdb22cba9fed3326a51f513cf291d8ea63f9db45879b66641f3935ce23bb2fa199e89c9fca8abcc84e39c72ed6a9e2ade12d479badfd9ce5e1b9044","name":"BC_Midres_latlngTOPO (1).json","type":"application/json","lastModified":1613517766736.359,"size":645776},{"id":"f3338f3780b75ee12650159e8c2af33ab0a8abd39dd5584fcb99a3fd4633b9a949053a93bb9929314bbe02109625135a58466af3b593cb12d0c553b2281ea155","href":"https://static.observableusercontent.com/files/f3338f3780b75ee12650159e8c2af33ab0a8abd39dd5584fcb99a3fd4633b9a949053a93bb9929314bbe02109625135a58466af3b593cb12d0c553b2281ea155","name":"states.json","type":"application/json","lastModified":1613580864373.013,"size":101495},{"id":"a2f16fcfdfa341f113078cb8877c488fb6ec861b8eff94bcb030baf31805f912dfbde5512d1f962700e3010f28d7a3ef31dbb95676be3b710091518c20e6f6af","href":"https://static.observableusercontent.com/files/a2f16fcfdfa341f113078cb8877c488fb6ec861b8eff94bcb030baf31805f912dfbde5512d1f962700e3010f28d7a3ef31dbb95676be3b710091518c20e6f6af","name":"ICO_Fish_nano_for_MatB.csv","type":"text/csv","lastModified":1614010350373.072,"size":47760},{"id":"32903e748adbc0b402a7d22565c6a24cefdb8917f8be8b019a42ff442d01668ac96adb382032faa3c57262af80fd51b8eee58a9dbbe253010ffba8c6352ce2bb","href":"https://static.observableusercontent.com/files/32903e748adbc0b402a7d22565c6a24cefdb8917f8be8b019a42ff442d01668ac96adb382032faa3c57262af80fd51b8eee58a9dbbe253010ffba8c6352ce2bb","name":"cod.png","type":"image/png","lastModified":1614360172375.077,"size":560931},{"id":"26448bfd1f1ed3ff62e412c775fe2ba4122bf2849cecc4ce2a4ecc53de2b2e0bb51703cb4af617850b3fc3ee7cb71c13222e6e07a074b08cc4975c1e72061a2d","href":"https://static.observableusercontent.com/files/26448bfd1f1ed3ff62e412c775fe2ba4122bf2849cecc4ce2a4ecc53de2b2e0bb51703cb4af617850b3fc3ee7cb71c13222e6e07a074b08cc4975c1e72061a2d","name":"perche.jpg","type":"image/jpeg","lastModified":1614361114058.685,"size":14544},{"id":"96e6d6298f3e5946eeb833c659cf45009984de0b350f941d2d1af14e2adca8051e5f2240013c64c3ae8954c23dee2d876a8b1f1cc1dc7607e3f5a76d5ea03b70","href":"https://static.observableusercontent.com/files/96e6d6298f3e5946eeb833c659cf45009984de0b350f941d2d1af14e2adca8051e5f2240013c64c3ae8954c23dee2d876a8b1f1cc1dc7607e3f5a76d5ea03b70","name":"blenny.png","type":"image/png","lastModified":1614358640466.901,"size":614803},{"id":"7453515aec4613475eef71e6f9ff0439860d286a6d8c263f3bfae45d262fd29e317cd8e80f694e6bd579c3f7b992dcd920a9f3c888ec5a4e78a704d50a4526e9","href":"https://static.observableusercontent.com/files/7453515aec4613475eef71e6f9ff0439860d286a6d8c263f3bfae45d262fd29e317cd8e80f694e6bd579c3f7b992dcd920a9f3c888ec5a4e78a704d50a4526e9","name":"greenling.png","type":"image/png","lastModified":1614358090269.908,"size":581485}] 30:{"id":"73c68590a6b8ba4c","slug":null,"title":"Location based view","thumbnail":"c42ab175783e42617238dbcf492a583b16ea475a4cfc7f527e4f65b30c1ad89e","access_level":"unlisted","create_time":"$D2020-09-29T20:16:55.426Z","update_time":"$D2021-05-18T15:47:17.561Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"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"},"version":1917,"publish_version":1917,"role":null,"authored":false,"authors":[{"type":"individual","id":"a9239813cf88562c","login":"mbrownshoes","name":"Mathew Brown","avatar_url":"https://avatars-next.observableusercontent.com/8d851e9b2c3656a745ef857c9e2881c47c470e8b59db24ca69b232a2554196fc","tier":null}],"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":2,"collection":null,"type":"notebook","body":{"title":"Location based view","cells":[{"id":0,"value":"t = md`# Location based view \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1397,"value":"md`\nTODO\n- Gray out group photos with no occurances at site\n- ~~Only allow selecting one photo at a time~~\n- Group names should all be capitalized\n- ~~need photos for new groups (greenlings)~~\n- responsive layout for map, images and graph\n\n- Work on geographic view\n - does layout still work with actual data?\n\n- Data flow\n - store right in repo?\n - how often will data be updated?\n\n\n\n\n\nNotes\n- previews used this- https://observablehq.com/@ananya-roy/spot-it-mineral-cup-edition\n- thumbnails used this- https://observablehq.com/@makio135/thumbnail-generator\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"title = md`\n**${type}** observed at **${selectedSite}**\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"allSites = bcSiteLocs.map(d => d.site)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"selectedSite","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"viewof selectedSite = Select(allSites, {\n value: allSites[0],\n label: \"Selected site\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1844,"value":"createBaseMap = () => {\n // const svg = d3\n // .create(\"svg\")\n // .attr(\"viewBox\", `0 0 ${width} ${height}`)\n // .style(\"width\", \"width\")\n // .style(\"height\", \"auto\")\n // .style(\"background-color\", \"aliceblue\");\n const width = 500;\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"svg\")\n .selectAll(\"path\")\n .data(\n topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng).features\n )\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"fill\", \"#e4e2e2\")\n .attr(\"id\", \"map-layers\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1839,"value":"projection = d3\n .geoAlbers()\n .rotate([126, 0])\n .center([0, 50.3])\n // .parallels([50, 60.5])\n .scale(10500)\n .translate([960 / 2.5, 600 / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1631,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"share = chart2([type])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"test = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"len = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1723,"value":"{\n if (test === true) return chart2([\"Salmon\"]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1639,"value":"type","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof cc = barz()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"grid_width = width >= maxWidth ? maxWidth : 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"mutable type = \"Salmon\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"fishWithPics","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"md`\n\n\n# Geographic range view\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"md`\nSelect a fish type you want to see\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"// viewof fishSelect = previews(fishWithPics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"viewof rects = previews(fishWithPics)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"fishWithPics[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"function previews(mins) {\n return html`

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

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"html = (await require(\"htl@0.2\")).html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"// im1 = FileAttachment(\"untitled (9).png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"maxWidth = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"grid = gridding(list)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"list = {\n return Array.from({ length: images.length }, (d, i) => ({\n img: images[i % images.length].src,\n id: DOM.uid(),\n species: text[i].species\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"Array.from({ length: 2 }, (d, i) => i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"// images[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"// images[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"text = [\n { species: \"All\" },\n { species: \"Sculpins\" },\n { species: \"Rock fish\" },\n { species: \"Flatfish\" },\n { species: \"Forage fish\" },\n { species: \"Cartilaginous fishes\" },\n\n { species: \"Salmon\" },\n { species: \"Greenlings\" },\n { species: 'Blenny fish' },\n { species: 'Cod' },\n { species: 'Perches' },\n { species: \"Other\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"gridding = d3\n .gridding()\n .mode('grid')\n .size([grid_width, img_height])\n .offset([0, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"img_height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"images = [\n ...(await preload([\n await FileAttachment(\"all_fish.png\").url(),\n await FileAttachment(\"untitled (11).png\").url(),\n await FileAttachment(\"untitled (9)@1.png\").url(),\n await FileAttachment(\"flatfish.png\").url(),\n await FileAttachment(\"GOPR4083.00.jpg\").url(),\n await FileAttachment(\"untitled (10).png\").url(),\n\n await FileAttachment(\"untitled (7).png\").url(),\n await FileAttachment(\"greenling.png\").url(),\n await FileAttachment(\"blenny.png\").url(),\n await FileAttachment(\"cod.png\").url(),\n await FileAttachment(\"perche.jpg\").url(),\n await FileAttachment(\"untitled (12).png\").url()\n ])).values()\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":521,"value":"// mutable selectedSite = \"Victoria\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"selectedSite","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"import { preload } from '@severo/preload-a-list-of-images'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"interval = d3.timeMonth.every(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"Allspecies = [\n ...new Set(\n heatData.filter(d => [\"Ammodytidae\"].includes(d.family)).map(d => d.species)\n )\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"heatData.filter(d => d.count > 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"mutable debug = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"heatData.filter(d => d.family === 'Clupeidae')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"sp = [\"Pacific herring\", \"Pacific sardine\", \"Twait shad\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"heatData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"heatData.filter(d => d.group === \"Salmon\" && d.species === \"Pink salmon\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"dataRolled[0].date","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"d3.timeMonth.ceil(+d3.max(dataRolled, d => d.date) + 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"d3.max(dataRolled, d => d.monthly)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"d3.timeMonth.ceil(+d3.max(dataRolled, d => d.monthly))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"d3.max(chartData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"d3.min(dataRolled, d => d.monthly)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"monthlySpeciesCount","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"monthlySpeciesCount","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"monthlySpeciesCount[monthlySpeciesCount.length - 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"monthlySpeciesCount","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"speciesCountbyMonth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"maxSpeciesPerMonth = d3.max(\n Array.from(speciesCountbyMonth, ([key, values]) => {\n return values;\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"speciesCountbyMonth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"monthlySpeciesCount = Array.from(speciesCountbyMonth, ([key, values]) => {\n return {\n date: new Date(key),\n // datestr: key,\n value: values\n };\n}).sort((a, b) => a.date - b.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"d3.max(dataRolled, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"speciesCountbyMonth = 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","output":"$undefined","database":"$undefined"},{"id":1217,"value":"dataRolled[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"cc.range[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"cc.range[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"uniqDates = [...new Set(dataRolled.map(d => +d.date))].map(d => new Date(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"filledHeat = {\n let out = _.cloneDeep(heatData);\n\n uniqDates.forEach(d => {\n if (!heatData.map(d => +d.date).includes(d))\n out.push({ date: new Date(d), total: -999 });\n // : out.push();\n });\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"// filledHeat[200]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"heatData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"heatData.map(d => +d.date).includes(uniqDates[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"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.site === selectedSite\n );\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"cc.range[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"dataRolled","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"2018 - 12 - 19","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"// joinedData.filter(d => d.site === selectedSite)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"// fakeData = {\n// let out = _.cloneDeep(chartData);\n// let a = _.cloneDeep(chartData);\n// a.forEach(d => {\n// Number(d.monthly) === Number(d3.timeMonth.ceil(new Date(\"2019-07-01\")))\n// ? (d.monthly = d3.timeMonth.ceil(new Date(\"2019-01-01\")))\n// : d.monthly,\n// Number(d.monthly) === Number(d3.timeMonth.ceil(new Date(\"2019-08-01\")))\n// ? (d.monthly = d3.timeMonth.ceil(new Date(\"2019-04-01\")))\n// : d.monthly,\n// d.mmyy === \"07/2019\"\n// ? (d.mmyy = \"01/2019\")\n// : d.mmyy === \"08/2019\"\n// ? (d.mmyy = \"03/2019\")\n// : (d.mmyy = \"04/2019\");\n// d.mm === \"07\"\n// ? (d.mm = \"01\")\n// : d.mm === \"08\"\n// ? (d.mm = \"03\")\n// : (d.mm = \"04\");\n// out.push(d);\n// });\n// return out.sort((a, b) => Number(a.mm) - Number(b.mm));\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"// chartData = dataCleaned.filter(d => d.site === selectedSite)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"chartData = dataRolled.filter(d => d.site === selectedSite && d.group === type)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"// realData = d3.csvParse(\n// await FileAttachment(\"ICO_Fish_nano_for_MatB.csv\").text(),\n// d3.autoType\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":235,"value":"uniqMonths = [\n ...new Set(\n dataRolled.map(d =>\n d.date.toLocaleString(\"en\", {\n month: \"2-digit\",\n year: 'numeric'\n })\n )\n )\n].sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":390,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"dataRolled = filled","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"bcSiteLocs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import { bcSiteLocs, filled } from 'a918fce3c1f416e8'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"states = topojson.feature(us, us.objects.states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"BC_Midres = FileAttachment(\"BC_Midres_latlngTOPO (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"us = FileAttachment(\"states.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"import { Select } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"// d3Tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"