31:T1f04,chart = { const years = d3.nest() .key(d => d.date.getFullYear()) .entries(data) .reverse(); var dataFiltered = years.filter(function (d) { return d.key === chosen_year.toString() }) // console.log(dataFiltered); // console.log(chosen_year); var selectedDate = null; var selectReason = null; var filteredDf; function updateFilteredDf() { var df2 = df.filter(row => row.get('year') == chosen_year.toString()); if (selectedDate != null) df2=df2.filter(row => row.get('date') == selectedDate); if (selectReason != null) df2=df2.filter(row => row.get('reason') == selectReason); // console.log(df2.dim()); filteredDf = df2; // console.log(filteredDf.dim()); } updateFilteredDf(); // console.log(); function getReasonData() { return filteredDf.groupBy('reason') .aggregate(group => group.stat.sum('value')) .rename('aggregation', 'value') .sortBy('value', true) .toCollection(); } function getCalendarData() { return filteredDf.groupBy('date') .aggregate(group => group.stat.sum('value')) .rename('aggregation', 'value') .map(function(row) { var dt = new Date(row.get('date')); dt.setUTCHours(12); return row.set('date', dt); }) .toCollection(); } // var drawCalendarCallback; // var drawBarCallaback; var redrawAll; var y; function drawBars() { svg.selectAll(".bar").remove() var reasonDf = getReasonData(); console.log(reasonDf); var x = d3.scaleLinear() .domain([0, d3.max(reasonDf, d => d.value*1.1)]) .range([margin.left, width - margin.right]) var xAxis = g => g .attr("transform", `translate(0,280)`) .call(d3.axisTop(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) if (selectReason == null) y = d3.scaleBand() .domain(reasonDf.map(d => d.reason)) .range([30, 490]) .padding(0.1) var yAxis = g => g .attr("transform", `translate(${margin.left},250)`) .call(d3.axisLeft(y).tickSizeOuter(0)) // console.log(df.reason) // console.log("aaa"); // console.log(selectedDate); // console.log("aaa"); // console.log("aaa2"); // console.log(reasonDf); svg.append("g") .attr("fill", "steelblue") .attr("class","bar") .selectAll("rect") .data(reasonDf) .enter().append("rect") .attr("x", x(0)) .attr("y", d => y(d.reason) + 250) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()) .on('click', function(d) { // console.log(d); if (selectReason == d.reason) { selectReason = null; } else { selectReason = d.reason; selectedDate = null; } updateFilteredDf(); redrawAll(); // drawBarCallaback() }); svg.append("g") .attr("fill", "white") .attr("class","bar") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("text") .data(reasonDf) .enter().append("text") .attr("x", d => x(d.value) - 4) .attr("y", d => y(d.reason) + 250 + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.value); svg.append("g") .attr("class","bar") .call(xAxis); svg.append("g") .attr("class","bar") .call(yAxis); } // const years = [2016]; // var chosen_date = "2017-05-13"; // var dataFiltered2 = nested.filter(function (d) { return d.key === chosen_date }); const svg = d3.select(DOM.svg(width, height + 300)) .style("font", "10px sans-serif") .style("width", "100%") .style("height", "auto"); // console.log("DF: ", dataFiltered); // console.log(years); // console.log("DF:: ", dataFiltered); function drawCalendar() { svg.selectAll(".bar").remove(); svg.selectAll(".calendar").remove(); var calCollection = getCalendarData(); var calendarData = [{key: chosen_year, values: calCollection}]; console.log("C: ", calendarData); var maxVal = d3.max(calCollection, d => d.value); var color = d3.scaleSequential(d3.interpolatePiYG).domain([-1.3*maxVal, 1.6*maxVal]) const year = svg.selectAll("g") .data(calendarData) .enter().append("g") .attr("class","calendar") .attr("transform", (d, i) => `translate(40,${height * i + cellSize * 1.5})`); year.append("text") .attr("class","calendar") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(d => d.key); year.append("g") .attr("text-anchor", "end") .attr("class","calendar") .selectAll("text") .data((weekday === "weekday" ? d3.range(2, 7) : d3.range(7)).map(i => new Date(chosen_year, 0, i))) .enter().append("text") .attr("x", -5) .attr("y", d => (countDay(d) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); // var chosen_date = "2017-03-01"; // var dataFiltered3 = nested.filter(function (d) { return d.key === chosen_date })[0].values; // console.log("DF3: ", dataFiltered3); year.append("g") .attr("class","calendar") .selectAll("rect") .data(d => d.values) .enter().append("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", d => timeWeek.count(d3.timeYear(d.date), d.date) * cellSize + 0.5) .attr("y", d => countDay(d.date) * cellSize + 0.5) .attr("fill", d => color(-1 * d.value)) .on('click', function(d) { console.log("Chosen date: ", formatDate(d.date)); var b = formatDate(d.date); var a = b.split("/") if (parseInt(a[0]) < 10) { a[0] = "0" + a[0]; } if (parseInt(a[1]) < 10) { a[1] = "0" + a[1]; } var chosen_date = a[2] + "-" + a[0] + "-" + a[1] console.log("chosen_date: ", chosen_date); // dataFiltered3 = nested.filter(function (d) { return d.key === chosen_date }); // console.log(dataFiltered3); // drawBars(dataFiltered3[0].values); // selectedDate = chosen_date; // selectReason = null; if (selectedDate == chosen_date) { selectedDate = null; } else { selectedDate = chosen_date; selectReason = null; } updateFilteredDf(); // redrawAll(); drawBars(); // chosen_date = b; }) .append("title") .text(d => `${formatDate(d.date)}: ${d.value}`); const month = year.append("g") .attr("class","calendar") .selectAll("g") .data(d => d3.timeMonths(d3.timeMonth(d.values[0].date), d.values[d.values.length - 1].date)) .enter().append("g"); month.filter((d, i) => i).append("path") .attr("class","calendar") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("class","calendar") .attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); } // drawCalendarCallback = drawCalendar; // drawBarCallaback = drawBars; redrawAll = function() { drawCalendar(); drawBars(); } redrawAll(); // var dataFiltered2 = nested.filter(function (d) { return d.key === "2017-02-02" })[0].values; // console.log("DF33: ", dataFiltered3); // drawBars() return svg.node(); }32:Teb9,md` 1. Design Decisions: As we wanted to capture the entire data with respect to the seasonality, we decided to go ahead with a calendar chart containing all days in a year. We wanted to capture the causes of these accidents and draw inferences as to if a particular reason peaks on certain days (e.g. alcohol involvement on New Year’s Eve or St. Patrick’s day; slippery roads during winter days etc.). As we needed a comparison between the number of accidents that happened because of different reasons, we decided to use a bar chart. The dataset contains around 60 different causes of accidents, which is difficult to compare between, especially when most have a negligible number of records under them. So we have shown only the top 8 causes of accidents and visualized the comparison between them by means of a horizontal bar chart. Along with showing the top reasons for accidents recorded on a particular day, we also wanted to show the distribution of accidents occurring in a year due to a particular reason. So we developed a coordinated visualization where clicking a square on the calendar gives the top reason for accidents during that date, and clicking on a reason on the bar chart updates the calendar grid with the corresponding number of accidents that occurred due of such reason. Also, clicking on a currently selected square/bar clears the existing selection. Since the calendar shows the days for a given year, a slide bar allows the user to pick any year from 2013 to 2018. 2. Procedure: Developed a static Calendar chart visualization using d3.js Added scrollbar to scroll through years 2013 to 2018 instead of just rendering visualizations for all the years on a single page Added interactivity to render a comparison of top 8 contributing factors using horizontal bar charts on clicking a particular day from the calendar chart Added coordinate visualization to render distribution of accidents in the year that occurred because of a reason selected from the bar chart 3. Alternative Designs: The dataset has latitudes/longitudes and boroughs as columns, so a choropleth map/heatmap was the obvious choice for visualization, but we wanted to capture the seasonality of the causes of accidents and find related trends, which wouldn’t be possible using map visualization, so we used a calendar chart instead that would help visualize number of accidents that occurred each day. Similarly, for a comparison of reasons, we first thought of using vertical bar charts, but then we soon realized that the labels overlapped. So we decided to represent the comparisons using a horizontal bar chart where labels won’t overlap if a sufficiently large margin is set. 5. Technical and Design Challenges: To begin with, instead of using vertical bar charts where labels overlapped, we shifted to using horizontal bar charts, where setting a large enough margin averts this issue. In addition to this, not enough documentation was available online regarding passing values between variables to achieve interactivity, so a lot of trial-and-error had to be done. As Observable needs data to be in CSV format, we had to export data from crosstab in Tableau to Excel as CSV which is a very time-consuming affair. We later realized that copying the crosstab and then copying it to an excel sheet achieves the same. To make the data processing and aggregation tasks easier, we used a library called dataframe-js. When uploading files, we ran into authorization issues with Google Drive while trying to upload the data, so we shifted to Github Gist instead. Resources Used https://beta.observablehq.com/@mbostock/d3-calendar-view https://beta.observablehq.com/@mbostock/d3-bar-chart https://beta.observablehq.com/@mbostock/d3-horizontal-bar-chart `33:[] 2f:{"title":"Assignment 3 - Part 2","cells":[{"id":0,"value":"md`# Assignment 3 - Part 2\n#### Forked - D3 Calendar View\n\nAlaap Sivaram (as5446),\nAsha Elza Jacob (aj2782),\nBenjamin Welkie (bpw2114),\nFelipe Rocha (flt2107)\n\nThis chart shows daily number of accidents since 2013 in New York City. Days with higher number of accidents are shaded with darker shades of pink and with lesser number of accidents are shaded with lighter shades\n\nWe can move through the years (2013 to 2018) using the scroll bar. On clicking a particular cell (certain day of the year), a horizontal bar chart representing the top 8 reasons accidents occured for that day, is rendered. Furthermore, on clicking a particular bar (certain reason), a calendar view of the distribution of all accidents that year corresponding to that reason is rendered. You can also change the order of the days in the calendar from Sunday-Saturday or Monday-Sunday using the drop down provided.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"html`\n\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof weekday = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"chosen_year = 2013 + (value / 20) | 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"chosen_date = \"2017-05-13\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"df = dfjs.DataFrame.fromCSV('https://gist.githubusercontent.com/ashjacs7/55b5820f397bb835548b0c85bd5facec/raw/4522b087abfa182fb453ff83f955aabe0152c543/data_all_years.csv').then(df => df.map(row => row.set('year', row.get('date').substring(0,4))) )\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"df.show()","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"dataFiltered2 = nested.filter(function (d) { return d.key === \"2017-02-02\" })[0].values","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"cellSize = 17","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"width = 964","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"// height = cellSize * (weekday === \"weekday\" ? 7 : 9) \nheight = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"timeWeek = weekday === \"sunday\" ? d3.timeSunday : d3.timeMonday","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"countDay = weekday === \"sunday\" ? d => d.getDay() : d => (d.getDay() + 6) % 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"function pathMonth(t) {\n const n = weekday === \"weekday\" ? 5 : 7;\n const d = Math.max(0, Math.min(n, countDay(t)));\n const w = timeWeek.count(d3.timeYear(t), t);\n return `${d === 0 ? `M${w * cellSize},0`\n : d === n ? `M${(w + 1) * cellSize},0`\n : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${n * cellSize}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"format = d3.format(\"+.2%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"formatDate = d3.timeFormat(\"%x\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"formatDay = d => \"SMTWTFS\"[d.getDay()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"formatMonth = d3.timeFormat(\"%b\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = d3.csv(\"https://gist.githubusercontent.com/alaapsivaram/9d22d2996c8d9611e8372e0aca3ffc66/raw/516863da3255e0219625d23ffb1f3de52ed512d5/Accidents_by_day_4.csv\").then(\n function(data) {\n data.forEach(function(d) {\n d[\"value\"] = +d[\"value\"];\n var date_t = new Date(d[\"date\"]);\n date_t.setDate(date_t.getDate() + 1)\n d[\"date\"] = date_t\n });\n return data;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"data2 = \nd3.csv(\"https://gist.githubusercontent.com/ashjacs7/55b5820f397bb835548b0c85bd5facec/raw/4522b087abfa182fb453ff83f955aabe0152c543/data_all_years.csv\").then(\n function(data) {\n data.forEach(function(d) {\n d[\"value\"] = +d[\"value\"];\n var date_t = new Date(d[\"date\"]);\n date_t.setDate(date_t.getDate() + 1)\n d[\"date\"] = date_t\n });\n return data;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"nested = d3.nest()\n .key(d => d.date.toISOString().slice(0,10))\n .entries(data2)\n .reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"reasonNested = d3.nest()\n .key(d => d.reason)\n .entries(data2)\n .reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"color2 = d3.scaleSequential(d3.interpolatePiYG).domain([-150, 300])","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"y = d3.scaleBand()\n .domain(data2.map(d => d.reason))\n .range([30, 490])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"margin = ({top: 30, right: 0, bottom: 10, left: 200})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}