31:T9ec,viewof map = { const svg = d3.select(DOM.svg(380, height)); // .style("width", "500px") // .style("height", "700"); // .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; let circ; var land = topojson.feature(bc_coastline, bc_coastline.objects.LandLowResBC); let current_circle = undefined; const projection = d3 .geoAlbers() .rotate([126, -10]) // .center([0, 30]) // .parallels([1, 62]) .fitExtent([[-400, -50], [width + 100, height]], land); // .fitSize([width/2, height], land); const path = d3.geoPath().projection(projection); var feat = topojson.feature(bc_coastline, bc_coastline.objects.LandLowResBC) .features; g.append("svg") .selectAll("path") .data(feat) .join("path") .attr("fill", "#ddd") .attr("stroke", "#777") .attr("d", path); g.append("path") .datum( topojson.mesh( bc_coastline, bc_coastline.objects.LandLowResBC, (a, b) => a !== b ) ) .attr("fill", "none") .attr("stroke", "none") .attr("stroke-linejoin", "round") .attr("d", path); g.insert("g") .selectAll("circle") .data(_.uniqBy(bollocs, ({ Lat, Lon }) => Lat + ":" + Lon)) .enter() .append("circle") .attr("r", 6) .attr("transform", function(d) { return `translate(${projection([d.Lon, d.Lat])})`; }) .attr("opacity", 0.8) .attr("fill", function(d) { return "#aa2125"; }) .on("mouseover", function() { // console.log(this); d3.select(this).attr("stroke", "#000"); }) .on("mouseout", function() { d3.select(this).attr("stroke", null); }) .on("click", function(d) { if (current_circle !== undefined) { current_circle.attr("fill", d => "#aa2125"); } current_circle = d3.select(this); console.log(current_circle); // .on("click", d => { current_circle.attr("fill", "orange"); // d3.select(this).attr("stroke", "green""); // console.log(d3.select(this)) const node = svg.node(); node.value = d.Station; console.log("here", d); node.dispatchEvent(new CustomEvent("input")); }); // current_circle return Object.assign(svg.node(), { value: "Baynes Sound Burke-o-Lator" }); }32:[] 2f:{"title":"Ocean Acidification Data Viewer","cells":[{"id":2066,"value":"md`# Ocean Acidification Data Viewer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3333,"value":"md`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3728,"value":"html`

${map}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2256,"value":"grid = html`

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3176,"value":"md`---\n\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3865,"value":"mutable title = {\n map;\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":3404,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":3565,"value":"erddapDir = [\"https://catalogue.hakai.org/erddap/tabledap/HakaiSewardBoL5min.json?latitude%2Clongitude&time%3E=2019-02-27T00%3A00%3A00Z&time%3C=2019-02-27T00%3A00%3A00Z\", \"https://catalogue.hakai.org/erddap/tabledap/HakaiKetchikanBoL5min.json?latitude%2Clongitude&time%3E=2019-02-27T00%3A00%3A00Z&time%3C=2019-02-27T00%3A00%3A00Z\",\n \"https://catalogue.hakai.org/erddap/tabledap/HakaiBaynesSoundBoL5min.json?latitude%2Clongitude&time%3E=2019-02-27T00%3A00%3A00Z&time%3C=2019-02-27T00%3A00%3A00Z\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3568,"value":"bollocs = d3.csvParse(`Station,Lat,Lon\nBaynes Sound Burke-o-Lator,49.4716,-124.7927\nSeward Burke-o-Lator,60.0992,-149.4428\nQuadra Burke-o-Lator,50.116,-125.222\nSitka Burke-o-Lator,57.0526,-135.3456\nKetchikan Burke-o-Lator,55.315,-131.5954\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3684,"value":"datasetLookup = [\n {\"Ketchikan Burke-o-Lator\":\"HakaiKetchikanBoL5min\",\n \"Quadra Burke-o-Lator\": \"HakaiQuadraBoL5min\",\n \"Baynes Sound Burke-o-Lator\": \"HakaiBaynesSoundBoL5min\",\n \"Sitka Burke-o-Lator\": \"HakaiSitkaBoL5min\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3697,"value":"erData = {\n const data = await d3.json(\n \"https://catalogue.hakai.org/erddap/tabledap/\"+datasetLookup[0][map]+\".json?time%2Clatitude%2Clongitude%2Cstation%2CpCO2_uatm_Avg%2CcalcTCO2_Avg%2CTSG_T_Avg%2CAlkS_Avg%2CcalcpH_Avg&time%3E=2019-03-01T00%3A00%3A00Z\",\n d3.autoType\n );\n const colNames = data.table.columnNames;\n\n data.table.rows.forEach(function(d, i) {\n //name keys using colNames\n colNames.forEach(function(dd, ii) {\n // console.log(d[colNames[ii]])\n d[colNames[ii]] = d[ii];\n });\n\n d.DATE_PST = IsoParse(d[0]);\n // console.log(d.DATE_PST);\n d.splice(0, 12);\n });\n let asArr = [];\n colNames.slice(4).forEach(d => {\n asArr.push(\n data.table.rows.map(k => {\n if (k[d] == undefined) {\n k[d] = null;\n }\n return {\n [d]: k[d],\n DATE_PST: k[\"DATE_PST\"]\n };\n })\n );\n });\n return asArr;\n // return data.table.rows;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3703,"value":"IsoParse = d3.utcParse(\"%Y-%m-%dT%H:%M:%S%Z\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2362,"value":"cellB.embed(allfigs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"margin = ({ top: 30, right: 0, bottom: 0, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"function zoom(s) {\n s.call(\n d3\n .zoom()\n .on(\"zoom\", () =>\n s.select(\"#map-layers\").attr(\"transform\", d3.event.transform)\n )\n .scaleExtent([1, 18])\n .translateExtent([[0, 0], [width, height]])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"bc_coastline = d3.json(\n \"https://gist.githubusercontent.com/Mbrownshoes/8de4d361ff36ae7cebdaa87777e9c254/raw/29198e2426a738a68f72dd1195dd43919000246f/BC_Alaska.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2390,"value":"widthB = cellB.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":2392,"value":"heightB = cellB.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"import {select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2338,"value":"function resizer(element, dimension = \"clientWidth\") {\n return Generators.observe(notify => {\n let width = notify(element[dimension]);\n const resized = () => {\n let w = element[dimension];\n if (w !== width) notify(width = w);\n };\n window.addEventListener(\"resize\", resized);\n return () => window.removeEventListener(\"resize\", resized);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2324,"value":"class Cell {\n constructor(element) {\n this.element = element;\n }\n get width() {\n return resizer(this.element, \"clientWidth\");\n }\n get height() {\n return resizer(this.element, \"clientHeight\");\n }\n embed(content) {\n content.style.position = \"absolute\";\n if (this.element.firstChild) this.element.replaceChild(content, this.element.firstChild);\n else this.element.appendChild(content);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2294,"value":"cellA = new Cell(grid.querySelector(\"[name=a]\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2345,"value":"cellA.embed(viewof map)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2295,"value":"cellB = new Cell(grid.querySelector(\"[name=b]\")) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2640,"value":"cellC = new Cell(grid.querySelector(\"[name=c]\")) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"import {getPic, nasa} from '@asg017/inverted-nasa-photos'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"import {allfigs} with {erData as byVar} from '@mbrownshoes/reusable-charts-line'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}