2b:null 2c:["$","title",null,{"children":"Storm overflows on The River Tyne | Simon Barnfield | Observable"}] 31:Te4f,viewof chart = { const svg = d3.create("svg") .attr("viewBox", [-5, -5, widthgeo+10, heightgeo+10]) .property("value", []); const g = svg.append("g"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden"); const zoom = d3.zoom() .scaleExtent([1, 6]) .translateExtent([[0, 0], [widthgeo, heightgeo]]) .extent([[0, 0], [widthgeo, heightgeo]]) .on("zoom", zoomed); const image = g.append("g") .attr("pointer-events", "none") .selectAll("image"); const tiles = tile(); image.data(tiles, d => d).join("image") .attr("xlink:href", d => url(...d)) .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale) .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale) .attr("width", tiles.scale) .attr("opacity", 0.85) .attr("height", tiles.scale); g.append("path") .datum(tyne) .attr("class", "lowerpath") .attr("fill", "none") .attr("stroke", "teal") .attr("stroke-width", 2.4) .attr("stroke-opacity", 1) .attr("d", path); g.append("path") .datum(tyne) .attr("class", "upperpath") .attr("fill", "none") .attr("stroke", "#98CCD9") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1) .attr("d", path); const markers = g.append("g") .attr("fill-opacity", 0.9) .attr("stroke", "#d95000") .attr("stroke-width", 1.25) .attr("stroke-opacity", 0) .selectAll("circle") .data(tynePoints.features) .join("circle") .attr("r", 4.5) .attr("transform", d => `translate(${projection(d.geometry.coordinates)})`) if (selection.length>0) { markers.attr("fill", d => overflows.indexOf(d.properties.sitecode)>=0 ? "#d95000" : "none") markers.attr("visibility", d => overflows.indexOf(d.properties.sitecode)>=0 ? "visible" : "hidden") } else { markers.attr("fill", "none") markers.attr("visibility","hidden") } markers.on("mouseover", function(e, d){ const hoverValue = [d.properties.sitecode]; d3.select(this).attr("fill-opacity", 1).attr("stroke-opacity", 1) tooltip.style("visibility", "visible") .style("top", (e.pageY)+"px") .style("left",(e.pageX)+"px") .html(`Site: ${d.properties.sitename}
\ Spills: ${d.properties.spills}
\ Duration: ${d3.format(".0f")(d.properties.duration)}
\ Distance from sea: ${d3.format(".1f")(d.properties.distance/1600)} miles `); svg.property("value", hoverValue).dispatch("input"); }) markers.on("mousemove", function(e, d){ tooltip.style("top", (e.pageY-10)+"px") .style("left",(e.pageX+20)+"px") .style("visibility", "visible"); }) markers.on("mouseout", function(){ d3.select(this).attr("fill-opacity", 0.8).attr("stroke-opacity", 0) tooltip.style("visibility", "hidden"); }); svg.call(zoom); function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.selectAll("circle") .attr("r", 4.5/transform.k) .attr("stroke-width", 1.25/Math.sqrt(transform.k)); g.selectAll(".lowerpath") .attr("stroke-width", 2.4/Math.sqrt(transform.k)); g.selectAll(".upperpath") .attr("stroke-width", 1.5/Math.sqrt(transform.k)); } return svg.node(); }32:T7b9,viewof selection = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []); const brush = d3.brush() .extent([[margin.left-5, 15], [width, height - margin.bottom + 20]]) .on("brush", brushed) .on("end", brushended); const brushwidth = x.range()[1]/40; const defaultSelection = [[x(d3.max(tyneOverflows, d => d.distance/1600))-5,15], [x(d3.min(tyneOverflows, d => d.distance/1600))+20, 98]]; svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const dot = svg.append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .selectAll("circle") .data(tyneOverflows) .join("circle") .attr("transform", d => metric == "Spills" ? `translate(${x(d.distance/1600)},${y(d.spills)})` : `translate(${x(d.distance/1600)},${y(d.duration)})`) .attr("r", 6); const gb = svg.append("g") .call(brush) .call(brush.move, defaultSelection); gb.select(".selection") .attr("fill", "#acc8cc") function brushed({selection}) { let value = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("stroke", "steelblue") .style("stroke-width", 1.5) .style("fill", "steelblue") .filter(d => metric == "Spills" ? x0 <= x(d.distance/1600) && x(d.distance/1600) < x1 && y0 <= y(d.spills) && y(d.spills) < y1 : x0 <= x(d.distance/1600) && x(d.distance/1600) < x1 && y0 <= y(d.duration) && y(d.duration) < y1) .style("stroke", "#d95000") .style("fill", "#d95000") .style("stroke-width", 2.5) .data(); } else { dot.style("stroke", "#d95000") .style("stroke-width", 2.5); } svg.property("value", value).dispatch("input"); } function brushended({selection}) { if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }33:[{"id":"5b8714fe9afadb2c249c0828ed1a784a4f1a60c778c547afadeefd6a242f9cc3332698fd4dab219474df46c39224cab9080ee7641428169d6c15967206d6d5ab","href":"https://static.observableusercontent.com/files/5b8714fe9afadb2c249c0828ed1a784a4f1a60c778c547afadeefd6a242f9cc3332698fd4dab219474df46c39224cab9080ee7641428169d6c15967206d6d5ab","name":"tyne-points.json","type":"application/json","lastModified":1654874417894.462,"size":105478},{"id":"885d38fa9d7b25736a0d5c963fd2a6f997e546137042bbaca0cfb2b3129f623541cf0c8c1f9eac5eec46bc4d61c781796d92a655a2572f205c16b4bb3a669c45","href":"https://static.observableusercontent.com/files/885d38fa9d7b25736a0d5c963fd2a6f997e546137042bbaca0cfb2b3129f623541cf0c8c1f9eac5eec46bc4d61c781796d92a655a2572f205c16b4bb3a669c45","name":"tyne.json","type":"application/json","lastModified":1654873640970.946,"size":894499},{"id":"59152df3eab00b9df457bc96213554c97f1da5aeb5c3ea9209708804ff3ebcfc2d5f9a70dc5a3b55ca9133781d57474f340c7811a83ab71a26262f401259bbee","href":"https://static.observableusercontent.com/files/59152df3eab00b9df457bc96213554c97f1da5aeb5c3ea9209708804ff3ebcfc2d5f9a70dc5a3b55ca9133781d57474f340c7811a83ab71a26262f401259bbee","name":"tyne-overflows.csv","type":"text/csv","lastModified":1654874430983.927,"size":25236}] 2f:{"id":"e6bafa4da7941f46","slug":"storm-overflows-on-the-river-tyne","title":"Storm overflows on The River Tyne","thumbnail":"1df57a440a7611ffb01bd92152e111a2ace393e9c171a396a67157c7cea3f264","access_level":"public","create_time":"$D2022-06-03T18:53:09.027Z","update_time":"$D2022-09-18T18:43:43.104Z","view_time":null,"first_public_time":"$D2022-06-11T14:54:59.208Z","fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"c017f5cda98e7944","login":"simonbarnfield","name":"Simon Barnfield","avatar_url":"https://avatars-next.observableusercontent.com/fa6ba6a006af0075892aaa4489fa7284f40a621fc2d4d72794117d7914168c4b","tier":"starter_2024"},"version":1088,"publish_version":1088,"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":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Storm overflows on The River Tyne","cells":[{"id":0,"value":"# Storm overflows on The River Tyne","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":959,"value":"### (including tributaries)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":956,"value":"This notebook contains a visualisation of the storm overflows performance data for The River Tyne, including tributaries, for 2021.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1014,"value":"This data was provided to the Environment Agency by Northumbrian Water - the water and sewerage company responsible for this area. It can downloaded from https://environment.data.gov.uk/dataset/21e15f12-0df8-4bfc-b763-45226c16a8ac","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1064,"value":"The river geojson data was derived from the Ordnance Survey Open Rivers dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"The scatterplot is brushable and this filters the sites shown on the map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1076,"value":"viewof metric = Inputs.radio([\"Duration\", \"Spills\"], {label: \"Metric\", value: \"Duration\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1062,"value":"## Key","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1069,"value":"- Spills - count of spills using the 12-24 hour counting method (see EA data for further information) in 2021\n- Duration - total hours of discharge in 2021\n- Distance from sea - the distance along the river from the outlet point at sea. In this instance the outlet point is the end of the linestring in the Open Rivers data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":987,"value":"## Attribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":989,"value":"Contains OS data © Crown copyright and database right 2022","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":993,"value":"© Environment Agency copyright and/or database right 2022. All rights reserved.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":985,"value":"© Mapbox © OpenStreetMap Improve this map","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":952,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":48,"value":"selection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"overflows = selection.map(({ sitecode }) => sitecode)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":702,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"tyne = FileAttachment(\"tyne.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":963,"value":"tynePoints = FileAttachment(\"tyne-points.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":965,"value":"tyneOverflows = FileAttachment(\"tyne-overflows.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"x = d3.scaleLinear()\n .domain([d3.max(tyneOverflows, d => d.distance/1600),0])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"y = d3.scaleLinear()\n .domain(d3.extent(tyneOverflows, d => metric == \"Spills\" ? d.spills : d.duration)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(tyneOverflows, d => d.duration/d.spills)).nice()\n .range([4, 18])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"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(\"← Distance from sea (miles)\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"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(`↑ ${metric}`))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"projection = d3.geoMercator()\n .reflectY(false)\n .fitSize([widthgeo,heightgeo], tyne)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":793,"value":"url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}?access_token=pk.eyJ1Ijoic2ltb25iYXJuZmllbGQiLCJhIjoiY2tiMHB5ZTY3MGFpaTJ5bWVzb3h4dDJwaCJ9.4ZJ8DggsecJ1w4s8nury8Q`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":789,"value":"tile = d3.tile()\n .size([widthgeo, heightgeo])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n .tileSize(256)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"margin = ({top: 30, right: 30, bottom: 35, left: 45})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"mapmargin = ({top: 5, right: 0, bottom: 5, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"height = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"width = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"heightgeo = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"widthgeo = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"