31:T1506,{ // see https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 const margin = {top: 10, right: 10, bottom: 160, left: 45}; const margin2 = {top: 500, right: 10, bottom: 30, left: 45}; const width = 900 - margin.left - margin.right; const height = 600 - margin.top - margin.bottom; const height2 = 600 - margin2.top - margin2.bottom; const div = html`

` var svg = DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom); div.appendChild(svg); svg = d3.select(svg); const radius = 4; // clip path const clip = DOM.uid("clip"); svg.append("defs").append("clipPath") .attr("id", clip.id) .append("rect") .attr("width", width + radius) .attr("height", height + radius); const big = svg.append("g") .attr("class", "big") .attr("transform", "translate( "+ margin.left + "," + margin.top + ")"); const little = svg.append("g") .attr("class", "little") .attr("transform", "translate( "+ margin2.left + "," + margin2.top + ")"); // tooltip const tooltip = d3.select(div.querySelector("#tooltip")) .style("display", "none") .attr("class", "tooltip"); // scales const x = d3.scaleTime() .domain(d3.extent(flexData, d => d.date)) .rangeRound([0, width]); const x2 = d3.scaleTime() .domain(x.domain()) .rangeRound([0, width]); const y = d3.scaleLinear() .domain([0, 500]) .rangeRound([height, 0]); const y2 = d3.scaleLinear() .domain(y.domain()) .rangeRound([height2, 0]); // axes const xAxis = d3.axisBottom(x); const xAxis2 = d3.axisBottom(x2); big.append("g") .attr("class", "x-axis") .attr("transform", "translate(0,"+height+")") .call(xAxis); big.append("text") .text("Date") .attr("x", width/2) .attr("y", height + 35) .attr("class", "axisLabel"); big.append("g") .call(d3.axisLeft(y)); big.append("text") .text("Flex Points") .attr("transform", "translate(-35," + (height / 2) + ") rotate(-90)") .attr("class", "axisLabel"); little.append("g") .attr("transform", "translate(0," + height2 + ")") .call(xAxis2); // lines const line = d3.line() .x(d => x(d.date)) .y(d => y(d.balance)); const line2 = d3.line() .x(d => x2(d.date)) .y(d => y2(d.balance)); big.append("path") .datum(flexData) .attr("clip-path", clip) .attr("class", "line") .attr("stroke", "black") .attr("stroke-width", "1") .attr("fill", "none") .attr("d", line); little.append("path") .datum(flexData) .attr("stroke", "black") .attr("stroke-width", "1") .attr("fill", "none") .attr("d", line2); // brush const brush = d3.brushX() .extent([[0,0], [width, height2]]) .on("brush end", brushed); little.append("g") .attr("class", "brush") .call(brush) .call(brush.move, x.range()); // circles const color = d3.scaleOrdinal(d3.schemeCategory10); big.selectAll(".circle") .data(flexData) .enter().append("circle") .attr("clip-path", clip) .on("mouseover", function (d) { // add tooltip on mouseover let crcl = d3.select(this); crcl.attr("r", radius * 2); tooltip.style("display", "inline-block") .text("Place: " + d.place + "\n" + "Date: " + d3.timeFormat("%b %e, %I:%M %p")(d.date) + "\n" + "Cost: $" + formatPoints(d.amount) + "\n" + "Balance: $" + formatPoints(d.balance)) .style("right", Math.min(width - +d3.select(this).attr("cx") + margin.right + 5, width - tooltip.node().getBoundingClientRect().width) + "px") .style("top", +crcl.attr("cy") + margin.top + 5 + "px"); }) .on("mouseout", function (d) { // remove tooltip on mouseout d3.select(this).attr("r", radius); tooltip.style("display", "none") }) .attr("class", "circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.balance)) .attr("fill", d => colorCode ? color(d.place) : "#33a02c") .attr("r", radius); little.selectAll(".circle") .data(flexData) .enter().append("circle") .attr("class", "circle") .attr("cx", d => x2(d.date)) .attr("cy", d => y2(d.balance)) .attr("fill", d => colorCode ? color(d.place) : "#33a02c") .attr("r", radius); // legend if (colorCode) { const legend = big.selectAll(".legend") .data(places) .enter().append("g") .attr("transform", (d, i) => "translate("+(width-100)+","+(i*15)+")"); legend.append("text") .text(d => d) .attr("font-family", "sans-serif") .attr("dy", "0.35em") .attr("dx", "0.75em") .attr("font-size", "12"); legend.append("circle") .attr("fill", d => color(d)) .attr("r", radius); } function brushed() { const s = d3.event.selection || x2.range(); x.domain(s.map(x2.invert)); big.select(".line").attr("d", line); big.select(".x-axis").call(xAxis); big.selectAll(".circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.balance)); } return div; }32:Tbdf,{ // margin convention const margin = {top: 50, right: 50, bottom: 50, left: 50}; const width = 900 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const midSpace = 38; // scales and axes const y = d3.scaleBand().domain(places).range([0, height]).padding(0.25); const xTotal = d3.scaleLinear() .domain([0,Math.floor(d3.max(flexDataByPlace.map(d => d["total"])) + 1)]) .range([0, width/2 - midSpace]); const xMean = d3.scaleLinear() .domain([0, Math.floor(d3.max(flexDataByPlace.map(d => d["mean"])) + 1)]) .range([width/2 - midSpace, 0]); const xAxisMean = d3.axisTop(xMean); const xAxisTotal = d3.axisTop(xTotal); g.append("g") .attr("class", "xAxis") .attr("transform", "translate("+(width/2 + midSpace)+",0)") .call(xAxisTotal); g.append("g") .attr("class", "xAxis") .attr("transform", "translate(0,0)") .call(xAxisMean); g.selectAll(".domain").remove(); // labels g.selectAll(".axisLabel") .data(places) .enter().append("text") .text(d => d) .attr("class", "axisLabel") .attr("x", width/2) .attr("y", d => y(d) + y.bandwidth()/2); g.append("text") .text("Mean Amount Spent") .attr("x", width/4) .attr("y", -25) .attr("class", "axisLabel"); g.append("text") .text("Total Amount Spent") .attr("x", 3*width/4) .attr("y", -25) .attr("class", "axisLabel"); // total amount spent bars const totalBars = g.selectAll(".totalBar") .data(flexDataByPlace) .enter().append("g") .attr("class", "totalBar") .attr("transform", d => "translate(" + (width/2 + midSpace) + ", " + y(d["place"]) + ")") .on("mouseover", mouseover("total")) .on("mouseout", mouseout) totalBars.append("rect") .attr("fill", "#33a02c") .attr("width", d => xTotal(d["total"])) .attr("height", y.bandwidth()); // mean amount spent bars const meanBars = g.selectAll(".meanBar") .data(flexDataByPlace) .enter().append("g") .attr("class", "totalBar") .attr("transform", d => "translate("+ (xMean(d["mean"])) +", " + y(d["place"]) + ")") .on("mouseover", mouseover("mean")) .on("mouseout", mouseout); meanBars.append("rect") .attr("fill", "steelblue") .attr("width", d => width/2 - midSpace - (xMean(d["mean"]))) .attr("height", y.bandwidth()); function mouseout(d) { d3.select(".hoverLabel").remove(); } function mouseover(field) { return function(d) { d3.select(this).append("text") .text(c => formatPoints(d[field])) .attr("class", "hoverLabel") .attr("dy", "0.35em") .attr("x", field === "total" ? xTotal(d[field]) + 5 : -30) .attr("y", y.bandwidth()/2); } } return svg.node(); }33:T666,function makeHistogram(data, timeDomain){ // see https://bl.ocks.org/mbostock/3048450 and https://bl.ocks.org/d3noob/96b74d0bd6d11427dd797892551a103c // margin convention const margin = {top: 25, right: 25, bottom: 50, left: 25}; const width = 900 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // set up scales const x = d3.scaleTime().domain(timeDomain).range([0, width]); const histogram = d3.histogram() .domain(x.domain()) .thresholds(x.ticks(20)); const bins = histogram(data); const y = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]) .rangeRound([height, 0]); // draw axis g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // create groups for rects and text const bars = g.selectAll(".bar") .data(bins) .enter().append("g") .attr("transform", d => "translate(" + x(d.x0) + "," + y(d.length) + ")"); // draw bars const barWidth = x(bins[0].x1) - x(bins[0].x0) - 2; bars.append("rect") .attr("width", barWidth) .attr("height", d => height - y(d.length)) .style("fill", "#9467bd"); // draw labels bars.append("text") .text(d => d.length) .attr("x", barWidth / 2) .attr("y", 15) .style("text-anchor", "middle") .style("font-family", "sans-serif") .style("fill", "white") return svg.node(); }34:T954,dhData = d3.csvParse(`day,time,lane January 15,11:20AM,4 January 15,06:19PM,4 January 16,05:56PM,4 January 17,11:52AM,4 January 17,06:02PM,4 January 18,11:49AM,4 January 18,05:02PM,2 January 21,11:04AM,2 January 21,06:09PM,4 January 22,06:45PM,3 January 23,11:48AM,4 January 23,05:39PM,4 January 24,11:46AM,4 January 24,06:19PM,4 January 25,11:48AM,4 January 25,05:53PM,4 January 26,12:07PM,4 January 26,05:26PM,4 January 27,11:01AM,4 January 27,05:57PM,3 January 28,11:01AM,4 January 28,06:03PM,4 January 29,11:41AM,4 January 29,06:18PM,3 January 30,11:48AM,4 January 30,05:55PM,4 January 31,11:46AM,4 January 31,06:07PM,4 February 01,11:46AM,3 February 01,06:07PM,4 February 02,11:52AM,4 February 02,06:46PM,4 February 03,11:02AM,2 February 03,06:03PM,4 February 04,11:04AM,4 February 05,06:17PM,4 February 06,11:49AM,4 February 06,06:16PM,4 February 07,11:46AM,4 February 07,05:39PM,4 February 08,11:49AM,3 February 08,05:39PM,4 February 09,06:13PM,4 February 10,11:02AM,4 February 10,06:06PM,4 February 11,11:03AM,4 February 11,05:49PM,4 February 12,11:51AM,4 February 12,06:41PM,2 February 13,11:50AM,4 February 13,07:40PM,3 February 14,05:36PM,3 February 15,11:35AM,3 February 15,06:11PM,3 February 16,07:04PM,3 February 17,11:06AM,3 February 17,06:50PM,4 February 18,11:02AM,4 February 18,05:48PM,3 February 19,11:51AM,4 February 19,06:21PM,4 February 20,11:48AM,3 February 20,06:38PM,4 February 21,11:50AM,2 February 21,06:03PM,4 February 22,11:51AM,4 February 23,11:58AM,4 February 23,06:58PM,4 February 24,11:05AM,4 February 25,11:04AM,4 February 25,06:12PM,4 February 26,11:50AM,4 February 26,06:26PM,4 February 27,11:54AM,3 February 27,06:13PM,4 February 28,01:56PM,2 February 28,06:18PM,4 March 01,11:52AM,4 March 01,06:07PM,4 March 02,12:23PM,4 March 02,06:21PM,4 March 03,11:05AM,4 March 03,06:10PM,4 March 04,11:04AM,4 March 04,05:53PM,3 March 05,11:47AM,4 March 05,06:23PM,3 March 06,10:56AM,4 March 06,06:06PM,4 March 07,11:46AM,4 March 07,05:25PM,4 March 08,11:54AM,4 March 08,05:57PM,4 March 18,12:58PM,4 March 18,07:19PM,4 March 19,11:48AM,4 March 20,11:49AM,3 March 20,06:20PM,4 March 21,11:45AM,4 March 21,07:54PM,4 March 22,11:50AM,4 March 22,05:28PM,4 March 23,12:15PM,4 March 23,06:20PM,4 March 25,11:02AM,4 March 25,05:32PM,4 March 26,11:46AM,4 March 26,07:23PM,4 March 27,11:50AM,4 March 27,06:07PM,4 March 28,11:50AM,4 March 28,06:04PM,4 March 29,11:51AM,4 `)35:T954,flexData = d3.csvParse(`day,time,place,amount,balance January 14,09:46PM,Subway,4.69,495.31 January 15,09:38AM,Huddle,12.97,482.34 January 15,02:22PM,Huddle,7.24,475.1 January 16,10:58AM,Huddle,6.8,468.3 January 16,11:10AM,Cafe de Grasta,6.15,462.15 January 17,01:37PM,Huddle,2.65,459.5 January 18,01:50PM,Huddle,12.27,447.23 January 21,09:41PM,Huddle,12.17,435.06 January 22,10:06PM,Huddle,10.79,424.27 January 25,01:54PM,Huddle,4.34,419.93 January 25,11:04PM,Huddle,1.99,417.94 January 26,04:02PM,Huddle,2.65,415.29 January 27,03:26PM,Huddle,11.29,404.0 January 28,10:01PM,Huddle,12.87,391.13 January 29,01:54PM,Huddle,2.84,388.29 January 31,02:43PM,Modern Market,2.65,385.64 January 31,08:29PM,Huddle,6.14,379.5 February 01,01:54PM,Huddle,4.49,375.01 February 02,11:01AM,Huddle,6.8,368.21 February 03,03:07PM,Modern Market,2.65,365.56 February 05,02:04PM,Subway,4.99,360.57 February 06,01:55PM,Huddle,4.34,356.23 February 06,08:19PM,NDH Market,2.74,353.49 February 07,03:28PM,Huddle,12.92,340.57 February 07,09:37PM,Huddle,9.58,330.99 February 08,01:53PM,Huddle,2.84,328.15 February 09,12:22PM,Cafe de Grasta,8.24,319.91 February 09,03:46PM,Huddle,7.28,312.63 February 11,09:49PM,Huddle,10.78,301.85 February 12,12:19PM,NDH Market,2.65,299.2 February 15,03:58PM,Huddle,4.98,294.22 February 15,05:48PM,Huddle,4.49,289.73 February 16,12:38PM,Modern Market,7.88,281.85 February 18,11:47AM,Huddle,4.49,277.36 February 18,09:39PM,Huddle,6.14,271.22 February 19,02:44PM,Kitz Kafe,2.55,268.68 February 22,02:07PM,Huddle,1.69,266.99 February 22,07:11PM,Subway,7.34,259.65 February 22,07:24PM,Star Ginger,9.74,249.91 February 25,09:42PM,Huddle,16.06,233.86 February 26,03:10PM,Kitz Kafe,2.55,231.32 March 01,04:48PM,Huddle,8.78,222.55 March 04,04:19PM,Huddle,9.84,212.71 March 04,09:46PM,Huddle,8.58,204.13 March 05,10:32AM,Huddle,7.04,197.09 March 06,02:16PM,Modern Market,2.15,194.94 March 08,09:38PM,Huddle,7.83,187.11 March 18,09:41PM,Huddle,9.47,177.64 March 21,02:25PM,Huddle,3.69,173.95 March 22,01:54PM,Huddle,8.99,164.96 March 24,08:17PM,Subway,7.08,157.88 March 25,04:51PM,Huddle,3.99,153.89 March 25,10:00PM,Huddle,13.47,140.42 March 26,01:42PM,Kitz Kafe,2.55,137.88 March 28,11:07AM,Huddle,3.99,133.89 March 28,01:58PM,Cafe de Grasta,0.99,132.9 `).map(d => { d["amount"] = +d["amount"]; d["balance"] = +d["balance"]; d["date"] = parseDate(d.day+","+d.time); return d; })36:[] 2f:{"title":"Meal Plan Visualizations","cells":[{"id":0,"value":"md`# Meal Plan Visualizations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`My meal plan at school gives me 500 \"flex points\" per semester and 14 dining hall meal swipes per week. Let's see how I've been using them so far this semester.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`## Flex Point Spending Time Series`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`I started the semester off with 500 flex points. Right now, I have ${formatPoints(flexData[flexData.length-1].balance)} left.\n\nHover over the circles for details. Adjust the gray box on the bottom graph to change the date range in the top graph.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof colorCode = { \n const element = html`Color code by place: `\n const check = element.querySelector(\"input\");\n\n element.value = check.checked;\n check.onclick = () => {\n console.log(\"test\");\n element.value = check.checked;\n element.dispatchEvent(new CustomEvent('input'));\n };\n \n return element;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"md`## Flex Point Spending By Place`","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`The right side of this graph shows the number of flex points that I've spent at each location. I spend far more at the Huddle than I do any other place. The left side of this graph shows the average amount spent per purchase at each location.\n\nHover over the bars for exact amounts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`## Dining Hall Turnstile Lane`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`I have gone to the dining hall ${dhData.length} times so far. There are four different turnstile lanes that I can use when entering the dining hall. Lane 4 is my go-to. I have not used lane 1 at all.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"{\n const radius = 10;\n const space = radius * 3;\n const rows = 6;\n const cols = Math.ceil(dhData.length / rows); \n const svg = d3.select(DOM.svg(cols * space, rows * space));\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n \n const points = svg.selectAll(\".lane\")\n \t.data(dhData.map(x => +x.lane).sort())\n \t.enter().append(\"g\")\n \t .attr(\"transform\", (d, i) => {\n const x = Math.floor(i / rows) * space + radius;\n \t \tconst y = (i % rows) * space + radius;\n return \"translate(\" + x + \",\" + y + \")\";\n });\n \n points.append(\"circle\")\n \t .attr(\"fill\", d => color(d))\n \t .attr(\"r\", radius);\n \n points.append(\"text\")\n .text(d => d)\n \t .attr(\"dy\", \"0.35em\")\n .style(\"text-anchor\", \"middle\")\n \t .style(\"font-family\", \"sans-serif\")\n \t .style(\"font-size\", \"0.75em\")\n .style(\"fill\", \"white\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`## Dining Hall Meal Times`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`### Lunch`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`I have had lunch at the DH ${lunchTimes.length} times. When it comes to eating lunch, I am nothing if not consistent. On weekends, I go at 11:00 and on weekdays, I go at 11:45.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"makeHistogram(lunchTimes, [parseTime(\"10:30AM\"), parseTime(\"02:00PM\")])","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`### Dinner`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`I have eaten dinner at the DH ${dinnerTimes.length} times. My dinner times are a bit more spread out than lunch. The majority of dinners begin in the half-hour span from 6:00 to 6:30.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"makeHistogram(dinnerTimes, [parseTime(\"05:00PM\"), parseTime(\"08:00PM\")])","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"places = Array.from(new Set(flexData.map(d => d.place)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"parseTime = d3.timeParse(\"%I:%M%p\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"parseDate = d3.timeParse(\"%B %d,%I:%M%p\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"formatPoints = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"flexDataByPlace = d3.nest()\n\t.key(d => d.place)\n\t.entries(flexData)\n\t.map(d => {\n const values = d.values.map(b => b.amount);\n return {\n place: d.key,\n values: values,\n total: d3.sum(values),\n mean: d3.mean(values)\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"lunchTimes = dhData.map(d=>parseTime(d.time)).filter(d => d < parseTime(\"05:00PM\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"dinnerTimes = dhData.map(d=>parseTime(d.time)).filter(d => d >= parseTime(\"05:00PM\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}