29:null 2a:["$","title",null,{"children":"SipSmart: Unveiling Starbucks | Columbia Dataviz | Observable"}] 2f:T694,canvas2 = { const context = this ? this.getContext("2d") : DOM.context2d( width, // Special ObservableHQ value for width of page 150 // Height of canvas ); // Clear the canvas context.clearRect(0, 0, width, 150); // Draw cup const cupWidthTop = 60; const cupWidthBottom = 40; const cupHeight = 120; const cupX = 50; const cupY = 50; context.beginPath(); context.moveTo(cupX - cupWidthTop / 2, cupY); // Top left context.lineTo(cupX + cupWidthTop / 2, cupY); // Top right context.lineTo(cupX + cupWidthBottom / 2, cupY + cupHeight); // Bottom right context.lineTo(cupX - cupWidthBottom / 2, cupY + cupHeight); // Bottom left context.closePath(); context.fillStyle = "rgb(0,128,0)"; context.fill(); // Draw milk const milkHeight = 30; context.beginPath(); context.moveTo(cupX - cupWidthTop / 2, cupY + 5); // Top left context.lineTo(cupX + cupWidthTop / 2, cupY + 5); // Top right context.lineTo(cupX + cupWidthTop / 2.5, cupY + milkHeight + 5); // Bottom right context.lineTo(cupX - cupWidthTop / 2.5, cupY + milkHeight + 5); // Bottom left context.closePath(); context.fillStyle = "rgb(253,255,245)"; context.fill(); // Draw espresso const espressoHeight = 15; context.beginPath(); context.moveTo(cupX - cupWidthTop / 2.5, cupY + milkHeight + 5); // Top left context.lineTo(cupX + cupWidthTop / 2.5, cupY + milkHeight + 5); // Top right context.lineTo(cupX + cupWidthBottom / 2, cupY + cupHeight); // Bottom right context.lineTo(cupX - cupWidthBottom / 2, cupY + cupHeight); // Bottom left context.closePath(); context.fillStyle = "rgb(78,49,45)"; context.fill(); return context.canvas; } 30:T65a,{ const category = selectedCategory; const filteredData = drink.filter(d => d.Beverage_category === category); filteredData.sort((a, b) => d4.descending(a.Calories, b.Calories)); const margin = { top: 20, right: 30, bottom: 110, left: 200 }; const height = 500 - margin.top - margin.bottom; const barWidth = 20; // Set a fixed bar width const totalWidth = Math.max(800, filteredData.length * (barWidth + 10)) + margin.left + margin.right; const svg = d4.create("svg") .attr("viewBox", `0 0 ${totalWidth} ${height + margin.top + margin.bottom}`); const x = d4.scaleLinear() .domain([0, filteredData.length]) .range([margin.left, filteredData.length * (barWidth + 10) + margin.left]); const y = d4.scaleLinear() .domain([0, d4.max(filteredData, d => d.Calories)]) .range([height - margin.bottom, margin.top]); svg.append("g") .attr("fill", 'brown') .selectAll("rect") .data(filteredData) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.Calories)) .attr("height", d => y(0) - y(d.Calories)) .attr("width", barWidth); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .tickFormat((d, i) => filteredData[i] ? filteredData[i].Beverage + " (" + filteredData[i].Beverage_prep + ")": "") .ticks(filteredData.length)) .selectAll("text") .attr("transform", "translate(-10,0)rotate(-45)") .style("text-anchor", "end"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); return svg.node(); }31:[{"id":"a2828e3dd4b3b4dded20078405f70b59e229cdff7d136ada7f69e1a0e1c13bb17626ae041ed35a6fe696b4f26b8ab11e9aeaa0efe99cf08f652c97a26ef5c00e","href":"https://static.observableusercontent.com/files/a2828e3dd4b3b4dded20078405f70b59e229cdff7d136ada7f69e1a0e1c13bb17626ae041ed35a6fe696b4f26b8ab11e9aeaa0efe99cf08f652c97a26ef5c00e","name":"coffee_chart.webp","type":"image/webp","lastModified":1713462995691.201,"size":66088},{"id":"9766733a5e40c8fdb389fb509afc36dd1f44ed5be200d0f10f50048c8165beadf6e446ea39d5df70a3f85578229feb35922bb5f4a749857ee12920ee2b9f9a0e","href":"https://static.observableusercontent.com/files/9766733a5e40c8fdb389fb509afc36dd1f44ed5be200d0f10f50048c8165beadf6e446ea39d5df70a3f85578229feb35922bb5f4a749857ee12920ee2b9f9a0e","name":"starbucks_drinkMenu_expanded.csv","type":"text/csv","lastModified":1713462995691.201,"size":26898}] 2d:{"id":"f5969c810fc2b246","slug":null,"title":"SipSmart: Unveiling Starbucks","thumbnail":"4f50420298fc1fb9e44191293428837db5588101e9a147fe7faed1088fefbe83","access_level":"public","create_time":"$D2024-04-18T17:56:35.691Z","update_time":"$D2024-04-18T17:56:35.691Z","view_time":null,"first_public_time":"$D2024-04-18T17:57:07.571Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":328,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"83ea62110d61d59a","login":"anusha-lavanuru","name":"Anusha Lavanuru","avatar_url":"https://avatars-next.observableusercontent.com/9c46bdac3f53ea454c55574449ce16854e4d56460b825207ba06ace879bba4c8","tier":null}],"members":[{"type":"individual","id":"83ea62110d61d59a","login":"anusha-lavanuru","name":"Anusha Lavanuru","avatar_url":"https://avatars-next.observableusercontent.com/9c46bdac3f53ea454c55574449ce16854e4d56460b825207ba06ace879bba4c8","tier":null,"role":"editor"},{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SipSmart: Unveiling Starbucks","cells":[{"id":0,"value":"# SipSmart: Unveiling Starbucks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"md `## Anusha Lavanuru, Ha Yeon Kim, Claire Chen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"coffee_chart = FileAttachment(\"coffee_chart.webp\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`### Loading Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"drink = d3.csvParse(\n await FileAttachment(\"starbucks_drinkMenu_expanded.csv\").text(),\n d3.autoType\n) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"md`### Filter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"viewof type = Inputs.select(Object.keys(drink[0]), {label: \"type\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof detail = Inputs.select(Array.from(new Set(drink.map(d => d[viewof type.value]))), {label: \"detail\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"mutable selectedData = {\n const key = viewof type.value;\n const value = viewof detail.value;\n return drink.filter(d => d[key] === value);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`### Visual`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"import {drawBubbleTea, BubbleTea, Cup} from '@kristw/boba-science'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"drawBubbleTea(new BubbleTea({ \n cup: new Cup({\n topRadius: 3,\n bottomRadius: 5\n })})).node();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"d4 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"d5 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"vegalite = require(\"@observablehq/vega-lite\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`### Models`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"groupedByCategory = d4.group(drink, d => d.Beverage_category)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"// Extract unique categories\nuniqueCategories = Array.from(new Set(drink.map(d => d.Beverage_category)))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"// Now you can use selectedCategory in other cells to reactively update visualizations\nselectedCategoryValue = selectedCategory.value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"viewof selectedCategory = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"{\n const svg = d3.select(\"body\").append(\"svg\")\n .attr(\"width\", 200)\n .attr(\"height\", 300)\n .style(\"border\", \"1px solid black\") \n}// Adding a border to see the SVG boundaries easily","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"viewof selectedCupSize = html`\n

\n Short
\n Tall
\n Grande
\n Venti\n

\n`;\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"selectedCupSizeValue1 = parseFloat(selectedCupSize.querySelector('input[name=\"cupSize\"]:checked').value);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"selectedCupSizeValue = {\n const radio = selectedCupSize.querySelector('input[name=\"cupSize\"]:checked');\n return radio ? parseFloat(radio.value) : 1; // Default to 1 or another sensible default\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"canvas3 = {\n const scaleFactor = parseFloat(selectedCupSize.querySelector('input[name=\"cupSize\"]:checked').value); // Use the reactive value directly from the radio selection\n \n const context = DOM.context2d(200, 150); // Define canvas dimensions\n\n // Clear the canvas\n context.clearRect(0, 0, 200, 150);\n\n // Define scaled dimensions based on the selected size\n const cupWidthTop = 60 * scaleFactor;\n const cupWidthBottom = 40 * scaleFactor;\n const cupHeight = 120 * scaleFactor;\n const cupX = 100; // Center the cup horizontally\n const cupY = 15; // Set top margin\n\n // Draw the cup\n context.fillStyle = \"rgb(0,128,0)\";\n context.beginPath();\n context.moveTo(cupX - cupWidthTop / 2, cupY);\n context.lineTo(cupX + cupWidthTop / 2, cupY);\n context.lineTo(cupX + cupWidthBottom / 2, cupY + cupHeight);\n context.lineTo(cupX - cupWidthBottom / 2, cupY + cupHeight);\n context.closePath();\n context.fill();\n\n return context.canvas;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"