31:T8d2,viewof map = { const svg = d3 .select(DOM.svg(660, 600)) .style("width", "50%") .style("height", "auto"); // .attr("height", 400); // .call(zoom); // background // svg // .append("rect") // .attr("width", width) // .attr("height", height) // .attr("x", 0) // .attr("y", 0) // .attr("fill", "blue"); // group for all map layers const g = svg.append("g").attr("id", "map-layers"); let value = null; var land = topojson.feature(calvert, calvert.objects.calvert); const projection = d3 .geoAlbers() .rotate([126, -10]) // .center([1, 40]) // .parallels([1, 62]) .fitExtent([[0, 30], [width / 2, height]], land); // .fitSize([width/2, height], land); const path = d3.geoPath().projection(projection); var feat = topojson.feature(calvert, calvert.objects.calvert).features; // color3 g.append("svg") .selectAll("path") .data(topojson.feature(calvert, calvert.objects.calvert).features) .enter() .append("path") .attr("fill", "#bdbdbd") .attr("d", path); // g.append("path") // .datum(topojson.mesh(calvert, calvert.objects.calvert, (a, b) => a !== b)) // .attr("fill", "red") // .attr("stroke", "green") // .attr("stroke-linejoin", "round") // .attr("d", path); g.insert("g") .selectAll("circle") .data(_.uniqBy(sitelocs, ({ Lat, Lon }) => Lat + ":" + Lon)) .enter() .append("circle") .attr("r", 10) .attr("transform", function(d) { return `translate(${projection([d.Lon, d.Lat])})`; }) .attr("opacity", 0.8) .attr("fill", function(d) { return "steelblue"; }) .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); }) .on("mouseout", function() { d3.select(this).attr("stroke", null); }) .on("click", d => { const node = svg.node(); // console.log(d.ARMS_number); // node.value = value = value === d.ARMS_number ? null : d.ARMS_number; node.value = d.ARMS_number; // console.log(node); node.dispatchEvent(new CustomEvent("input")); // outline.attr("d", value ? path(d) : null); }); // return autosize(svg.node()); return Object.assign(svg.node(), { value: null }); }32:T6eb,chartB = { const svg = d3.select(DOM.svg(widthB, height)); // svg.attr("margin-top", 200); // const svg = (this ? d3.select(this) : d3.create("svg")) // .attr("width", widthB) // .attr("height", height / 2); // const svg = d3.select(DOM.svg(widthB, height / 2)); // chartData.sort(function(a, b) { // return ( // b[chartData.columns[1]] / b.total - a[chartData.columns[1]] / a.total // ); // }); // console.log(chartData); // chartData.sort(function(a, b) { // // console.log(a.month); // return b.month - a.month; // }); // svg.append("g").call(xAxis); // const tooltip = d3 // .select("body") // .append("div") // .attr("class", "tooltip") // .style("background", "#fcfcfc") // .style("position", "absolute") // .style("z-index", "10") // .style("visibility", "hidden"); var stack = d3.stack().offset(d3.stackOffsetExpand); // console.log(stack.keys(chartData.columns.slice(1))(chartData)) svg .append("g") // .attr("transform", "translate(" + 100 + "," + margin.top + ")") .selectAll("g") .data(stack.keys(chartData.columns.slice(1))(chartData)) .enter() .append("g") .attr("transform", (d, i) => `translate(0, 50)`) .attr("fill", d => { // console.log(color(d.key)); return color(d.key); }) .selectAll("rect") .data(d => d) // .enter() .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.month)) // .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) // .transition() // .delay((d, i) => i * 20) .attr("width", d => x(d[1]) - x(d[0])); // console.log(this); // if (!this) { svg.append("g").call(yAxis); return svg.node(); }33:T4f9,legend = { const svg = d3.select(DOM.svg(width, height / 2)); const legLookup ={ "Homalopoma luridum_BHAK0362": "Homalopoma luridum", "Ceratostoma foliatum_BHAK0403":"Ceratostoma foliatum", "Amphissa columbiana_BHAK0359": "Amphissa columbiana", "BHAK1012": "Melanella sp.", "BHAK2037": "Lacuna sp.", "Crepipatella dorsata_BHAK2013": "Crepipatella dorsata", "BHAK107": "Crepidula sp.", "BHAK3033": "Puncturella sp.", "Acmaea mitra_BHAK1617": "Acmaea mitra", "BHAK0861": "Odostomia sp.", "BHAK2036": "Lacuna sp.", "Nuttallia obscurata_BHAK0769": "Nuttallia obscurata", "Protothaca staminea_BHAK0226": "Leukoma staminea", "BHAK0204": "Macoma sp.", "BHAK2347": "Macoma sp." } // const svg = d3 // .select(DOM.svg(width, chartData.columns.length * 20)) svg.style("font", "10px sans-serif"); const g = svg .append("g") .selectAll("g") .data(chartData.columns.reverse()) .join("g") .attr("transform", (d, i) => `translate(${margin.left},${i * 20})`); g.append("rect") .attr("width", 19) .attr("height", 19) .attr("fill", color); g.append("text") .attr("x", 24) .attr("y", 9.5) .attr("dy", "0.35em") .text(d => legLookup[d]); return svg.node(); }34:T44e,picLookup = [{ "Homalopoma luridum_BHAK0362": "https://en.wikipedia.org/wiki/Homalopoma_luridum", "Ceratostoma foliatum_BHAK0403":"https://en.wikipedia.org/wiki/Ceratostoma_foliatum", "Amphissa columbiana_BHAK0359": "https://en.wikipedia.org/wiki/Amphissa_columbiana", "BHAK1012": "https://en.wikipedia.org/wiki/Melanella", "BHAK2037": "https://en.wikipedia.org/wiki/Lacuna_(gastropod)", "Crepipatella dorsata_BHAK2013": "https://en.wikipedia.org/wiki/Crepipatella", "BHAK107": "https://en.wikipedia.org/wiki/Crepidula", "BHAK3033": "https://en.wikipedia.org/wiki/Puncturella", "Acmaea mitra_BHAK1617": "https://en.wikipedia.org/wiki/Acmaea_mitra", "BHAK0861": "https://en.wikipedia.org/wiki/Odostomia", "BHAK2036": "https://en.wikipedia.org/wiki/Lacuna_(gastropod)", "Nuttallia obscurata_BHAK0769": "https://en.wikipedia.org/wiki/Nuttallia_obscurata", "Protothaca staminea_BHAK0226": "https://en.wikipedia.org/wiki/Leukoma_staminea", "BHAK0204": "https://en.wikipedia.org/wiki/Macoma", "BHAK2347": "https://en.wikipedia.org/wiki/Macoma" }]35:Tb12,sitelocs = d3.tsvParse(`SampleID ARMS_number BioBlitz_StationID Lat Lon Collection_month Ecology2 Site ARMS1-M-106 1 XHAK10 51.649 -128.155 August kelp Second(westbeach) ARMS1-M-500 1 XHAK10 51.649 -128.155 August kelp Second(westbeach) ARMS1-S-D 1 XHAK10 51.649 -128.155 August kelp Second(westbeach) ARMS1-S-E 1 XHAK10 51.649 -128.155 August kelp Second(westbeach) ARMS10-M-106 10 XHAK04 51.8415 -128.264 August kelp Spider ARMS10-M-500 10 XHAK04 51.8415 -128.264 August kelp Spider ARMS10-S-D 10 XHAK04 51.8415 -128.264 August kelp Spider ARMS10-S-E 10 XHAK04 51.8415 -128.264 August kelp Spider ARMS11-M-106 11 XHAK05 51.8143 -128.237 August kelp Lyte ARMS11-M-500 11 XHAK05 51.8143 -128.237 August kelp Lyte ARMS11-S-D 11 XHAK05 51.8143 -128.237 August kelp Lyte ARMS11-S-E 11 XHAK05 51.8143 -128.237 August kelp Lyte ARMS12-M-106 12 XHAK02 51.7012 -128.074 July Barren Rattenbury ARMS12-M-500 12 XHAK02 51.7012 -128.074 July Barren Rattenbury ARMS12-S-D 12 XHAK02 51.7012 -128.074 July Barren Rattenbury ARMS12-S-E 12 XHAK02 51.7012 -128.074 July Barren Rattenbury ARMS2-M-106 2 XHAK03 51.744 -128.071 July Barren Mercury ARMS2-M-500 2 XHAK03 51.744 -128.071 July Barren Mercury ARMS2-S-D 2 XHAK03 51.744 -128.071 July Barren Mercury ARMS2-S-E 2 XHAK03 51.744 -128.071 July Barren Mercury ARMS3-M-106 3 XHAK12 51.667 -128.14 August kelp Northbeach ARMS3-M-500 3 XHAK12 51.667 -128.14 August kelp Northbeach ARMS3-S-D 3 XHAK12 51.667 -128.14 August kelp Northbeach ARMS3-S-E 3 XHAK12 51.667 -128.14 August kelp Northbeach ARMS4-M-106 4 XHAK01 51.6646 -128.095 July kelp Meay ARMS4-M-500 4 XHAK01 51.6646 -128.095 July kelp Meay ARMS4-S-D 4 XHAK01 51.6646 -128.095 July kelp Meay ARMS4-S-E 4 XHAK01 51.6646 -128.095 July kelp Meay ARMS5-M-106 5 XHAK09 51.734 -127.997 August Barren Kelpie ARMS5-M-500 5 XHAK09 51.734 -127.997 August Barren Kelpie ARMS5-S-D 5 XHAK09 51.734 -127.997 August Barren Kelpie ARMS5-S-E 5 XHAK09 51.734 -127.997 August Barren Kelpie ARMS6-M-106 6 XHAK08 51.649 -128.151 August kelp Westbeach ARMS6-M-500 6 XHAK08 51.649 -128.151 August kelp Westbeach ARMS6-S-D 6 XHAK08 51.649 -128.151 August kelp Westbeach ARMS6-S-E 6 XHAK08 51.649 -128.151 August kelp Westbeach ARMS7-M-106 7 XHAK07 August Barren Goldstream ARMS7-M-500 7 XHAK07 August Barren Goldstream ARMS7-S-D 7 XHAK07 August Barren Goldstream ARMS7-S-E 7 XHAK07 August Barren Goldstream ARMS8-M-106 8 XHAK06 51.804 -128.254 August kelp Triquet ARMS8-M-500 8 XHAK06 51.804 -128.254 August kelp Triquet ARMS8-S-D 8 XHAK06 51.804 -128.254 August kelp Triquet ARMS8-S-E 8 XHAK06 51.804 -128.254 August kelp Triquet ARMS9-M-106 9 XHAK11 51.68 -128.126 August kelp Starfish ARMS9-M-500 9 XHAK11 51.68 -128.126 August kelp Starfish ARMS9-S-D 9 XHAK11 51.68 -128.126 August kelp Starfish ARMS9-S-E 9 XHAK11 51.68 -128.126 August kelp Starfish`)36:[] 2f:{"title":"ICO Data Explorer Prototype","cells":[{"id":2066,"value":"md`# ICO Data Explorer Prototype`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"md`Click a station`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2256,"value":"grid = html`

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1782,"value":"picz = html` \n\n

`auto`)\n .join(\" \")};\"> \n ${speciesPresent.map((hit, i) => {\n // console.log(hit)\n // console.log(imgLookup[hit]);\n return `

`;\n })}\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3325,"value":"md`☝🏼 Click an image for more information about this species`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2123,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3176,"value":"md`---\n\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"html`