31:T1f02,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*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:[] 2f:{"title":"Assignment 3 - Part 2 with Horizontal Bars","cells":[{"id":0,"value":"md`# Assignment 3 - Part 2 with Horizontal Bars\n#### Forked - D3 Calendar View\n\nThis chart shows daily number of accidents since 2012 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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"md` This is based on Mike Bostock's D3 Calendar Visualization: https://beta.observablehq.com/@mbostock/d3-calendar-view`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"chosen_date = \"2017-05-13\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":922,"value":"df = dfjs.DataFrame.fromCSV('https://gist.githubusercontent.com/alaapsivaram/ddfbed720e9e420aa27b3ba49f4dc508/raw/d4753194a77525f7724a2f1b2aa40e0c1bc7887a/NYPD_Collisions_by_cause_2.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":400,"value":"html`\n\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"chosen_year = 2013 + (value / 20) | 0","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":206,"value":"viewof weekday = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"$31","pinned":true,"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":true,"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":true,"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":43,"value":"","pinned":true,"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":477,"value":"md` ## Part 2 attempt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"// md` # Drill down attempt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"data2 = d3.csv(\"https://gist.githubusercontent.com/alaapsivaram/ddfbed720e9e420aa27b3ba49f4dc508/raw/d4753194a77525f7724a2f1b2aa40e0c1bc7887a/NYPD_Collisions_by_cause_2.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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"reasonNested = d3.nest()\n .key(d => d.reason)\n .entries(data2)\n .reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"ds = new Series([1, 2, 3, 4], {name: 'My test name', index: [2, 3, 4, 5]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"color2 = d3.scaleSequential(d3.interpolatePiYG).domain([-150, 300])","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"margin = ({top: 30, right: 0, bottom: 10, left: 200})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}