31:T994,timechart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, heightday]); svg.append(() => style); const clipId = DOM.uid("clip"); svg.append("clipPath") .attr("id", clipId.id) .append("rect") .attr("x", marginday.left) .attr("y", 0) .attr("height", heightday) .attr("width", width - marginday.left - marginday.right); const gx = svg.append("g") gx.call(xtAxisFct, xt, heightday); svg.append('g').call(ytAxisFct, yt); svg.append('g').call(ytAxisGridFct, yt); const side = 14 const yoffset = 0 // heightday - marginday.bottom / 3 svg.append('rect') .attr('class', 'legendBar') .attr('x', width/2-60-side*1.5) .attr('y', yoffset) .attr('width', side) .attr('height', side) .attr("fill", "#95C8A2") svg.append('text') .attr('class', 'legendText') .attr('x', width/2-60) .attr('y', yoffset+side/2) .attr('dy', '0.35em') .text('daily') svg.append('line') .attr('class', 'avg-line') .attr('x1', width/2+0) .attr('x2', width/2+30) .attr('y1', yoffset+side/2) .attr('y2', yoffset+side/2) svg.append('text') .attr('class', 'legendText') .attr('x', width/2+40) .attr('y', yoffset+side/2) .attr('dy', '0.35em') .text('5-day moving average') let bars = svg.selectAll('.bars') .data(daydata) .join("rect") .attr("class", "bars pdw") .attr("x", d => xt(d3.timeHour.offset(d.date))) .attr("y", d => yt(d.pickup)) .attr("height", d => yt(0) - yt(d.pickup)) .attr("width", dayWidth * 22/24) .attr("fill", "#95C8A2") .attr("clip-path", clipId) .attr("data-tippy-content", d => createTableTooltip(d)) // .attr("data-tippy-content", d => `${d3.utcFormat('%b %e')(d.date)}: ${d.pickup} pickups
5-Day Avg: ${d.avg} pickups`) let avg = svg.append('path') .datum(daydata) .attr('class', 'avg-line') .attr('d', avgLine1) .attr('clip-path', clipId); /* clip line with rectangle */ function update(focusX) { gx.call(xtAxisFct, focusX, heightday - marginday.bottom) bars.attr('x', d => focusX(d3.timeHour.offset(d.date))) .attr('width', (focusX(d3.timeDay.offset(new Date)) - focusX(new Date)) * 22/24) avg.attr('d', d3.line().x(d => focusX(d3.timeHour.offset(d.date,12))).y(d => yt(d.avg))) } return Object.assign(svg.node(), { update }); }32:T613,viewof context = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, heightcontext]) .style("display", "block"); const brush = d3.brushX() .extent([[marginday.left, 0], [width - marginday.right, heightcontext - marginday.bottom]]) .on("brush", brushed) .on("end", brushended); const defaultSelection = dayRange.map(xt); svg.selectAll("rect") .data(daydata) .join("rect") .attr("x", d => xt(d.date)) .attr("y", d => yt2(d.pickup)) .attr("height", d => yt2(0) - yt2(d.pickup)) .attr("width", dayWidth * 22/24) .attr("fill", "#95C8A2") svg.append('path') .datum(daydata) .attr('class', 'avg-line') .attr('d', avgLine2) svg.append("g").call(xtAxisFct, xt, heightcontext - marginday.bottom); const gb = svg.append("g") .call(brush) .call(brush.move, defaultSelection); function brushed({selection}) { if (selection) { svg.property("value", selection.map(xt.invert, xt)); svg.dispatch("input"); } } function brushended(event) { const selection = event.selection; if (!selection) { gb.call(brush.move, defaultSelection) }; if (!event.sourceEvent || !selection) return; let dayRange = selection.map(d => d3.utcDay.round(xt.invert(d))); dayRange[1] = d3.timeSecond.offset(dayRange[1],-1) d3.select(this).transition().call(brush.move, dayRange.map(xt)); } function updateBrush(daterange) { d3.select(this).transition().call(brush.move, daterange) } return svg.node(); }33:T236c,riderchart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 40]); svg.append(() => style); svg.append('rect') .attr('fill', '#fff') .attr('x', 0) .attr('y', 0) .attr('width', width) .attr('height', height) svg.append("g") .attr("class", "grid") .attr("transform", `translate(0,${margin.top})`) .call(x2AxisGrid); // add subway line const linewidth = 8; svg.append('g') .attr("transform", `translate(${margin.left},${margin.top})`) .append('line') .attr('class', 'shuttle') .attr('x1', xoffset) .attr('x2', xoffset) .attr('y1', 0) .attr('y2', height - margin.bottom) .attr('stroke', '#319244') .attr('stroke-width', linewidth); // create group for each shuttle stop let rects = svg.selectAll('.shuttle-stop') .data(stationdata) .join('g') .attr('class', 'shuttle-stop') .attr("transform", `translate(0,${margin.top})`); // add elements for each shuttle stop rects.append('circle') .attr('class', 'station') .attr("transform", `translate(${margin.left},0)`) .attr('cx', xoffset) .attr('cy', d => y(d.station) + y.bandwidth() / 2) .attr('r', linewidth / 2 + 1) .attr('stroke-width', 2); rects.append('text') .attr('class', 'headway') .attr("transform", `translate(${margin.left},0)`) .attr('x', xoffset + 48) .attr('y', d => y(d.station) + y.bandwidth() / 2) .attr('dy', '0.35em') //.text(d => isNaN(d.headway) ? '' : `${Math.floor(d.headway / 60)}:${d3.format('>02')(d.headway % 60)}`); rects.append('rect') .attr('class', 'pickup pdw2') .attr('x', d => x(-d.pickup)) .attr('y', d => y(d.station)) .attr('width', d => x(d.pickup) - x(0)) .attr('height', y.bandwidth()) .attr("data-tippy-content", d => `${d.station}: ${d.pickup} pickups`) .attr('fill', colorScale('pickup')); rects.append('rect') .attr('class', 'dropoff pdw2') .attr('x', d => x(0)) .attr('y', d => y(d.station)) .attr('width', d => x(d.dropoff) - x(0)) .attr('height', y.bandwidth()) .attr("data-tippy-content", d => `${d.station}: ${d.dropoff} dropoffs`) .attr('fill', colorScale('dropoff')); rects.append('rect') .attr('class', 'waited pdw2') .attr('x', d => x2(0)) .attr('y', d => y(d.station)) .attr('width', d => x2(d.waited) - x2(0)) .attr('height', y.bandwidth()) .attr("data-tippy-content", d => `${d.station}: ${d.waited} waited`) .attr('fill', colorScale('waited')); rects.append('text') .attr('class', 'pickup-label') .attr('x', d => x(-d.pickup) - labeloffset) .attr('y', d => y(d.station) + y.bandwidth() / 2) .attr('dy', '0.35em') .attr('text-anchor', 'end') .style('font-size', '0.9em') .text(d => d.pickup); rects.append('text') .attr('class', 'dropoff-label') .attr('x', d => x(d.dropoff) + labeloffset) .attr('y', d => y(d.station) + y.bandwidth() / 2) .attr('dy', '0.35em') .attr('text-anchor', 'start') .style('font-size', '0.9em') .text(d => d.dropoff); // add axes svg.append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${margin.top})`) .call(xAxisFct); svg.append("g") .attr("class", "x2-axis") .attr("transform", `translate(0,${margin.top})`) .call(x2AxisFct); svg.append("g") .attr("class", "y-axis") .call(yAxisFct); // headers let headers = svg.append('g') .attr('class', 'header') .attr("transform", `translate(0,${margin.top})`); // city headers.append('text') .attr('id', 'city') .attr('transform', `translate(${x(0)},${-130})`) .text('Demo') .style('font-size', '1.5em'); // date headers.append('text') .attr('id', 'date-range') .attr('transform', `translate(${x(0)},${-100})`) .text(`${fmtTime(d3.timeDay.offset(lastDate,-6))} to ${fmtTime(lastDate)}`) .style('font-size', '1.2em'); // total headers.append('text') .attr('class', 'total') .attr('transform', `translate(${x(0)},${-65})`) .text(`${d3.sum(stationdata, d => d.pickup)} riders`) .style('font-size', '2.0em'); // overall average headers.append('text') .attr('id', 'overall') .attr('transform', `translate(${margin.left - 52}, ${height - 120})`) .text("Overall") .attr("text-anchor", "end") .style('font-size', '1.0em'); headers.append('text') .attr('id', 'avg-headway') .attr('transform', `translate(${margin.left - 22}, ${height - 120})`) .attr("text-anchor", "start") .style('font-size', '1.0em') .text(calcAvgHeadway(stationdata)); // x-axis headers const yheader = -30 headers.append('text') .attr('transform', `translate(${x(-maxRider/2)},${yheader})`) .text('pickup'); headers.append('text') .attr('transform', `translate(${x(maxRider/2)},${yheader})`) .text('dropoff'); headers.append('text') .attr('transform', `translate(${x2(maxWait/2)},${yheader-20})`) .text('passengers on'); headers.append('text') .attr('transform', `translate(${x2(maxWait/2)},${yheader})`) .text('curb waiting'); function updateChart(day1, day2) { const filterdata = rawdata.filter(d => day1 <= +d.date && +d.date < day2) const newdata = Array.from(d3.rollup(filterdata, v => { return { 'station': v[0].station, 'pickup': d3.sum(v, d => d.pickup), 'dropoff': d3.sum(v, d => d.dropoff), 'waited': d3.sum(v, d => d.waited), 'headway': Math.round(d3.sum(v, d => d.headway * d.n) / d3.sum(v, d => d.n)), 'n': d3.sum(v, d => d.n), } }, d => d.station), ([_, value]) => value) // update date headers.select('#date-range') .text(`${fmtTime(day1)} to ${fmtTime(day2)}`) // update total headers.select('.total') .text(`${numFmt(d3.sum(newdata, d => d.pickup))} riders`) const newMaxRider = d3.max([ d3.max(newdata, d => d.pickup), d3.max(newdata, d => d.dropoff), ]); const newMaxWait = d3.max(newdata, d => d.waited) let xcb, xcbAxis, x2cb, x2cbAxis, x2cbAxisGrid; if (newMaxRider > 1.1*maxRider) { xcb = x.copy().domain([-newMaxRider, newMaxRider]) xcbAxis = d3.axisTop(xcb).ticks(6).tickFormat(d => Math.abs(d)); x2cb = x2.copy().domain([0, newMaxWait]) x2cbAxis = d3.axisTop(x2cb).ticks(3); x2cbAxisGrid = d3.axisTop(x2cb).ticks(3).tickSize(-(height - margin.top - margin.bottom)).tickFormat(""); } else { xcb = x.copy() xcbAxis = xAxis x2cb = x2.copy() x2cbAxis = x2Axis x2cbAxisGrid = x2AxisGrid } svg.select('.x-axis').call(xcbAxis).call(g => g.selectAll(".domain").remove()); svg.select('.x2-axis').call(x2cbAxis).call(g => g.selectAll(".domain").remove()); svg.select('.grid').call(x2cbAxisGrid).call(g => g.selectAll(".domain").remove()); // update pickup, dropoff, waited and headway rects.data(newdata) .call(g => g.select('.headway') .text(d => isNaN(d.headway) ? '' : `${Math.floor(d.headway/60)}:${d3.format('>02')(d.headway%60)}`) ) .transition().duration(750) .call(g => g.select('rect.pickup') .attr('x', d => xcb(-d.pickup)) .attr('width', d => xcb(d.pickup) - xcb(0)) .attr('data-tippy-content', d => `${d.station}: ${d.pickup} pickups`) ) .call(g => g.select('rect.dropoff') .attr('width', d => xcb(d.dropoff) - xcb(0)) .attr('data-tippy-content', d => `${d.station}: ${d.dropoff} dropoff`) ) .call(g => g.select('rect.waited') .attr('x', d => x2cb(0)) .attr('width', d => x2cb(d.waited) - x2cb(0)) .attr('data-tippy-content', d => `${d.station}: ${d.waited} waited`) ) .call(g => g.select('.pickup-label') .attr('x', d => xcb(-d.pickup) - labeloffset) .text(d => d.pickup) ) .call(g => g.select('.dropoff-label') .attr('x', d => xcb(d.dropoff) + labeloffset) .text(d => d.dropoff) ) let avgWaitTime = calcAvgHeadway(newdata); d3.select("#avg-headway").text(avgWaitTime); } return Object.assign(svg.node(), { updateChart }); }34:[{"id":"f7e8dbd12aa2650ee3ced718e231518f2f10114a02240d65351b694099d4bb508085ecd4a7d256e5f6800ffce9c33ebc8e8853cf349c36d8d9909a8b6900fe8e","href":"https://static.observableusercontent.com/files/f7e8dbd12aa2650ee3ced718e231518f2f10114a02240d65351b694099d4bb508085ecd4a7d256e5f6800ffce9c33ebc8e8853cf349c36d8d9909a8b6900fe8e","name":"Grand Rapids Ridership - 2021@8.csv","type":"text/csv","lastModified":1614006186754.382,"size":91662},{"id":"88aba04dacf273c435d5ad31e2f31e6b9529e353243f9baffe65ea93c78148e3883631eec7f2ec963c481393513dfa0e86f74ddc5f44325e853bf051010f9aff","href":"https://static.observableusercontent.com/files/88aba04dacf273c435d5ad31e2f31e6b9529e353243f9baffe65ea93c78148e3883631eec7f2ec963c481393513dfa0e86f74ddc5f44325e853bf051010f9aff","name":"Grand Rapids Ridership - 2020@3.csv","type":"text/csv","lastModified":1605805545562.886,"size":48871},{"id":"06d13aada823c7657c05e385aa3ad919059ac609c5b7274124dc2f6f34fd8b24d85ee2ad8956f972ca876b03a9b216d3bc31d374de9dda4ef1788ffd0f682c99","href":"https://static.observableusercontent.com/files/06d13aada823c7657c05e385aa3ad919059ac609c5b7274124dc2f6f34fd8b24d85ee2ad8956f972ca876b03a9b216d3bc31d374de9dda4ef1788ffd0f682c99","name":"Grand Rapids Ridership - 2021.csv","type":"text/csv","lastModified":1610378522212.79,"size":82496},{"id":"247e0fee86176387638f5df988caa90d69ed40ebad4b0524d1d214e73cf1a11e95e03e6c21221adfd4f993218ef063e6770faa50ad7f5c8b53e188c92c1ebc2a","href":"https://static.observableusercontent.com/files/247e0fee86176387638f5df988caa90d69ed40ebad4b0524d1d214e73cf1a11e95e03e6c21221adfd4f993218ef063e6770faa50ad7f5c8b53e188c92c1ebc2a","name":"Grand Rapids Ridership - 2020@4.csv","type":"text/csv","lastModified":1606144528703.21,"size":53418},{"id":"f8dd36a9b68a0a9d65b324c72c8dc2521d839a7112911d6375b6d51a3fe3a29b89dbe729dc28c7832e6094d9dfcf0d20340cccd7f946bce0918c069252e31466","href":"https://static.observableusercontent.com/files/f8dd36a9b68a0a9d65b324c72c8dc2521d839a7112911d6375b6d51a3fe3a29b89dbe729dc28c7832e6094d9dfcf0d20340cccd7f946bce0918c069252e31466","name":"fakedata_wide@3.csv","type":"text/csv","lastModified":1603825157551.313,"size":1505},{"id":"f0126faf1cb4932623670d41dc0af6f727316c662913b7626bbded1abb2a2651cebb8d8e2f6a2cd03d4f15c0dfbca5e06a2b952edb0344da35fa5cf4e0514a73","href":"https://static.observableusercontent.com/files/f0126faf1cb4932623670d41dc0af6f727316c662913b7626bbded1abb2a2651cebb8d8e2f6a2cd03d4f15c0dfbca5e06a2b952edb0344da35fa5cf4e0514a73","name":"Grand Rapids Ridership - October@3.csv","type":"text/csv","lastModified":1604673723314.327,"size":20028},{"id":"f8b4a3035de15b9c2d6ea8fd1dd31e3e1b32c555c1ce310f8b252634c5ba80e47a454eac9a665644b7034c63cd9d6689680ed2e467e6c3a8f03ff757252051e4","href":"https://static.observableusercontent.com/files/f8b4a3035de15b9c2d6ea8fd1dd31e3e1b32c555c1ce310f8b252634c5ba80e47a454eac9a665644b7034c63cd9d6689680ed2e467e6c3a8f03ff757252051e4","name":"Grand Rapids Ridership - 2020.csv","type":"text/csv","lastModified":1604952453950.856,"size":44397},{"id":"fa798522b3bbd490b723e5a12787cad2ccf50935f83646a7e076f9a65863f4e80780a6d9c02483ff85ba4dc85279e9852d328f6c804b69fb0f32d971b9201f41","href":"https://static.observableusercontent.com/files/fa798522b3bbd490b723e5a12787cad2ccf50935f83646a7e076f9a65863f4e80780a6d9c02483ff85ba4dc85279e9852d328f6c804b69fb0f32d971b9201f41","name":"Grand Rapids Ridership - 2020@1.csv","type":"text/csv","lastModified":1604954438676.964,"size":53682},{"id":"84931d6ef77fb30f0f57f3484d2bfcdfbb0411239bf86e656cc265b580523f977a976bbc438fbe34300653a1edcb6300b2ad21cbeb7b8cb765a35ba538b6beec","href":"https://static.observableusercontent.com/files/84931d6ef77fb30f0f57f3484d2bfcdfbb0411239bf86e656cc265b580523f977a976bbc438fbe34300653a1edcb6300b2ad21cbeb7b8cb765a35ba538b6beec","name":"Grand Rapids Ridership - 2020@5.csv","type":"text/csv","lastModified":1606839958891.92,"size":57960},{"id":"245e3c7fc025f5e3e1d06cca03adbe9b6b9cca8e69717d8be2bde2a7cf503e297797c62ccc740f9df12c2ac9d931317010435a32fc44e49a7324a555604a75f3","href":"https://static.observableusercontent.com/files/245e3c7fc025f5e3e1d06cca03adbe9b6b9cca8e69717d8be2bde2a7cf503e297797c62ccc740f9df12c2ac9d931317010435a32fc44e49a7324a555604a75f3","name":"Grand Rapids Ridership - 2020@6.csv","type":"text/csv","lastModified":1607359511118.825,"size":61596},{"id":"53f8cc85457cfa1ccebdd5c4b41c7926783f643c7f4ee267bdd9a9f56ee33510868a8a76d6384f3c5d4a8433c30af3a06eddb7db34ba03ee3f69087caaaffc8f","href":"https://static.observableusercontent.com/files/53f8cc85457cfa1ccebdd5c4b41c7926783f643c7f4ee267bdd9a9f56ee33510868a8a76d6384f3c5d4a8433c30af3a06eddb7db34ba03ee3f69087caaaffc8f","name":"Grand Rapids Ridership - 2020@8.csv","type":"text/csv","lastModified":1607959081640.114,"size":66148},{"id":"9c98ba7e6815780496b0907439b3c75cc0f3097276cd632b3d72a4d2628f83dda76195aa0aedb4e05aa2613eef85280faf5de5a2b0353a3dc8af76e4fcd644f8","href":"https://static.observableusercontent.com/files/9c98ba7e6815780496b0907439b3c75cc0f3097276cd632b3d72a4d2628f83dda76195aa0aedb4e05aa2613eef85280faf5de5a2b0353a3dc8af76e4fcd644f8","name":"Grand Rapids Ridership - 2020@9.csv","type":"text/csv","lastModified":1608562484918.296,"size":70697},{"id":"f34f241899876d0a8e0e76346fe6c4cce98e8213c9cebe61c7d31bd774023eed95e72ae53fbddac7dc17a2ded13c152a52c62251bfd2bddd4e9976da53a98728","href":"https://static.observableusercontent.com/files/f34f241899876d0a8e0e76346fe6c4cce98e8213c9cebe61c7d31bd774023eed95e72ae53fbddac7dc17a2ded13c152a52c62251bfd2bddd4e9976da53a98728","name":"Grand Rapids Ridership - 2021@1.csv","type":"text/csv","lastModified":1610980128425.273,"size":87046},{"id":"de6e93a280299cf57f3a883413112ee731989a87c11c3f931244060cc80bfe207768f36162dd66857fcb4feef809042f311ca5ccf7dd40603657447a0a767e4f","href":"https://static.observableusercontent.com/files/de6e93a280299cf57f3a883413112ee731989a87c11c3f931244060cc80bfe207768f36162dd66857fcb4feef809042f311ca5ccf7dd40603657447a0a767e4f","name":"Grand Rapids Ridership - 2020@10.csv","type":"text/csv","lastModified":1609863293855.113,"size":77953},{"id":"52ec1106d9de38e2423499f88267377138e5aceeb6fe8bdfa9b23eccb29f8783c6048d57c1561a382dae52576ee01c738cf75a5f2a4115a422c821334d01322f","href":"https://static.observableusercontent.com/files/52ec1106d9de38e2423499f88267377138e5aceeb6fe8bdfa9b23eccb29f8783c6048d57c1561a382dae52576ee01c738cf75a5f2a4115a422c821334d01322f","name":"Grand Rapids Ridership - 2021@5.csv","type":"text/csv","lastModified":1612461378830.339,"size":84671},{"id":"97b371a86916adfa50f359888b96b2c0b1c0a8a0fa9d07380f8b80c16db664dba06607c82aa4b57d9b0d9b659e2988c127ceef452082d636111dfbacc31d7e4c","href":"https://static.observableusercontent.com/files/97b371a86916adfa50f359888b96b2c0b1c0a8a0fa9d07380f8b80c16db664dba06607c82aa4b57d9b0d9b659e2988c127ceef452082d636111dfbacc31d7e4c","name":"Grand Rapids Ridership - 2021@7.csv","type":"text/csv","lastModified":1613403566624.528,"size":90129}] 2f:{"title":"Demo Daily Ridership","cells":[{"id":0,"value":"md`# Demo Daily Ridership\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"`md Drag/resize the gray region in the mini-chart to change the time period. Or use your mouse to specify a new region.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"md`Or choose some default date ranges`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"viewof daterange = radio({\n options: [\"Last 7 days\", \"Last 14 days\", \"Last 30 days\"],\n value: \"Last 7 days\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"md`## Station Data\n\nData on headway time, pickups, dropoffs, passengers on curb waiting\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1615,"value":"viewof sortingcolumn = radio({\n options: [\"station\", \"waittime\", \"pickup\", \"dropoff\"],\n value: \"pickup\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"avgWaitTime = calcAvgHeadway(stationDataDownload)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1321,"value":"md`# Appendix\nSome supporting code\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"md`### Station Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"fmtTime = d3.utcFormat('%b %e, %Y')","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"waitOffset = 87","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"labeloffset = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"x = d3.scaleLinear()\n .domain([-maxRider, maxRider])\n .range([0 + margin.left, width - margin.right - waitOffset - 50]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"x2 = d3.scaleLinear()\n .domain([0, maxWait])\n .range([width - margin.right - waitOffset, width - margin.right]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"y = d3.scaleBand()\n .domain(stationdata.map(d => d.station))\n .range([0, height - margin.top - margin.bottom])\n .padding(0.1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"xAxis = d3.axisTop(x)\n .ticks(6)\n .tickFormat(d => Math.abs(d));","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"x2Axis = d3.axisTop(x2).ticks(3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"yAxis = d3.axisLeft(y).tickSize(0);","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"xAxisGrid = d3.axisTop(x)\n .ticks(6)\n .tickSize(-(height - margin.top - margin.bottom))\n .tickFormat(\"\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"x2AxisGrid = d3.axisTop(x2)\n .ticks(3)\n .tickSize(-(height - margin.top - margin.bottom))\n .tickFormat(\"\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"xAxisFct = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(xAxis)\n .call(g => g.selectAll(\".domain\").remove());","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"x2AxisFct = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(x2Axis)\n .call(g => g.selectAll(\".domain\").remove());","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"yAxisFct = g => g\n .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n .call(yAxis)\n .call(g => g.selectAll(\".domain\").remove())\n .call(g => g\n .selectAll(\".tick text\")\n .attr('x', xoffset - 10)\n .attr('class', 'station-name')\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"xoffset = -40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1559,"value":"colorScheme = [\"#00bcee\", \"#99e4f8\", \"#98c91f\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"colorScale = d3.scaleOrdinal()\n .domain(['pickup', 'dropoff', 'waited'])\n .range(colorScheme);","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"numFmt = d3.format(',')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"lastDate = d3.max(rawdata, d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"dayRange = {\n const lastDateMidnight = d3.utcDay.offset(lastDate);\n const dayRange = daterange === 'Last 7 days' ? [d3.utcDay.offset(lastDate, -6), lastDateMidnight]\n : daterange === 'Last 14 days' ? [d3.utcDay.offset(lastDate, -13), lastDateMidnight]\n : [d3.utcDay.offset(lastDate, -29), lastDateMidnight];\n return [dayRange[0], d3.utcSecond.offset(dayRange[1],-1)]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"margin = ({top: 150, right: 20, bottom: 0, left: 180})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"md`### Focus-Context Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"xtAxisFct = (g, x, h) => g\n .attr(\"transform\", `translate(0,${h})`)\n .call(d3.axisBottom(x).ticks(7));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"ytAxisFct = (g, y) => g\n .attr(\"transform\", `translate(${width - marginday.right},0)`)\n .call(d3.axisRight(y).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".title\")\n .data([\"riders\"])\n .join(\"text\")\n .attr(\"class\", \"title\")\n .attr(\"x\", 0)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr('font-size', '1.2em')\n .attr('font-weight', 600)\n .text('Riders'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"ytAxisGridFct = (g, y) => g\n .attr(\"transform\", `translate(${width - marginday.right},0)`)\n .attr(\"class\", \"grid\")\n .call(d3.axisRight(y)\n .ticks(5)\n .tickSize(-(width - marginday.left - marginday.right))\n .tickFormat(\"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"heightday = 175","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"heightcontext = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"marginday = ({top: 20, right: 40, bottom: 25, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"xt = d3.scaleUtc()\n .domain([d3.min(daydata, d => d.date), d3.timeDay.offset(d3.max(daydata, d => d.date))])\n .range([marginday.left, width - marginday.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"yt = d3.scaleLinear()\n .domain([0, d3.max(daydata, d => d.pickup)])\n .range([heightday - marginday.bottom, marginday.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"yt2 = d3.scaleLinear()\n .domain([0, d3.max(daydata, d => d.pickup)])\n .range([heightcontext - marginday.bottom, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"dayWidth = xt(d3.timeDay.offset(new Date)) - xt(new Date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"avgLine1 = d3.line()\n .x(d => xt(d3.timeHour.offset(d.date,12)))\n .y(d => yt(d.avg))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"avgLine2 = d3.line()\n .x(d => xt(d3.timeHour.offset(d.date,12)))\n .y(d => yt2(d.avg))","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"rawdata = {\n let data = d3.csvParse(await FileAttachment(\"Grand Rapids Ridership - 2021@8.csv\").text(), d3.autoType)\n //let data = await d3.csv('https://cors-anywhere.herokuapp.com/https://docs.google.com/spreadsheets/d/e/2PACX-1vSlqO6ukuF6GavrHSreTV1W0IqUzDt1H0-kWhV_HClUICqqEge694zZhhAh-yleQaWcmbH1XUCMws7g/pub?gid=0&single=true&output=csv', d3.autoType)\n data.map(d => {\n d.order = stationOrder[d.station];\n return d\n })\n return data.sort((a, b) => d3.ascending(a.date, b.date) || d3.ascending(a.order, b.order))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"stationdata = Array.from(d3.rollup(rawdata, v => {\n return {\n 'station': v[0].station,\n 'pickup': d3.sum(v, d => d.pickup),\n 'dropoff': d3.sum(v, d => d.dropoff),\n 'waited': d3.sum(v, d => d.waited),\n 'headway': Math.round(d3.sum(v, d => d.headway * d.n) / d3.sum(v, d => d.n)),\n 'n': d3.sum(v, d => d.n),\n }\n }, d => d.station), ([_, value]) => value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"daydata = {\n let daydata = Array.from(d3.rollup(rawdata, v => {\n return {\n 'date': v[0].date,\n 'pickup': d3.sum(v, d => d.pickup),\n 'dropoff': d3.sum(v, d => d.dropoff),\n 'waited': d3.sum(v, d => d.waited),\n }\n }, d => +d.date), ([_, value]) => value)\n return movingAverage(daydata, 5) // adds moving average as another key\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"stationOrder = ({\n 'Amway Grand EB': 13,\n 'Amway Grand WB': 3,\n 'Division-Weston': 17,\n 'Fire Station': 9,\n 'First Community': 1,\n 'Kendall College': 15,\n 'Monument Park': 16,\n 'Mt Vernon': 11,\n 'Museum EB': 12,\n 'Museum WB': 4,\n 'Oakes-Commerce': 18,\n 'Pearl-Ottawa EB': 14,\n 'Pearl-Ottawa WB': 2,\n 'Printing Co': 10,\n 'Seward 9C': 7,\n 'Seward 9N': 8,\n 'Seward 9S': 6,\n 'Studio Park': 19,\n 'Van Andel': 20,\n 'YMCA': 5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"stationDataDownload = {\n const [day1, day2] = context\n const filterdata = rawdata.filter(d => day1 <= +d.date && +d.date < day2)\n const newdata = Array.from(d3.rollup(filterdata, v => {\n return {\n 'station': v[0].station,\n 'pickup': d3.sum(v, d => d.pickup),\n 'dropoff': d3.sum(v, d => d.dropoff),\n 'waited': d3.sum(v, d => d.waited),\n 'headway': Math.round(d3.sum(v, d => d.headway * d.n) / d3.sum(v, d => d.n)),\n 'n': d3.sum(v, d => d.n),\n }\n }, d => d.station), ([_, value]) => value)\n return newdata\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"maxWait = d3.min([60, d3.max(stationdata, d => d.waited)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"maxRider = d3.min([250,\n d3.max(stationdata, d => d.pickup),\n d3.max(stationdata, d => d.dropoff),\n]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"calcAvgHeadway = stationDataDownload => {\n let avgWaitSec = Math.round(d3.sum(stationDataDownload, d => d.headway * d.n) / d3.sum(stationDataDownload, d => d.n));\n let avgWaitTime = `${Math.floor(avgWaitSec/60)}:${d3.format('>02')(avgWaitSec%60)}`\n return avgWaitTime\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"function movingAverage(data, N, column='pickup') {\n return data.map((row, idx, total) => {\n const startIdx = Math.max(0, idx-N+1)\n const endIdx = idx\n const movingWindow = total.slice(startIdx, endIdx+1)\n const sum = movingWindow.reduce((a,b) => a + b[column], 0)\n row.avg = Math.round(sum / movingWindow.length)\n return row\n });\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"update = {\n const [day1, day2] = context\n riderchart.updateChart(day1, day2)\n timechart.update(xt.copy().domain(context))\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"radioupdate = { \n const [day1, day2] = daterange === 'Last 7 days' ? [d3.timeDay.offset(lastDate, -6), lastDate]\n : daterange === 'Last 14 days' ? [d3.timeDay.offset(lastDate, -13), lastDate]\n : [d3.timeDay.offset(lastDate, -29), lastDate]\n riderchart.updateChart(day1, day2)\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"tooltip = {\n riderchart;\n return tippy(\".pdw\", {\n followCursor: true,\n allowHTML: true,\n theme: 'may' })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"createTableTooltip = (d) => {\n return `\n \n \n \n

	Riders
${d3.utcFormat('%b %e')(d.date)}	${d.pickup}
5-day avg	${d.avg}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`## HTML, CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"tippy = require(\"tippy.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}