30:T30ba,html` `31: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(); }32: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 } }; 33:[] 2e:{"title":"Brooklyn Bridge SVG Design","cells":[{"id":0,"value":"md`# Brooklyn Bridge SVG Design`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"viewof change = html` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"{\n change; // wait for button click\n chart.update()\n return change;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"SVGheight = 640;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"SVGwidth = 1280;","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"width = SVGwidth - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"height = SVGheight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"height2 = SVGheight - margin2.top - margin2.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"margin = ({top: 20, right: 20, bottom: 110, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"margin2 = ({top: 510, right: 20, bottom: 10, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":442,"value":"brush = d3.brushX()\n .extent([[0,0], [width, height2]])\n .on(\"brush end\", brushed);\n ","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":245,"value":" date = d3.timeParse(\"%m/%d/%Y %I:%M:%S %p\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}