31:T7c2,chart = { const years = d3.nest() .key(d => d.date.getFullYear()) .entries(data) .reverse(); const svg = d3.select(DOM.svg(width, height * years.length)) .style("font", "10px sans-serif") .style("width", "100%") .style("height", "auto"); const year = svg.selectAll("g") .data(years) .enter().append("g") .attr("transform", (d, i) => `translate(40,${height * i + cellSize * 1.5})`); year.append("text") .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") .selectAll("text") .data((weekday === "weekday" ? d3.range(2, 7) : d3.range(7)).map(i => new Date(2017, 0, i))) .enter().append("text") .attr("x", -5) .attr("y", d => (countDay(d) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); year.append("g") .selectAll("rect") .on('click', datum => { console.log(datum); // the datum for the clicked circle }) .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)) .append("title") .text(d => `${formatDate(d.date)}: ${d.value}`); const month = year.append("g") .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("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return svg.node(); }32:T8bd,chart_try = { const years = d3.nest() .key(d => d.date.getFullYear()) .entries(data) .reverse(); // const years = [2016]; const svg = d3.select(DOM.svg(width, height)) .style("font", "10px sans-serif") .style("width", "100%") .style("height", "auto"); var dataFiltered = years.filter(function (d) { return d.key === chosen_year.toString() }) console.log("DF: ", dataFiltered); // console.log(years); // console.log(dataFiltered); const year = svg.selectAll("g") .data(dataFiltered) .enter().append("g") .attr("transform", (d, i) => `translate(40,${height * i + cellSize * 1.5})`); year.append("text") .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") .selectAll("text") .data((weekday === "weekday" ? d3.range(2, 7) : d3.range(7)).map(i => new Date(2017, 0, i))) .enter().append("text") .attr("x", -5) .attr("y", d => (countDay(d) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); year.append("g") .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(formatDate(d.date)); var chosen_date = formatDate(d.date); }) .append("title") .text(d => `${formatDate(d.date)}: ${d.value}`); const month = year.append("g") .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("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return svg.node(); }33:T89c,chart2 = { const years = d3.nest() .key(d => d.date.getFullYear()) .entries(data2) .reverse(); // const years = [2016]; const svg = d3.select(DOM.svg(width, height)) .style("font", "10px sans-serif") .style("width", "100%") .style("height", "auto"); var dataFiltered = years.filter(function (d) { return d.key === chosen_year2.toString() }) // console.log(years); // console.log(dataFiltered); const year = svg.selectAll("g") .data(dataFiltered) .enter().append("g") .attr("transform", (d, i) => `translate(40,${height * i + cellSize * 1.5})`); year.append("text") .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") .selectAll("text") .data((weekday === "weekday" ? d3.range(2, 7) : d3.range(7)).map(i => new Date(2017, 0, i))) .enter().append("text") .attr("x", -5) .attr("y", d => (countDay(d) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); year.append("g") .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 => color2(-1 * d.value)) .on('click', function(d) { console.log(formatDate(d.date)); var clicked_date = formatDate(d.date); }) .append("title") .text(d => `${formatDate(d.date)}: ${d.value}`); const month = year.append("g") .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("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return svg.node(); }34:[] 2f:{"title":"Assignment 3 - Part 2 attempted","cells":[{"id":0,"value":"md`# Assignment 3 - Part 2 attempted\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":206,"value":"viewof weekday = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"html`\n\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"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)","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":43,"value":"color = d3.scaleSequential(d3.interpolatePiYG).domain([-900, 500])","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":true,"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":493,"value":"chosen_date","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"chosen_date","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"chosen_year = 2013 + (value / 20) | 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"$32","pinned":true,"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":627,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"viewof value2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"chosen_year2 = 2017 + (value2 / 50) | 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"$33","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()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"dataFiltered2 = nested.filter(function (d) { return d.key === \"2017-02-02\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"nested","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"max = d3.max(dataFiltered2[0].values, function(d) { return +d.value;} )","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"color2 = d3.scaleSequential(d3.interpolatePiYG).domain([-150, 300])","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"chart4 = {\n const svg = d3.select(DOM.svg(width, height));\n \n var dataFiltered2 = nested.filter(function (d) { return d.key === \"2017-02-02\" });\n \n console.log(\"DF2: \", dataFiltered2[0].values);\n \n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(dataFiltered2[0].values).enter().append(\"rect\")\n .attr(\"x\", d => x(d.reason))\n .attr(\"y\", d => y(d.value))\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"width\", x.bandwidth());\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"y = d3.scaleLinear()\n .domain([0, max]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"x = d3.scaleBand()\n .domain(dataFiltered2[0].values.map(d => d.reason))\n .range([margin.left, width - margin.right])\n .padding(0.3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"margin = ({top: 20, right:0, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}