43:["$","title",null,{"children":"Ocean Acidification Data Viewer | Mathew Brown | Observable"}] 4b: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" }); }4c:[] 47:{"id":"3feb536be9946f8f","slug":"ocean-acidification-data-viewer","title":"Ocean Acidification Data Viewer","thumbnail":"528f06272c4c66c31458d8efcf1cb2977cfda41af7ac19fa1240c772353e5ba9","access_level":"public","create_time":"$D2019-03-05T19:55:14.867Z","update_time":"$D2022-04-06T15:53:01.299Z","view_time":null,"first_public_time":"$D2020-03-23T20:21:15.929Z","has_unpublished_edits":null,"fork":true,"stars":1,"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","followed_by_you":false,"follows_you":false},"version":3941,"publish_version":3941,"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","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a9239813cf88562c","login":"mbrownshoes","name":"Mathew Brown","avatar_url":"https://avatars-next.observableusercontent.com/8d851e9b2c3656a745ef857c9e2881c47c470e8b59db24ca69b232a2554196fc","tier":null,"role":"editor"}],"comments":[{"id":"1c694bbc738358df","reply_to_id":null,"content":"Thank you @mrbrownshies for this delightful notebook! Observable newly added a feature to revise URL slugs. May I suggest that you do so? I am making a list of cool notebooks and noticed this one reads 'untitled'.","create_time":"$D2021-03-17T12:41:20.845Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"8be8518072bdfd2c","reply_to_id":"1c694bbc738358df","content":"Thanks! Great idea. Just made the change. cheers","create_time":"$D2021-03-17T14:50:45.207Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a9239813cf88562c","login":"mbrownshoes","name":"Mathew Brown","avatar_url":"https://avatars-next.observableusercontent.com/8d851e9b2c3656a745ef857c9e2881c47c470e8b59db24ca69b232a2554196fc","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ocean Acidification Data Viewer","cells":[{"id":2066,"value":"md`# Ocean Acidification Data Viewer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3333,"value":"md`\n

${map}

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3176,"value":"md`---\n\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3865,"value":"mutable title = {\n map;\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3404,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3703,"value":"IsoParse = d3.utcParse(\"%Y-%m-%dT%H:%M:%S%Z\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2362,"value":"cellB.embed(allfigs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"margin = ({ top: 30, right: 0, bottom: 0, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"widthB = cellB.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2392,"value":"heightB = cellB.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"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":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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2294,"value":"cellA = new Cell(grid.querySelector(\"[name=a]\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2345,"value":"cellA.embed(viewof map)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2295,"value":"cellB = new Cell(grid.querySelector(\"[name=b]\")) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2640,"value":"cellC = new Cell(grid.querySelector(\"[name=c]\")) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"import {getPic, nasa} from '@asg017/inverted-nasa-photos'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"import {allfigs} with {erData as byVar} from '@mbrownshoes/reusable-charts-line'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 42:null