2b:null 2c:["$","title",null,{"children":"Tidal readings for North Shields | Simon Barnfield | Observable"}] 31:T619,viewof chart = { const svg = d3.create("svg") .attr("width", width/2) .attr("height", height) .property("value", []) .on("pointermove", pointerMove); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("path") .datum(tidalData.items) .attr("fill", "none") .attr("stroke", "teal") .attr("stroke-width", 2.4) .attr("stroke-opacity", 1) .attr("d", line); const xRule = svg.append("g"); xRule.append("line") .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "black") .attr("stroke-dasharray", "3"); const yRule = svg.append("g"); yRule.append("line") .attr("x1", margin.left) .attr("x2", width/2 - margin.right) .attr("stroke", "black") .attr("stroke-dasharray", "3"); const marker = svg.append("g"); marker.append("circle") .attr("r", 4) .attr("fill", "#d95000"); function updateObjects(pointerX) { const date = dates[d3.bisectCenter(dates, pointerX)]; const reading = readings[d3.bisectCenter(dates, pointerX)]; xRule.attr("transform", `translate(${x(date)},0)`); yRule.attr("transform", `translate(0,${y(reading)})`); marker.attr("transform", `translate(${x(date)},${y(reading)})`); svg.property("value", [date,reading]).dispatch("input"); } function pointerMove(event) { const pointerX = x.invert(d3.pointer(event)[0]); updateObjects(pointerX); } updateObjects(x.invert(d3.max(dates))); return svg.node(); }32:T48a,above = { const svg = d3.create("svg") .attr("width", width/2.5) .attr("height", heightmap); svg.append('image') .attr("href", beach) .attr('preserveAspectRatio', 'xMidYMin meet') .attr('width', width/2.5) .attr('height', heightmap) .attr('x', 140) .attr('y', 0) .attr("transform", `translate(-97,0)`); svg.append("path") .attr("fill", "teal") .attr("stroke", "teal") .attr("stroke-width", 0) .attr("stroke-opacity", 0.7) .attr("opacity", 0.7) .attr("transform", `translate(${tidePosition},0)`) .attr("d", waveline); svg.append("rect") .attr("width", 300) .attr("height", heightmap) .attr("fill", "teal") .attr("opacity", 0.7) .attr("stroke-width", 0) .attr("stroke", "teal") .attr("stroke-opacity", 0.7) .attr("transform", `translate(${tidePosition},0)`); svg.append('image') .attr("href", coast) .attr('preserveAspectRatio', 'xMidYMin meet') .attr('width', width/2.5) .attr('height', heightmap) .attr('x', 0) .attr('y', 0) .attr("transform", `translate(-50,0)`); return svg.node(); }33:[{"id":"51db6a4d174c3409a666d44b79bbaed60336d567a41e579b946072eafe38dd72922821e7bf2388fd4478f1f630101d5ffcf52b789583b9efa52120eb5c9115af","href":"https://static.observableusercontent.com/files/51db6a4d174c3409a666d44b79bbaed60336d567a41e579b946072eafe38dd72922821e7bf2388fd4478f1f630101d5ffcf52b789583b9efa52120eb5c9115af","name":"fishing-boat-2.png","type":"image/png","lastModified":1657009410856.228,"size":1357},{"id":"7f5ee39de3d3d6fe7a1a9531f49012a3145040149d92adafd1fac86e9875cfb27b006087627712145025970635921e56a077cfe3e01b04d0bcb3800fd8463cda","href":"https://static.observableusercontent.com/files/7f5ee39de3d3d6fe7a1a9531f49012a3145040149d92adafd1fac86e9875cfb27b006087627712145025970635921e56a077cfe3e01b04d0bcb3800fd8463cda","name":"beach5.png","type":"image/png","lastModified":1656593025130.28,"size":52574},{"id":"64d396119859f12995f7e2c040351a4e971bca96351237939391aa0010d422716d97e85d745011808a353564eb1b03ec8f40ef000c9c61c598e63ff81e69cdc6","href":"https://static.observableusercontent.com/files/64d396119859f12995f7e2c040351a4e971bca96351237939391aa0010d422716d97e85d745011808a353564eb1b03ec8f40ef000c9c61c598e63ff81e69cdc6","name":"coast5.png","type":"image/png","lastModified":1656593025268.311,"size":189002}] 2f:{"id":"69c4750292cd5010","slug":"tidal-readings-for-north-shields","title":"Tidal readings for North Shields","thumbnail":"4e78507717116793c69442e1022d4363b8c7293edcefe23d90a9eeccbe2a926e","access_level":"public","create_time":"$D2022-06-17T12:45:12.309Z","update_time":"$D2022-07-05T09:11:14.638Z","view_time":null,"first_public_time":"$D2022-07-05T09:14:34.788Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"c017f5cda98e7944","login":"simonbarnfield","name":"Simon Barnfield","avatar_url":"https://avatars-next.observableusercontent.com/fa6ba6a006af0075892aaa4489fa7284f40a621fc2d4d72794117d7914168c4b","tier":"starter_2024"},"version":696,"publish_version":696,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1916020b4abef15","login":"simonbarnfield","name":"Simon Barnfield","avatar_url":"https://avatars-next.observableusercontent.com/fa6ba6a006af0075892aaa4489fa7284f40a621fc2d4d72794117d7914168c4b","tier":null}],"members":[{"type":"individual","id":"e1916020b4abef15","login":"simonbarnfield","name":"Simon Barnfield","avatar_url":"https://avatars-next.observableusercontent.com/fa6ba6a006af0075892aaa4489fa7284f40a621fc2d4d72794117d7914168c4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Tidal readings for North Shields","cells":[{"id":0,"value":"# Tidal readings for North Shields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":626,"value":"The tide was ${d3.format(\".2f\")(chart[1])}m above local chart datum on ${formatTime(chart[0])} UTC","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":544,"value":"html`

${above}

${viewof chart}

${side}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"

The tidal data is from the UK National Tide Gauge Network, owned and operated by the Environment Agency.

The map was produced using OS Open Zoomstack.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":640,"value":"## Attribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":663,"value":"Contains OS data © Crown copyright and database right 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":665,"value":"© Environment Agency copyright and/or database right 2022. All rights reserved.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":669,"value":"Fishing-boat icon created by Freepik - Flaticon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":642,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":46,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"side = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width/2)\n .attr(\"height\", height)\n .property(\"value\", []);\n\n //svg.append(\"g\")\n //.call(xhAxis);\n\n svg.append(\"g\")\n .call(yhAxis);\n\n svg.append('image')\n .attr(\"href\", boat)\n .attr('preserveAspectRatio', 'xMidYMin meet')\n .attr('x', 200)\n .attr('y', yh(chart[1]))\n .attr(\"transform\", `translate(0,-50)`);\n\n svg.append(\"path\")\n .datum(seaData)\n .attr(\"fill\", \"teal\")\n .attr(\"opacity\", 0.6)\n .attr(\"stroke\", \"teal\")\n .attr(\"stroke-width\", 2.4)\n .attr(\"stroke-opacity\", 1)\n .attr(\"d\", sealine);\n\n svg.append(\"path\")\n .datum(harbourData)\n .attr(\"fill\", \"#bfa38c\")\n .attr(\"opacity\", 1)\n .attr(\"stroke\", \"#ad886b\")\n .attr(\"stroke-width\", 2.4)\n .attr(\"stroke-opacity\", 1)\n .attr(\"d\", area);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"formatTime = d3.utcFormat(\"%H:%M %a %b %d %Y\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"tidePosition = 195 - ((chart[1] - 1.1) * 3.78)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":638,"value":"boat = FileAttachment(\"fishing-boat-2.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"coast = FileAttachment(\"coast5.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"beach = FileAttachment(\"beach5.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"url = \"https://environment.data.gov.uk/flood-monitoring/id/stations/E70924/readings.json?_limit=200&_sorted\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"tidalData = (await fetch(url)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"dates = tidalData.items.sort(sortByProperty(\"dateTime\")).map(({ dateTime }) => new Date(dateTime))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"readings = tidalData.items.sort(sortByProperty(\"dateTime\")).map(({ value }) => value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"harbourData = [{x: 0, y: 8},{x: 10, y: 8},{x: 12, y: 6.5},{x: 15, y: 6.3},{x: 17, y: 5.3},{x: 20, y: 5.1},{x: 24, y: 2},{x: 30, y: 1},{x: 32, y: 0.5},{x: 60, y: 0.7},{x: 70, y: 0.5},{x: 80, y: 0.7},{x: 100, y: 0.5}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"seaData = [{x: 0, y: chart[1]},{x: 100, y: chart[1]}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"wave = Array.from( {length: heightmap}, (_, i) => [2 * Math.sin((i/20) * Math.PI), i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"waveline = d3.area()(wave);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"sealine = d3.area()\n .x(d => xh(d.x))\n .y1(d => yh(d.y))\n .curve(d3.curveNatural)\n .y0(yh(0));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"line = d3.line()\n .x(d => x(new Date(d.dateTime)))\n .y(d => y(d.value))\n .curve(d3.curveNatural)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(tidalData.items, d => d.value)+1])\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"x = d3.scaleUtc()\n .domain([new Date(d3.min(tidalData.items, d => d.dateTime)), new Date(d3.max(tidalData.items, d => d.dateTime))])\n .range([margin.left, width/2 - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"y2\", margin.top + margin.bottom - height)\n .attr(\"stroke-opacity\", 0.1))\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 2)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"→ x\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 50))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width - margin.left - margin.right)\n .attr(\"stroke-opacity\", 0.1))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -margin.left)\n .attr(\"y\", -20)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"↑ metres\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"area = d3.area()\n .x(d => xh(d.x))\n .y1(d => yh(d.y))\n .curve(d3.curveNatural)\n .y0(yh(0));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"yh = d3.scaleLinear()\n .domain([0, d3.max(harbourData, d => d.y)+2])\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"xh = d3.scaleLinear()\n .domain([0, d3.max(harbourData, d => d.x)])\n .range([margin.left, width/2 - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"xhAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xh))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"y2\", margin.top + margin.bottom - height)\n .attr(\"stroke-opacity\", 0))\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 2)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"yhAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yh).ticks(height / 50))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width - margin.left - margin.right)\n .attr(\"stroke-opacity\", 0.1))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -margin.left)\n .attr(\"y\", -20)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"height = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"heightmap = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"chartwidth = width/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"chartheight = height/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"function sortByProperty(property){ \n return function(a,b){ \n if(a[property] > b[property]) \n return 1; \n else if(a[property] < b[property]) \n return -1; \n \n return 0; \n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"