29:null 2a:["$","title",null,{"children":"Tide chart | Joey Pereira | Observable"}] 2f: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(); }30:[{"id":"51db6a4d174c3409a666d44b79bbaed60336d567a41e579b946072eafe38dd72922821e7bf2388fd4478f1f630101d5ffcf52b789583b9efa52120eb5c9115af","href":"https://static.observableusercontent.com/files/51db6a4d174c3409a666d44b79bbaed60336d567a41e579b946072eafe38dd72922821e7bf2388fd4478f1f630101d5ffcf52b789583b9efa52120eb5c9115af","name":"fishing-boat-2.png","type":"image/png","lastModified":1729553250007.052,"size":1357},{"id":"64d396119859f12995f7e2c040351a4e971bca96351237939391aa0010d422716d97e85d745011808a353564eb1b03ec8f40ef000c9c61c598e63ff81e69cdc6","href":"https://static.observableusercontent.com/files/64d396119859f12995f7e2c040351a4e971bca96351237939391aa0010d422716d97e85d745011808a353564eb1b03ec8f40ef000c9c61c598e63ff81e69cdc6","name":"coast5.png","type":"image/png","lastModified":1729553250007.052,"size":189002},{"id":"7f5ee39de3d3d6fe7a1a9531f49012a3145040149d92adafd1fac86e9875cfb27b006087627712145025970635921e56a077cfe3e01b04d0bcb3800fd8463cda","href":"https://static.observableusercontent.com/files/7f5ee39de3d3d6fe7a1a9531f49012a3145040149d92adafd1fac86e9875cfb27b006087627712145025970635921e56a077cfe3e01b04d0bcb3800fd8463cda","name":"beach5.png","type":"image/png","lastModified":1729553250007.052,"size":52574}] 2d:{"id":"55196f215c895f54","slug":null,"title":"Tide chart","thumbnail":"a117c1d8cccd4c881229a40acab660b9b18aeda430f8bd05092bf17df2d733b7","access_level":"public","create_time":"$D2024-10-21T23:27:30.007Z","update_time":"$D2024-10-21T23:34:36.281Z","view_time":null,"first_public_time":"$D2024-10-21T23:27:30.007Z","fork":{"id":"69c4750292cd5010","slug":"tidal-readings-for-north-shields","title":"Tidal readings for North Shields","owner":{"id":"c017f5cda98e7944","login":"simonbarnfield","name":"Simon Barnfield"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7dedaf5fe405533a","login":"lgo","name":"Joey Pereira","avatar_url":"https://avatars-next.observableusercontent.com/1986f89017257e22863f4dd00374701e9cdae597f3197f4fe29b9e8966069e48","tier":"starter_2024"},"version":764,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0d5136b3dcb97857","login":"lgo","name":"Joey Pereira","avatar_url":"https://avatars-next.observableusercontent.com/1986f89017257e22863f4dd00374701e9cdae597f3197f4fe29b9e8966069e48","tier":null}],"members":[{"type":"individual","id":"0d5136b3dcb97857","login":"lgo","name":"Joey Pereira","avatar_url":"https://avatars-next.observableusercontent.com/1986f89017257e22863f4dd00374701e9cdae597f3197f4fe29b9e8966069e48","tier":null,"role":"editor"},{"type":"team","id":"7dedaf5fe405533a","login":"lgo","name":"Joey Pereira","avatar_url":"https://avatars-next.observableusercontent.com/1986f89017257e22863f4dd00374701e9cdae597f3197f4fe29b9e8966069e48","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tide chart","cells":[{"id":0,"value":"# Tide chart","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`

${viewof chart}

`","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":"$2f","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":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":15,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 40})","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":22,"value":"height = 400","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 = 1000","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":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"