25:["$","title",null,{"children":"Flow Data By Year | Michael Schmidt | Observable"}] 4b:T598,function hover(svg, path) { svg .style("position", "relative"); if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .style("font", "10px sans-serif") .attr("text-anchor", "middle") .attr("y", -8); function moved() { d3.event.preventDefault(); const ym = y.invert(d3.event.layerY); const xm = x.invert(d3.event.layerX); const i1 = d3.bisectLeft(data.dates, xm, 1); const i0 = i1 - 1; const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0; const s = data.series.reduce((a, b) => Math.abs(a.value[i] - ym) < Math.abs(b.value[i] - ym) ? a : b); path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); dot.attr("transform", `translate(${x(data.dates[i])},${y(s.value[i])})`); dot.select("text").text(s.key); } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("stroke", null); dot.attr("display", "none"); } }4c:[] 47:{"id":"36600ad28efa0c12","slug":"flow-data-by-year","title":"Flow Data By Year","thumbnail":"a37508684c0022256455d021000affc272f66fdeddcfc00072f98c31e70117c7","access_level":"public","create_time":"$D2018-11-14T02:16:40.481Z","update_time":"$D2019-02-08T18:26:20.653Z","view_time":null,"first_public_time":"$D2018-11-18T02:01:37.887Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"c112c7275593f642","login":"mschmidty","name":"Michael Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/65fcfa5619ad8e309b26d3dd62213ca2885bcaed36bc97a43fa35888c31ce767","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":401,"publish_version":401,"role":null,"authored":false,"authors":[{"type":"individual","id":"1da43194637444cd","login":"mschmidty","name":"Michael Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/65fcfa5619ad8e309b26d3dd62213ca2885bcaed36bc97a43fa35888c31ce767","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1da43194637444cd","login":"mschmidty","name":"Michael Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/65fcfa5619ad8e309b26d3dd62213ca2885bcaed36bc97a43fa35888c31ce767","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Flow Data By Year","cells":[{"id":0,"value":"md`\n# Flow Data By Year\nThis chart uses the USGS [average flow rates API](https://waterservices.usgs.gov/rest/DV-Test-Tool.html) to look at river flows over time. I relied heavily on Mike Bostock's Example of a [multi-line chart](https://beta.observablehq.com/@mbostock/d3-multi-line-chart) to make it (the hover effects are copied from his example). \n\n### Step 1: Select a river\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"viewof riverInput = select({\n title: \"Select a river\",\n description: \"Please select a river in the dropdown.\",\n options: parseRiver,\n value: \"Colorado River\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`### Step 2 - Mouse over the chart to explore individual years\n\nYou are currently viewing the ${riverInput} \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append('text')\n .text(`Historic River Flows for the ${riverInput}`)\n .attr('transform', 'translate('+ (margin.left-45) +','+ (margin.top-20)+')')\n .attr('font-weight', 'bold')\n .attr('font-size', '25px');\n\n const path = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-opacity\", 0.2)\n .selectAll(\"path\")\n .data(data.series)\n .enter().append(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"d\", d => line(d.value))\n .attr(\"class\", d => \"year_\" + d.key );\n\n svg.call(hover, path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`\n### Step 3 - Check out how it all works\nIf you are interested in that sort of stuff.\nToDo:\n\n[ ] - Add in a key of labels\n[X] - Add in a title\n[X] - Work on the Colors. \n[X] - Figure out how to get the right timeseries values. If you use the below json 'query' it takes you to the first value in timeseries, which is streamflow for some rivers, but temperuature for others. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"margin = ({top: 70, right: 30, bottom: 30, left: 60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"x = d3.scaleTime()\n .domain(d3.extent(data.dates))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d3.max(d.value))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Flow Rate in CFS\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(data.dates[i]))\n .y(d => y(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function yearFormat(x){\n let splits = (x).split('-')\n return splits[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"today = new Date();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"function formatDate(date) {\n var d = new Date(date),\n month = '' + (d.getMonth() + 1),\n day = '' + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = '0' + month;\n if (day.length < 2) day = '0' + day;\n\n return [year, month, day].join('-');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"formatToday = formatDate(today)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = Object.assign( await fetch(`https://waterservices.usgs.gov/nwis/dv/?format=json&sites=${selectedRiver}&startDT=1900-11-01&endDT=${formatToday}&siteType=ST&siteStatus=all`)\n .then(function(response){\n return response.json();\n }).then(function(myJson){\n let timeSeries = myJson.value.timeSeries\n for(let ii=0; ii<= timeSeries.length;ii++) {\n if(timeSeries[ii].variable.variableName.includes(\"Streamflow\")){\n return timeSeries[ii].values[0].value.map(({dateTime, value})=>({year:yearFormat(dateTime), cfs:parseFloat(value)})) \n } \n }\n }).then(function(dd){\n return d3.nest()\n .key(function(ddd){ return ddd.year})\n .rollup(function(vv){return vv.map(({cfs})=>cfs)})\n .entries(dd)\n }).then(function(d){\n return {\n series:d,\n dates: getDates(new Date(1900,0,1), new Date(1900,11,31))\n }\n }\n\n )\n \n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"riverData = [\n {\n \"river\": \"Colorado River\",\n \"id\": \"09380000\"\n },\n {\n \"river\": \"Dolores River - Dolores\",\n \"id\": \"09166500\"\n },\n {\n \"river\": \"San Juan River\",\n \"id\": \"09379500\"\n },\n {\n \"river\": \"Salmon River\",\n \"id\": 13317000\n },\n {\n \"river\": \"Henry's Fork\",\n \"id\": 13042500\n },\n {\n \"river\": \"Animas River\",\n \"id\": \"09361500\"\n },\n {\n \"river\": \"Chama River\",\n \"id\": \"08285500\"\n },\n {\n \"river\": \"North Platte River\",\n \"id\": \"06620000\"\n },\n {\n \"river\": \"Dolores River - Slick Rock\",\n \"id\": \"09168730\"\n },\n {\n \"river\": \"Provo\",\n \"id\": \"10163000\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"riverIdQuery = function(x){\n for(let i = 0; i<= riverData.length; i++){\n if(riverData[i].river == x){\n return riverData[i].id\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"selectedRiver = riverIdQuery(riverInput)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"parseRiver = riverData.map(({river})=>river)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"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":173,"value":"getDates = function(startDate, endDate) {\n var dates = [],\n currentDate = startDate,\n addDays = function(days) {\n var date = new Date(this.valueOf());\n date.setDate(date.getDate() + days);\n return date;\n };\n while (currentDate <= endDate) {\n dates.push(currentDate);\n currentDate = addDays.call(currentDate, 1);\n }\n return dates;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"currentYear = today.getFullYear();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"html` \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null