31:T1b77,chart = { const chartGraph = DOM.svg(SVGwidth, SVGheight) const svg = d3.select(chartGraph) const focus = svg.append("g") .attr("class", "focus") .attr("transform", `translate(${margin.left},${margin.top})`) const yAxisLabel = svg.append("text") .attr("class", "ylabel") .text("# of crossing per hour") .attr("x", `${margin.left-60}`) .attr("y", `${margin.top+250}`) .attr("transform", function(){ return `rotate(270)` }); //Rotate doesn't seem to work the same? Why does nothing work normally in d3? const hourlySummary = svg.append("g").attr("class", "infoBox").attr("transform", `translate(${margin.left+550},${margin.top+20})`) // hourlySummary.append("rect") // .attr("width", "100%") // .attr("height", "100%") // .attr("fill", "grey"); var summaryHeader = hourlySummary.append("text") .attr("class", "info") .style("font-size", "24px") .text(`Hourly Summary`); var time = hourlySummary.append("text") .attr("id", "time") .attr("transform", `translate(0,24)`) .style("font-size", "16px") .text(`Time: N/A`); var totalCrossings = hourlySummary.append("text") .attr("id", "totalCrossings") .attr("transform", `translate(0,40)`) .style("font-size", "16px") .text(`Total crossings in the hour: N/A`); var towardsManhattan = hourlySummary.append("text") .attr("id", "towardsManhattan") .attr("transform", `translate(0,56)`) .style("font-size", "16px") .text(`Towards Manhattan: N/A`); var towardsBrooklyn = hourlySummary.append("text") .attr("id", "towardsBrooklyn") .attr("transform", `translate(0,72)`) .style("font-size", "16px") .text(`Towards Brooklyn: N/A`); var weatherSummary = hourlySummary.append("text") .attr("id", "weatherSummary") .attr("transform", `translate(0,88)`) .style("font-size", "16px") .text(`Weather: N/A`); var temperature = hourlySummary.append("text") .attr("id", "temperature") .attr("transform", `translate(0,104)`) .style("font-size", "16px") .text(`Temperature: N/A`); const focusCanvas = focus.append('rect') .style("visibility", "hidden") .attr("transform", `translate(${margin.left},${margin.top})`); const context = svg.append("g") .attr("class", "context") .attr("transform", `translate(${margin2.left},${margin2.top})`); const title = svg.append("text") .attr("class", "title") .attr("transform", `translate(${margin.right+30},${margin.top+30})`) .style("font-size", "48px") .text(`${crossings}`); focus.append("clipPath") .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height) focus.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "green") .attr("class", "total line") .attr("stroke-width", 1.5) .attr("d", line) .attr("clip-path","url(#clip)") focus.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height})`) .call(xAxis); focus.append("g") .attr("class", "axis axis--y") .call(yAxis); context.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "green") .attr("class", "total line") .attr("stroke-width", 1.5) .attr("d", line2) context.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0,${height2})`) .call(xAxis2); focus.append("path") .attr("fill", "none") .attr("stroke", "grey") .attr("opacity", 0.5) .attr("class", "manhattan focusLine") .attr("stroke-width", 1.5) .attr("d", lineManhattan(data)) .attr("clip-path","url(#clip)") focus.append("path") .attr("fill", "none") .attr("stroke", "grey") .attr("opacity", 0.5) .attr("class", "brooklyn focusLine") .attr("stroke-width", 1.5) .attr("d", lineBrooklyn(data)) .attr("clip-path","url(#clip)") context.append("path") .attr("fill", "none") .attr("opacity", 0.5) .attr("stroke", "grey") .attr("class", "manhattan line") .attr("stroke-width", 1.5) .attr("d", lineManhattan2(data)) .attr("clip-path","url(#clip)") context.append("path") .attr("fill", "none") .attr("opacity", 0.5) .attr("stroke", "grey") .attr("class", "brooklyn line") .attr("stroke-width", 1.5) .attr("d", lineBrooklyn2(data)) .attr("clip-path","url(#clip)") context.append("g") .attr("class", "brush") svg.node().update = () => { if (crossings == "Total Crossings") { svg.selectAll(".total").attr("stroke", "green"); svg.selectAll(".brooklyn").attr("stroke", "grey"); svg.selectAll(".manhattan").attr("stroke", "grey"); } if (crossings == "Manhattan and Brooklyn"){ svg.selectAll(".total").attr("stroke", "grey"); svg.selectAll(".brooklyn").attr("stroke", "blue"); svg.selectAll(".manhattan").attr("stroke", "orange"); } if (crossings == "To Manhattan") { svg.selectAll(".total").attr("stroke", "grey"); svg.selectAll(".brooklyn").attr("stroke", "grey"); svg.selectAll(".manhattan").attr("stroke", "orange"); } if (crossings == "To Brooklyn") { svg.selectAll(".total").attr("stroke", "grey"); svg.selectAll(".brooklyn").attr("stroke", "blue"); svg.selectAll(".manhattan").attr("stroke", "grey"); } context.append("g") .attr("class", "brush") focus.append("rect") // .style("visibility","hidden") .attr("background-color", "transparent") .attr("opacity", "0") .attr("class", "hover-box") .attr("width", width) .attr("height", height) .on("mousemove", function() { const crossing_package = bisect(d3.mouse(this)[0]); addCirlcles(`${crossings}`, crossing_package, focus) const tooltip_package = buildTooltip(`${crossings}`, crossing_package, hourlySummary) infoBox.update(tooltip_package); // tooltip.attr("transform", `translate(${x(crossing_package.hour_beginning)},${y(crossing_package.Pedestrians)}`) //console.log(crossing_package.hour_beginning) }) }; return chartGraph; }32:T1659,md ` The initial goal of our assignment 4 project was to take the [Brooklyn Bridge pedestrian data set](https://data.cityofnewyork.us/Transportation/Brooklyn-Bridge-Automated-Pedestrian-Counts-Demons/6fi9-q3ta) and interpret it as an animation. We wanted to create an svg image of the Brooklyn Bridge and use d3 to send colored dots across the image to represent pedestrians. One color would represent people walking toward Manhattan. Another color would represent those headed towards Brooklyn. We spent the first week of assignment 4 just creating the image of the Brooklyn Bridge which you can view as figure 1 below. Once the image was completed, we realized that we still did not have an effective way for the user to index through each of 7296 hourly data points from 12:00 am Oct. 1, 2017, to 11:00 pm July 31, 2018. Our solution was to also create an interactive graph that allowed the user to select a data point with a simple mouse-over. We decided the best option was a line graph with a brushable context graph right below. We took elements with much thanks from [this](https://observablehq.com/@john-clarke/programmatically-control-a-d3-brush) graph by John Clarke at Cornerstone Systems Northwest, Inc. Unfortunately, it slowly became apparent that completing both the indexing graph and the bridge animation was too much to accomplish. The learning curve for the d3 javaScript library and Observable ate up a significant portion of the second week's effort. It took a long time to develop an instinct for how to interact with the document-object model in Observable. This can be attributed to the fact that our previous javaScript experience had been exclusive to a HTML/JS/CSS setup. With time running short, we had to focus on making the index graph as intuitive and functionally complete as possible. One last-minute deviation we made was adjusting the way users could select and view each graph filter. At first, users had to select "Total Crossings," "Manhattan Only" and the other options from a drop-down menu. With only four options to select from, it made much more sense to use radio buttons. This way, users could see exactly what options they could pick from. In addition, instead of only showing the one or two of the graph lines at a time, we decided to show all three lines all of the time. Rather than removing unselected lines, we grey-ed them out. We believe this maintains user focus on the right information without sacrificing context. An example of the former graph is viewable as figure 2. Aaron and Aditi primarily worked on creating the Brooklyn Bridge SVG. Aaron, Aditi, Mythili and Tristan all worked on the d3 graphic. Tristan was responsible for running the usability tests. #### Fig. 1: The original Brooklyn Bridge SVG

#### Fig. 2: An example of the graph without the grey underlay. In this case, the graph only shows pedestrian counts heading towards Brooklyn.

### Usability testing For the usability testing, we had 3 subjects interact with no knowledge of the visualization beforehand, as well as the testing that was done in class. Most of the feedback was centred at the actual way that the subjects were to interact with the visualization: though we included instructions on how to select a smaller time frame with the lower graph, many people either did not read these directions or found the process unintuitive, and two of the three subjects did not figure it out on their own. Subjects were also confused about which color denoted which object, and what the difference between the “total” option and the “Manhattan and Brooklyn” option was. The use of the word “pedestrians” also confused one of the subjects, as they felt it was not specific enough, and asked whether it included those on bikes or other forms of technically more mobile transportation. Subjects also had trouble picking out specific days they wanted to see with the click and drag on the lower graph, and clicking on the upper graph was easy, but difficult if the goal was to find a specific hour of the day. Were we given another week, in addition to adding the animation we would most likely need to add clarifying features, such as a key, more robust directions, and the ability to zoom better or further. We would have also liked to add a way for the user to select for specific ordinal designations. For example, we could have found a way to highlight hours where the temperature was above a certain threshold. This could apply to any column of our data set, be it rush-hour times, cloudy days, major holidays, etc. #### Resources * Brooklyn Bridge pedestrian data set from [NYC Open Data](https://data.cityofnewyork.us/Transportation/Brooklyn-Bridge-Automated-Pedestrian-Counts-Demons/6fi9-q3ta) * Brushable graph from John Clarke on [Observable](https://observablehq.com/@john-clarke/programmatically-control-a-d3-brush) * Line chart with tooltip for pulling data on graph mouseover from Mike Bostock on [Observable](https://observablehq.com/@d3/line-chart-with-tooltip) `33:Tc7b,infoBox = { const info = DOM.svg(1000, 200) const svg = d3.select(info) const title = svg.append("text") .attr("class", "title") .attr("transform", `translate(${margin.right},${margin.top+30})`) .style("font-size", "24px") .text(`Hourly Summary`); var time = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+80})`) .style("font-size", "16px") .text(`Time: N/A`); var totalCrossings = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+96})`) .style("font-size", "16px") .text(`Total crossings in the hour: N/A`); var towardsManhattan = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+112})`) .style("font-size", "16px") .text(`Towards Manhattan: N/A`); var towardsBrooklyn = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+128})`) .style("font-size", "16px") .text(`Towards Brooklyn: N/A`); var weatherSummary = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+144})`) .style("font-size", "16px") .text(`Weather: N/A`); var temperature = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+160})`) .style("font-size", "16px") .text(`Temperature: N/A`); svg.node().update = (tooltip_package) => { var dateDate = new Date(`${tooltip_package[0]}`) var stringDate = dateToString(dateDate) svg.selectAll(".info").remove(); time = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+80})`) .style("font-size", "16px") .text(`Time: ${stringDate} ${tooltip_package[4]}`); totalCrossings = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+96})`) .style("font-size", "16px") .text(`Total crossings in the hour: ${tooltip_package[1]}`); var towardsManhattan = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+112})`) .style("font-size", "16px") .text(`Towards Manhattan: ${tooltip_package[3]}`); var towardsBrooklyn = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+128})`) .style("font-size", "16px") .text(`Towards Brooklyn: ${tooltip_package[2]}`); var weatherSummary = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+144})`) .style("font-size", "16px") .text(`Weather: ${tooltip_package[6]}`); var temperature = svg.append("text") .attr("class", "info") .attr("transform", `translate(${margin.right},${margin.top+160})`) .style("font-size", "16px") .text(`Temperature: ${tooltip_package[5]} degrees Fahrenheit`); } return info }34:T6ca,function addCirlcles(crossing, data, focus) { focus.selectAll(".tooltipCircles").remove(); focus.selectAll(".tooltipLines").remove(); const circles = focus.append("g"); // const dashed = focus.append("g"); // dashed.append("line").attr("class","tooltipLines") // .style("stroke-dasharray", "4,4") // .attr("x1", `${x(data.hour_beginning)}`) // .attr("x2", `${x(data.hour_beginning)}`) // .attr("y1", 200) // .attr("y2", 0) if (crossings == "Total Crossings") { circles.append("circle") .attr("class","tooltipCircles") .attr("cx", `${x(data.hour_beginning)}`) .attr("cy", `${y(data.Pedestrians)}`) .attr("r", 5) .style("fill", "green"); } if (crossings == "Manhattan and Brooklyn"){ circles.append("circle") .attr("class","tooltipCircles") .attr("cx", `${x(data.hour_beginning)}`) .attr("cy", `${y(data['Towards.Manhattan'])}`) .attr("r", 5) .style("fill", "orange"); circles.append("circle") .attr("class","tooltipCircles") .attr("cx", `${x(data.hour_beginning)}`) .attr("cy", `${y(data['Towards.Brooklyn'])}`) .attr("r", 5) .style("fill", "blue"); } if (crossings == "To Manhattan") { circles.append("circle") .attr("class","tooltipCircles") .attr("cx", `${x(data.hour_beginning)}`) .attr("cy", `${y(data['Towards.Manhattan'])}`) .attr("r", 5) .style("fill", "orange"); } if (crossings == "To Brooklyn") { circles.append("circle") .attr("class","tooltipCircles") .attr("cx", `${x(data.hour_beginning)}`) .attr("cy", `${y(data['Towards.Brooklyn'])}`) .attr("r", 5) .style("fill", "blue"); } return 1 }35:[] 2f:{"title":"Eleven months of Brooklyn Bridge pedestrian crossings by hour","cells":[{"id":0,"value":"md`# Eleven months of Brooklyn Bridge pedestrian crossings by hour`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof crossings = radio({\n title: 'Crossing type',\n description: 'Highlight specific lines in the graph. Click and drag on the smaller of the two graphs below to zoom in.',\n options: [\n { label: 'Total Crossings', value: 'Total Crossings' },\n { label: 'Manhattan and Brooklyn', value: 'Manhattan and Brooklyn' },\n { label: 'Brooklyn only', value: 'To Brooklyn' },\n { label: 'Manhattan only', value: 'To Manhattan' },\n ],\n value: 'Total Crossings'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`# Official interactive graph ends here`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`## Writeup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`## End of writeup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function buildTooltip(crossing, data, hourlySummary) {\n var dateDate = new Date(data.hour_beginning);\n var stringDate = dateToString(dateDate);\n hourlySummary.select(\"#time\").text(`Time: ${stringDate} ${data.events}`);\n hourlySummary.select(\"#totalCrossings\").text(`Total crossings at that hour: ${data.Pedestrians}`);\n hourlySummary.select(\"#towardsManhattan\").text(`Towards Manhattan: ${data[\"Towards.Manhattan\"]}`);\n hourlySummary.select(\"#towardsBrooklyn\").text(`Towards Brooklyn: ${data[\"Towards.Brooklyn\"]}`);\n hourlySummary.select(\"#weatherSummary\").text(`Weather: ${data.weather_summary}`);\n hourlySummary.select(\"#temperature\").text(`Temperature: ${data.temperature} degrees Fahrenheit`);\n \n const tooltip_package = [data.hour_beginning, data.Pedestrians, data[\"Towards.Brooklyn\"], data[\"Towards.Manhattan\"], data.events, data.temperature, data.weather_summary];\n \n return tooltip_package\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"bisect = {\n const bisect = d3.bisector(d => d.hour_beginning).left;\n return mx => {\n const hour = x.invert(mx);\n \n const index = bisect(time_parse_data, hour, 1);\n const a = time_parse_data[index - 1];\n const b = time_parse_data[index];\n return hour - a.hour_beginning > b.hour_beginning - hour ? a : b;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"{\n crossings;\n chart.update(crossings);\n //infoBox.update(crossings);\n return crossings\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"SVGheight = 640;","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"SVGwidth = 1000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"margin = ({top: 20, right: 40, bottom: 150, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"margin2 = ({top: 510, right: 40, bottom: 20, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"width = SVGwidth - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"height = SVGheight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"height2 = SVGheight - margin2.top - margin2.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"x = d3.scaleTime()\n .range([0, width])\n .domain(d3.extent(data.map(d => date(d.hour_beginning))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"y = d3.scaleLinear().range([height, 0]).domain([0, d3.max(time_parse_data.map(d => d.Pedestrians))])","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"x2 = d3.scaleTime()\n.range([0, width])\n.domain(x.domain())","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"y2 = d3.scaleLinear().range([height2, 0]).domain(y.domain())","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"xAxis = d3.axisBottom(x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"xAxis2 = d3.axisBottom(x2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"yAxis = d3.axisLeft(y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"line = d3.line()\n .x(d => x(date(d.hour_beginning)))\n .y(d => y(d.Pedestrians))","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"line2 = d3.line()\n .x(d => x2(date(d.hour_beginning)))\n .y(d => y2(d.Pedestrians))","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"lineManhattan = d3.line()\n .x(d => x(date(d.hour_beginning)))\n .y(d => y(d[\"Towards.Manhattan\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"lineManhattan2 = d3.line()\n .x(d => x2(date(d.hour_beginning)))\n .y(d => y2(d[\"Towards.Manhattan\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"lineBrooklyn = d3.line()\n .x(d => x(date(d.hour_beginning)))\n .y(d => y(d[\"Towards.Brooklyn\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"lineBrooklyn2 = d3.line()\n .x(d => x2(date(d.hour_beginning)))\n .y(d => y2(d[\"Towards.Brooklyn\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"brush = {\n function brushed() {\n d3.select(chart).select(\".tooltipCircles\").remove()\n d3.select(chart).select(\".tooltip\").remove()\n let extent = d3.event.selection.map(x2.invert, x2);\n x.domain(extent);\n \n d3.select(chart).select(\".line\").attr(\"d\", line);\n d3.select(chart).select(\".brooklyn\").attr(\"d\", lineBrooklyn(data));\n d3.select(chart).select(\".manhattan\").attr(\"d\", lineManhattan(data));\n \n d3.select(chart).select(\".axis--x\").call(xAxis);\n }\n const brush = d3.brushX(x2).on(\"brush\", brushed);\n const brushG = d3.select(chart).select('.brush');\n brushG.call(brush);\n return brush;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":" date = d3.timeParse(\"%m/%d/%Y %I:%M:%S %p\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"dateToString = d3.timeFormat(\"%I %p on %a %b %d, %Y\");\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"data = d3.json(\"https://raw.githubusercontent.com/aaronbrezel/Brooklyn_Bridge/master/brooklyn_bridge_pedestrians_json.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"time_parse_data = {\n const data = await d3.json(\"https://raw.githubusercontent.com/aaronbrezel/Brooklyn_Bridge/master/brooklyn_bridge_pedestrians_json.json\")\n \n for (var i = 0; i < data.length; i++){\n data[i]['hour_beginning'] = date(data[i]['hour_beginning'])\n }\n \n return data\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}