3f:null 40:["$","title",null,{"children":"Realtime Data Series Visualization | Rex | Observable"}] 46:T900,chart = { let margin = {top: 20, right: 20, bottom: 30, left: 50}, _width = width - margin.left - margin.right, height = (width / 3.2) - margin.top - margin.bottom; let {min,max}=bikesAvailableRange; let x = d3.scaleTime().range([0, width]); let y = d3.scaleLinear().domain([min-3,max+3]).range([height, 0]); let xAxis = d3.axisBottom().scale(x); let yAxis = d3.axisLeft().scale(y); let line = d3.line() .defined(d => !isNaN(d.bikes)) .x(d => x(d.timestamp)) .y(d => y(d.bikes)) .curve(d3.curveCatmullRom) let svg = d3.select(DOM.svg(width)) .attr("width", _width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); let g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); g.append("text") .text('Total Bikes Available') .attr('transform', 'translate(20, 20)'); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); g.append("g") .attr("class", "y axis") .call(yAxis); g.append("path") .attr("class", "path") .attr("fill", "none") .attr("stroke", "rgba(60, 110, 30, 0.5)") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); while (true) { while (d.length && +d[0].timestamp < new Date(Date.now() - duration*1000)) { data.shift(); } x.domain([new Date(Date.now() - duration*1000), new Date()]); let dots = g.selectAll(".dot").data(d); let dotsEnter = dots.enter().append("circle") .attr("class", "dot") .attr("r", 5) .merge(dots) .attr("cx", function(d) { return x(d.timestamp); }) .attr("cy", function(d) { return y(d.bikes); }) .style("fill", function(d) { return 'rgba(10, 110, 30, 0.9)'; }); //line var paths = g.selectAll(".path").data(d); let pathsEnter = paths//.enter().append("path") .datum(d) // .merge(paths) .attr("d", line) svg.selectAll(".x.axis").call(xAxis); svg.selectAll(".y.axis").call(yAxis); yield svg.node(); if(refreshInterval>0) await wait(refreshInterval) } }47:[{"id":"47d1ed80e28336f128afe39cf3de2d4150a8547f22f9065589adbec7bb952bebf97a3be35bf83e64c093038b4c706fad8d2d9768a015e8633fcd5cf94847bdb0","href":"https://static.observableusercontent.com/files/47d1ed80e28336f128afe39cf3de2d4150a8547f22f9065589adbec7bb952bebf97a3be35bf83e64c093038b4c706fad8d2d9768a015e8633fcd5cf94847bdb0","name":"screenshot.jpg","type":"image/jpeg","lastModified":1586037796582.715,"size":79417}] 44:{"id":"de952b12724564fe","slug":"realtime-visualization","title":"Realtime Data Series Visualization","thumbnail":"abb73d3685430ea2328d5a02ae7bb6b30d5222fb22b1014cc18b01cb332a0655","access_level":"public","create_time":"$D2020-04-03T19:03:05.816Z","update_time":"$D2020-04-05T01:24:35.558Z","view_time":null,"first_public_time":"$D2020-04-04T21:08:44.937Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"2501d3abeb4c379e","login":"tsenyi","name":"Rex","avatar_url":"https://avatars-next.observableusercontent.com/43a7d012b27f01ab875ab72db7c55c76e70911ad2ba149248b200ee224fb5d7d","tier":"starter_2024","bio":"","following":false},"version":810,"publish_version":810,"role":null,"authored":false,"authors":[{"type":"individual","id":"d493cb2733cac430","login":"tsenyi","name":"Rex","avatar_url":"https://avatars-next.observableusercontent.com/43a7d012b27f01ab875ab72db7c55c76e70911ad2ba149248b200ee224fb5d7d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d493cb2733cac430","login":"tsenyi","name":"Rex","avatar_url":"https://avatars-next.observableusercontent.com/43a7d012b27f01ab875ab72db7c55c76e70911ad2ba149248b200ee224fb5d7d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Realtime Data Series Visualization","cells":[{"id":0,"value":"md`# Realtime Data Series Visualization\n

*Realtime chart showing available [Citi Bikes in New York City](https://www.citibikenyc.com/)*

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof feed = radio({\n title: 'Data Series',\n options: [\n // { label: 'Station Information', value: 'station_information' },\n { label: 'Station Status', value: 'station_status' },\n ],\n value: 'station_status'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"// viewof programStatus = radio([\"Paused\",'Running'])\nviewof programStatus = ToggleButton({value: \"Paused\", values:['Paused','Running'], title:'Visualization Status', description: `Click the button to Start or Pause realtime monitoring of bikes available.`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"viewof refreshInterval = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 2, \n title: \"Refresh Interval \", \n description: \"Refresh interval from zero through 10 seconds. Less is more smooth.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"viewof duration = slider({\n min: 1*60, \n max: 10*60, \n step: 10, \n value: 5*60, \n title: \"Maximum Time Duration in Seconds\", \n description: \"Slide to adjust how long should data be kept in chart.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {slider, text, button, select, checkbox, radio, 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":26,"value":"import { html, svg } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"Immutable = require(\"immutable\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"gtag = {\n await require(\"https://www.googletagmanager.com/gtag/js?id=UA-15703023-1\").catch(\n () => {}\n );\n const dataLayer = (window.dataLayer = window.dataLayer || []);\n function gtag() {\n dataLayer.push(arguments);\n }\n gtag('js', new Date());\n gtag('config', 'UA-15703023-1');\n gtag('set', {'content_group1': 'Realtime Visualization'}); \n return gtag;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"async function get_feed(feedname) {\n const url = `https://gbfs.citibikenyc.com/gbfs/en/${feedname}.json`;\n var data = (await fetch(url)).json();\n return await data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"async function * ping(){\n while(programStatus=='Running'){\n const {data: {stations}, ttl, last_updated} = await get_feed(feed);\n let s = sum(stations);\n s['timestamp']=new Date()\n yield s\n await wait(ttl);\n }\n yield {timestamp:new Date(),paused:true}\n return 'Done';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"sum = stations => _.reduce(stations, function(sum, station) {\n const {bikes,docks}=sum\n return {'bikes':bikes+station.num_bikes_available, \n 'docks':docks+station.num_docks_available}\n}, {'bikes':0,'docks':0});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"async function wait(seconds){\n return new Promise(resolve => setTimeout(() => resolve(), (seconds||1)*1000))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"function ToggleButton(config = {}) {\n const nextValue = (currentValue,values)=>{\n const currentState = values.indexOf(currentValue)\n const nextState=(currentState+1)%values.length\n return values[nextState];\n }\n const {\n value = \"On\", title, description, disabled, \n values = [\"On\",\"Darker\",\"Off\"]\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}, \n getValue:(btn)=>{\n const nextVal = nextValue(btn.form.value, values)\n // console.log( \"form.value=\",btn.form.value,\"btn.value=\",btn.value,'nextVal',nextVal)\n btn.value=nextVal\n return nextVal\n }\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"mutable data=[]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"d = Generators.observe(notify => {\n // console.log('notify',data,d)\n while (data.length && +data[0].timestamp < new Date(Date.now() - duration*1000)) {\n // console.log('data.shift',data)\n data.shift();\n }\n if(mostRecentData && !mostRecentData.paused){\n data.push(mostRecentData);\n notify(data);\n }\n return () => data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"mostRecentData = ping()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"bikesAvailableRange={\n let min=20000, max=0;\n _.each(d,({bikes})=>{\n min=bikesmax?bikes:max;\n });\n return {min,max}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"stylesheet = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"