2c:null 2d:["$","title",null,{"children":"Draft | whall800 | Observable"}] 32:Tab9,chart = { const svg = d3.select(DOM.svg(width, height)) .style("-webkit-tap-highlight-color", "transparent") .style("overflow", "visible"); const background = svg.append('rect') .attr('width', height*2 + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .attr('fill', "black") svg.append("circle").attr("cx",650).attr("cy",130).attr("r", 6).style("fill", "red") svg.append("circle").attr("cx",650).attr("cy",160).attr("r", 6).style("fill", "steelblue") svg.append("text").attr("x", 670).attr("y", 130).text("Declared state of emergency for NY state").style("font-size", "15px").attr("alignment-baseline","middle").style("fill", "red").attr("font-family", "Arial") svg.append("text").attr("x", 670).attr("y", 160).text("NY state lockdown began").style("font-size", "15px").attr("alignment-baseline","middle").style("fill", "steelblue").attr("font-family", "Arial") var yaxis = svg.append("g") .call(yAxis); yaxis.selectAll("line") .style("stroke", "white"); yaxis.selectAll("path") .style("stroke", "white"); yaxis.selectAll("text") .style("fill", "white") var xaxis = svg.append("g") .call(xAxis) .attr('transform', 'translate(19,480)'); xaxis.selectAll("line") .style("stroke", "white"); xaxis.selectAll("path") .style("stroke", "white"); xaxis.selectAll("text") .style("fill", "white"); svg.append("path") .datum(data2[selectedEncoding]) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) svg.append("line") .attr("x1", x(lockdown)) .attr("y1", 20) .attr("x2", x(lockdown)) .attr("y2", height-margin.top-margin.bottom) .style("stroke-width", 5) .style("stroke", "steelblue") .style("fill", "none") .style("opacity", 0.5) svg.append("line") .attr("x1", x(emergency_state)) .attr("y1", 20) .attr("x2", x(emergency_state)) .attr("y2", height-margin.top-margin.bottom) .style("stroke-width", 5) .style("stroke", "red") .style("fill", "none") .style("opacity", 0.5) const tooltip = svg.append("g"); svg.on("touchmove mousemove", function() { const {date, value} = bisect(d3.mouse(this)[0]); tooltip .attr("transform", `translate(${x(date)},${y(value)})`) .call(callout, `${value.toLocaleString(undefined, {style: "decimal"})} ${date.toLocaleString(undefined, {month: "short", day: "numeric", year: "numeric"})}`); }) ; svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }33:T4c7,nyct2010map2 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; const radius = d3.scaleSqrt().domain([0, 2500]).range([0, 15]); // Now we create a map object and add a layer to it. let map = L.map(container); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var myRenderer = L.canvas({ padding: 0.0 }); turf.featureEach(nyct2010, function (currentFeature, featureIndex) { var pt = turf.center(currentFeature); var fcount = counts[currentFeature.properties.BoroCT2010] ? counts[currentFeature.properties.BoroCT2010] : 0 if (fcount > 0) { L.circleMarker(pt.geometry.coordinates.reverse(), { renderer: myRenderer, radius: radius(fcount), stroke: false, color: '#b80f0a', fillOpacity: 0.3 }).bindTooltip(`${fcount} bikes rented on ${complaint} `).addTo(map); } }); let nyct2010Layer = L.geoJson(nyct2010); //nyct2010Layer.bindPopup('Grand Central Terminal'); map.fitBounds(nyct2010Layer.getBounds()); }34:[{"id":"31ba085610b4dbd98f52b429f46fde404c7d14ce1d7a2ca499791aea26a8ff425066f679a4791684e995ba7c921ff2d49d7e25d749bce091fd4bef6f86d0d5c5","href":"https://static.observableusercontent.com/files/31ba085610b4dbd98f52b429f46fde404c7d14ce1d7a2ca499791aea26a8ff425066f679a4791684e995ba7c921ff2d49d7e25d749bce091fd4bef6f86d0d5c5","name":"citibikeNYC.csv","type":"text/csv","lastModified":1589252686415.664,"size":540}] 30:{"id":"f3c8fac9879eb401","slug":"draft","title":"Draft","thumbnail":"69c5dbf478eb2e97bb35b1eb8e3d4cc2abd13f4e5e3702470e28c35c692f3a86","access_level":"public","create_time":"$D2020-05-12T03:04:46.415Z","update_time":"$D2020-05-12T03:04:46.415Z","view_time":null,"first_public_time":"$D2020-05-12T03:04:57.550Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"84060cb7848bc8d8","login":"whall800","name":"","avatar_url":"https://avatars-next.observableusercontent.com/51199734d1fd87abcdd8d5f4ebdfc91d5e11a8ea632257159daf648454809416","tier":"starter_2024","bio":""},"version":133,"publish_version":133,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2124e31d91ce9df","login":"whall800","name":"","avatar_url":"https://avatars-next.observableusercontent.com/51199734d1fd87abcdd8d5f4ebdfc91d5e11a8ea632257159daf648454809416","tier":null,"bio":""}],"members":[{"type":"individual","id":"f2124e31d91ce9df","login":"whall800","name":"","avatar_url":"https://avatars-next.observableusercontent.com/51199734d1fd87abcdd8d5f4ebdfc91d5e11a8ea632257159daf648454809416","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Draft","cells":[{"id":126,"value":"md `# Draft`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof selectedEncoding = select({\n title: 'Dataset',\n description: 'Pick dataset to view',\n options: ['CitiBike', 'Subway'],\n value: 'Subway'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"html `
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html` Citi Bike Ridership in the time of Covid-19`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html `Choose date below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof complaint = {\n var opstring = ''\n return html `${opstring}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n const context = DOM.context2d(240, 40);\n context.beginPath();\n context.fillStyle = 'rgba(184, 15, 10, 0.4)';\n context.arc(20, 20, 15, 0, 2 * Math.PI);\n context.fill();\n context.fillStyle = 'black';\n context.font=\"16px Arial\";\n context.fillText(\"= \" + \"2500 bike rentals\",40,25);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"counts = data[complaint]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data = {\n let response = await fetch('https://raw.githubusercontent.com/nhh2112/datavisa5/master/full_data.json');\n let json = await response.json();\n return json\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"nyct2010 = {\n let response = await fetch('https://gist.githubusercontent.com/adrianpearl/315a4927b9191b70dd7677847075b5d1/raw/c6678d92408d2c8f1fa4cd22c96964ad50a5781d/nyc_2010_ctracts.json');\n let json = await response.json();\n return json\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"turf = require('https://npmcdn.com/@turf/turf/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"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":52,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"parseTime = d3.timeParse(\"%m/%d/%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"subway = subway1.slice(65)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"subway1 = subway_data.map(obj => {\n let rObj = {};\n rObj.date = parseTime(obj.date);\n rObj.value = obj.value;\n return rObj;\n}).sort(function(a,b){return a.date - b.date});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"subway_data = Object.values(subway_clean.reduce((r, o) => {\n r[o.date] = r[o.date] || {date: o.date, value : 0};\n r[o.date].value += +o.value;\n return r;\n},{}));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"subway_clean = clean(subway_raw, \"entries\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function clean (data, value){\n data.sort(function(a,b){return b.value - a.value});\n var len = data.length;\n var low = Math.round( len * 0.005);\n var high = 1 - low;\n return data.slice(low, high);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"subway_raw = d3.csv(\"https://raw.githubusercontent.com/whall800/A5-MTA-Corona/master/Grouped_date_station.csv\" , d => {\n\treturn {date: d.Date, value: d.num_entries}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"bike = Object.assign(d3.csvParse(await FileAttachment(\"citibikeNYC.csv\").text(), d3.autoType).map(({date, daily_total}) => ({date, value: daily_total})), {y: \"Daily Total\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"line = d3.line()\n .curve(d3.curveStep)\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(data[selectedEncoding], date, 1);\n const a = data[selectedEncoding][index-1];\n const b = data[selectedEncoding][index];\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left + 20},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 .style(\"font-weight\", \"bold\")\n .style(\"fill\", \"white\")\n .text(data2[selectedEncoding].y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom+100})`)\n .call(d3.axisBottom(x).ticks(width / 100).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data2[selectedEncoding], d => 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":88,"value":"end = data2[selectedEncoding][data2[selectedEncoding].length-1].date;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"x = d3.scaleTime()\n .domain([new Date(\"2020-03-01 00:00:00\"), end])\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":92,"value":"margin = ({top: 20, right: 40, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"lockdown = new Date(\"2020-03-20 19:00:00\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"emergency_state = new Date(\"2020-03-07 19:00:00\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"keys = [bike, subway]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"data2 = ({CitiBike: bike, Subway: subway})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"