45:["$","title",null,{"children":"Divvy Rides Per Hour in Chicago | thomasdanner | Observable"}] 4d:T6fe,function graphData(data) { var x = d3.scaleLinear() .domain([0,24]) .range([margin.left+5, width - margin.right-5]) var y = d3.scaleLinear() .domain([0, d3.max(data)]).nice() .range([height - margin.bottom-5, margin.top+5]) var line = d3.line() .x((d,idx) => x(idx)) .y((d,idx) => y(d) ? y(d) : (idx>0) ? y(data[idx-1]) : y(data[idx+1])) const svg = d3.select(DOM.svg(width, height)); const bW = 300/24; var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("font-size", "1em") .style("z-index", "10") .style("padding", "5px") .style("opacity", "0") .style("background", "#000000CC") .style("color", "white") .style("border-radius", "2%") svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("d", line); svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("cx", function(d, i) { return x(i) }) .attr("cy", (d,idx) => y(d) ? y(d) : (idx>0) ? y(data[idx-1]) : y(data[idx+1])) .attr("r", 2) svg.selectAll(".dothit") .data(data) .enter().append("rect") .attr("x", function(d, i) { return x(i)-(bW/2) }) .attr("y", function(d) { return y(d)-20; }) .attr("width", bW-1) .attr("height", 90) .attr("fill", "transparent") .on("mouseover", function(d, idx){ tooltip.text(`bikes: ${d} // time: ${idx}:00`) tooltip.transition().style("opacity", "1.0").duration(100); }).on("mousemove", function(){ tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); }).on("mouseout", function(){ tooltip.transition().style("opacity", "0").duration(200); }); return svg.node(); }4e:[] 49:{"id":"bc4814c6ac9f3525","slug":"divvy-rides-per-hour-in-chicago","title":"Divvy Rides Per Hour in Chicago","thumbnail":"f7befba4e52fe6ebb6f2c404a56546391346e77f079fc4e8c07ea90466c2f90e","access_level":"public","create_time":"$D2018-03-08T01:16:38.986Z","update_time":"$D2018-03-08T05:55:40.002Z","view_time":null,"first_public_time":"$D2018-03-08T01:17:26.764Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"15dce3cb1fae430a","login":"thmsdnnr","name":"thomasdanner","avatar_url":"https://avatars-next.observableusercontent.com/12e6ba6d614822057a55b39e17dfd4495edf4aa9cbe6c058fb0a882e01277f44","tier":"starter_2024","bio":"🐱 crafting joyful JS","followed_by_you":false,"follows_you":false},"version":1101,"publish_version":1101,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c20b21ebbd7d7e6","login":"thmsdnnr","name":"thomasdanner","avatar_url":"https://avatars-next.observableusercontent.com/12e6ba6d614822057a55b39e17dfd4495edf4aa9cbe6c058fb0a882e01277f44","tier":null,"bio":"🐱 crafting joyful JS","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7c20b21ebbd7d7e6","login":"thmsdnnr","name":"thomasdanner","avatar_url":"https://avatars-next.observableusercontent.com/12e6ba6d614822057a55b39e17dfd4495edf4aa9cbe6c058fb0a882e01277f44","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Divvy Rides Per Hour in Chicago","cells":[{"id":711,"value":"md `## Divvy Rides Per Hour in Chicago\n#### Week Starting ${year}-${month}-${day} || Total \\# rides: ${data.length}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`\n| day | 24-hr graph | stats |\n| -------------: |:-------------:| :-----|\n| ${R[0].name} ${R[0].day} | ${graphData(R[0].data)} | ${R[0].statMd} | \n| ${R[1].name} ${R[1].day} | ${graphData(R[1].data)} | ${R[1].statMd} |\n| ${R[2].name} ${R[2].day} | ${graphData(R[2].data)} | ${R[2].statMd} |\n| ${R[3].name} ${R[3].day} | ${graphData(R[3].data)} | ${R[3].statMd} |\n| ${R[4].name} ${R[4].day} | ${graphData(R[4].data)} | ${R[4].statMd} |\n| ${R[5].name} ${R[5].day} | ${graphData(R[5].data)} | ${R[5].statMd} |\n| ${R[6].name} ${R[6].day} | ${graphData(R[6].data)} | ${R[6].statMd} |\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"viewof year = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"viewof month = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"viewof day = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"width=300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"margin = ({top: 1, right: 1, bottom: 0, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"height=50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"`Start Date: ${month} / ${day} / ${year}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"startTime = year+\"-\"+(month<9 ? \"0\"+month:month)+\"-\"+(day<9 ? \"0\"+day:day)+\"T00:00:00\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"endTime = addDaysToDate(startTime, 7)+\"T23:59:59\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"data = d3.json('https://data.cityofchicago.org/resource/fg6s-gzvg.json?'+querystring)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"querystring = `$where=start_time between '${startTime}' and '${endTime}'&$limit=9999999`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"function max(arr) {\n let maxIdx=0;\n let maxVal=arr[0];\n for (var i=1;imaxVal) { maxVal=arr[i]; maxIdx=i; } \n }\n return {value: maxVal, hour: maxIdx};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"function min(arr) {\n let minIdx=0;\n let minVal=arr[0];\n for (var i=1;i{\n const timeBin = ride.start_time ? String(+ride.start_time.split(\"T\")[1].split(\":\")[0]) : -1;\n const dateBin = ride.start_time.split(\"T\")[0];\n if (!timeAndDates[dateBin]) { timeAndDates[dateBin] = []; }\n timeAndDates[dateBin][timeBin] ? timeAndDates[dateBin][timeBin]++ : timeAndDates[dateBin][timeBin]=1\n })\n return generateReport(timeAndDates, startTime)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"function generateReport(binned, start) {\n var dates = ['Sun', 'Mon', 'Tues', 'Weds', 'Thurs', 'Fri', 'Sat'];\n var newInfo=[]\n var first = new Date(start).getUTCDay();\n Object.keys(binned).forEach((key)=>{\n if (binned[key].length<24) { //missing keys\n for (var i=0;i<24;i++) {\n if (!binned[key][i]) { \n binned[key][i] = 0; //set to zero\n }\n }\n }\n const maxV=max(binned[key]);\n const minV=min(binned[key]);\n newInfo.push({\n data: binned[key],\n statMd: `max: ${maxV.value} @ ${maxV.hour}:00 // min: ${minV.value} @ ${minV.hour}:00`,\n day: key.split(\"-\").slice(1).join(\"/\"),\n name: dates[new Date(key).getUTCDay()]\n });\n }); \n return newInfo;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null