2c:null 2d:["$","title",null,{"children":"Brooklyn Bridge SVG Design | Aaron Brezel | Observable"}] 32:T30ba,html` `33:T45b,chart = { const chartGraph = d3.select(DOM.svg(SVGwidth, SVGheight)); chartGraph.append("g").call(xAxis); chartGraph.append("g").call(yAxis); chartGraph.append("path") .datum(dataSet.fullSet) .attr("fill", "none") .attr("stroke", "#69b3a2") .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) { return x(d.hour_beginning) }) .y(function(d) { return y(d.Pedestrians) }) ) chartGraph.append("g") .selectAll("dot") .data(dataSet.fullSet) .enter() .append("circle") .attr("cx", function(d) { return x(d.hour_beginning) } ) .attr("cy", function(d) { return y(d.Pedestrians) } ) .attr("r", 3) .attr("fill", "#69b3a2") chartGraph.node().update = () => { //Update all rects with random value // svg.selectAll("rect") // .data(dataset.map(x => Math.random()*25)) // .transition() // next 3 lines: animation // .duration(800) // .ease(d3.easeLinear) // .attr("y", d => height - yScale(d)) // .attr("height", d => yScale(d)); }; return chartGraph.node(); }34:T441,dataSet = { const data = await d3.json("https://raw.githubusercontent.com/aaronbrezel/Brooklyn_Bridge/master/brooklyn_bridge_pedestrians_json.json"); var dates = []; var people = []; var toManhattan = []; var toBrooklyn = []; var weatherSummary = []; var temperature = []; var precipitation = []; var events = []; for (var i = 0; i < data.length; i++){ dates[i] = date(data[i].hour_beginning); data[i].hour_beginning = date(data[i].hour_beginning); people[i] = data[i].Pedestrians; toManhattan[i] = data[i]["Towards.Manhattan"]; toBrooklyn[i] = data[i]["Towards.Brooklyn"]; weatherSummary[i] = data[i].weather_summary; temperature[i] = data[i].temperature; precipitation[i] = data[i].precipitation; events[i] = data[i].events; } return { data_set_name: "# of crosses", fullSet: data, dates: dates, people: people, toManhattan: toManhattan, toBrooklyn: toBrooklyn, weatherSummary: weatherSummary, temperature: temperature, precipitation: precipitation, events: events } }; 35:[] 30:{"id":"940279d8e7ede2c2","slug":"a-great-cliche","title":"Brooklyn Bridge SVG Design","thumbnail":"332d704f92ecf6a18c50a05165784a5a0a82944d7a2a45fe6d464a29eaa21975","access_level":"public","create_time":"$D2019-02-24T15:41:49.105Z","update_time":"$D2019-09-15T17:42:27.741Z","view_time":null,"first_public_time":"$D2019-02-26T19:32:25.453Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1a20d070aebdd446","login":"aaronbrezel","name":"Aaron Brezel","avatar_url":"https://avatars-next.observableusercontent.com/271966d22b470a0afb53d6e4687a34d2838f5cbcb661b84120ef9c55b6d0f84d","tier":"starter_2024","bio":""},"version":464,"publish_version":464,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e6e492ae182d366","login":"aaronbrezel","name":"Aaron Brezel","avatar_url":"https://avatars-next.observableusercontent.com/271966d22b470a0afb53d6e4687a34d2838f5cbcb661b84120ef9c55b6d0f84d","tier":null,"bio":""}],"members":[{"type":"individual","id":"5e6e492ae182d366","login":"aaronbrezel","name":"Aaron Brezel","avatar_url":"https://avatars-next.observableusercontent.com/271966d22b470a0afb53d6e4687a34d2838f5cbcb661b84120ef9c55b6d0f84d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Brooklyn Bridge SVG Design","cells":[{"id":0,"value":"md`# Brooklyn Bridge SVG Design`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"viewof change = html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"{\n change; // wait for button click\n chart.update()\n return change;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"SVGheight = 640;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"SVGwidth = 1280;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"width = SVGwidth - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"height = SVGheight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"height2 = SVGheight - margin2.top - margin2.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"margin = ({top: 20, right: 20, bottom: 110, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"margin2 = ({top: 510, right: 20, bottom: 10, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"x = d3.scaleTime()\n .domain(d3.extent(dataSet.dates))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(dataSet.people)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width/100).tickSizeOuter(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"xAxis2 = g => g\n .attr(\"transform\", `translate(0,${height - margin2.bottom})`)\n .call(d3.axisBottom(x).ticks(width/100).tickSizeOuter(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"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(dataSet.data_set_name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"brush = d3.brushX()\n .extent([[0,0], [width, height2]])\n .on(\"brush end\", brushed);\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"zoom = d3.zoom()\n .scaleExtent([1, Infinity])\n .translateExtent([[0, 0], [width, height]])\n .extent([[0, 0], [width, height]])\n .on(\"zoom\", zoomed);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x(d => x(d.hour_beginning))\n .y(d => y(d.Pedestrians))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":" date = d3.timeParse(\"%m/%d/%Y %I:%M:%S %p\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"