29:null 2a:["$","title",null,{"children":"SipSmart: Unveiling Starbucks- anu | Columbia Dataviz | Observable"}] 2f:T9dc,svg_sb_cup = (cupHeight, milkHeight, espressoHeight) => { const width = this ? this.width : 300; // Width of the canvas const height = cupHeight + 80; // Height of the canvas const context = this ? this.getContext("2d") : DOM.context2d(width, height); // gray background, need to match the color of triangle context.fillStyle = "rgb(192, 192, 192)"; context.fillRect(0, 0, width, height); // Clear the canvas context.clearRect(100, 40, 50, cupHeight); // Draw green rectangle (bottom layer) context.fillStyle = "rgb(0, 128, 0)"; context.fillRect(100, 40, 50, cupHeight); // Draw milk rectangle (middle layer) context.fillStyle = "rgb(253,255,245)"; context.fillRect(100, cupHeight - milkHeight + 40, 50, milkHeight); // Draw espresso rectangle (top layer) context.fillStyle = "rgb(78,49,45)"; context.fillRect(100, cupHeight - milkHeight - espressoHeight + 40, 50, espressoHeight); // two triangle context.fillStyle = "rgb(192, 192, 192)"; const triangleBase = 10; // Width of the triangle's base const triangleHeight = 70; // Height of the triangle const triangleBottomX = 100; // X-coordinate of the triangle bottom const triangleBottomY = 40 + cupHeight; // Y-coordinate of the triangle bottom const triangleTopX = triangleBottomX + triangleBase; // X-coordinate of the triangle top const triangleTopY = triangleBottomY - triangleHeight; // Y-coordinate of the triangle top context.beginPath(); context.moveTo(triangleBottomX, triangleBottomY); // Bottom left vertex context.lineTo(triangleTopX, triangleBottomY); // Bottom right vertex context.lineTo(triangleBottomX, triangleTopY); // Top vertex context.closePath(); context.fill(); context.fillStyle = "rgb(192, 192, 192)"; const triangleBase2 = 10; // Width of the triangle's base const triangleHeight2 = 70; // Height of the triangle const triangleBottomX2 = 150; // X-coordinate of the triangle bottom const triangleBottomY2 = 40 + cupHeight; // Y-coordinate of the triangle bottom const triangleTopX2 = triangleBottomX2 + triangleBase2; // X-coordinate of the triangle top const triangleTopY2 = triangleBottomY2 - triangleHeight2; // Y-coordinate of the triangle top context.beginPath(); context.moveTo(triangleBottomX2, triangleBottomY2); // Bottom left vertex context.lineTo(triangleTopX2 - 20, triangleBottomY2); // Bottom right vertex context.lineTo(triangleBottomX2, triangleTopY2); // Top vertex context.closePath(); context.fill(); return context.canvas; } 30:T17e0,svg_nutrition_cup = (data_dic) => { const cupHeight = 100; // Define cup height const width = this ? this.width : 1200; // Width of the canvas const height = cupHeight * 3.5; // Height of the canvas const container = DOM.element('div'); container.style.width = width + 'px'; container.style.overflowX = 'auto'; const context = this ? this.getContext("2d") : DOM.context2d(width, height); // gray background, need to match the color of triangle context.fillStyle = "rgb(192, 192, 192)"; context.fillRect(0, 0, width, height); // Array to store rectangle information (x, y, width, height, name) const rectangles = []; let blueRectVisible = false; // Flag to track visibility of blue rectangle for (let i = 0; i < data_dic.length; i++) { const name = data_dic[i].name; const sugar = roundToNearestTen(data_dic[i].sugar); const fat = roundToNearestTen(data_dic[i].fat); const protein = roundToNearestTen(data_dic[i].sodium); const Vitamin = roundToNearestTen(data_dic[i].vitamin); const Calcium = roundToNearestTen(data_dic[i].calcium); const x_val = 100 * (i+1); // Clear the canvas context.clearRect(x_val, 40, 50, cupHeight); // Draw green rectangle (bottom layer) context.fillStyle = "rgb(0, 128, 0)"; context.fillRect(x_val, 40, 50, cupHeight); // Draw sugar rectangle (middle layer) context.fillStyle = "rgb(255,253,242)"; context.fillRect(x_val, cupHeight - sugar + 40, 50, sugar); // Draw fat rectangle (top layer) context.fillStyle = "rgb(228,192,0)"; context.fillRect(x_val, cupHeight - sugar - fat + 40, 50, fat); // Draw protein rectangle (top layer) context.fillStyle = "rgb(0,0,255)"; context.fillRect(x_val, cupHeight - sugar - fat - protein + 40, 50, protein); // Draw caffeine rectangle (top layer) context.fillStyle = "rgb(128,128,128)"; context.fillRect(x_val, cupHeight - sugar - fat - protein - Calcium + 40, 50, Calcium); // Draw Vitamin rectangle (top layer) context.fillStyle = "rgb(254,255,161)"; context.fillRect(x_val, cupHeight - sugar - fat - protein - Calcium - Vitamin + 40, 50, Vitamin); // Draw the name text below the rectangle context.fillStyle = "black"; context.font = "12px Arial"; context.textAlign = "center"; // Split the name into an array of words const nameWords = name.split(" "); // Draw each word of the name separately on a new line let yPos = 170; nameWords.forEach(word => { context.fillText(word, x_val + 25, yPos); yPos += 12; // Increase y position for the next word }); // Add event listener to the canvas for click event // Add event listener to the canvas for click event context.canvas.addEventListener('click', function(event) { const rect = context.canvas.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; // Check if click is inside the green rectangle if (mouseX >= x_val && mouseX <= x_val + 50 && mouseY >= 40 && mouseY <= 40 + cupHeight) { // Toggle visibility of blue rectangle blueRectVisible = !blueRectVisible; // Clear the canvas context.clearRect(x_val, 250, 70, 80); // Draw blue rectangle if it should be visible if (blueRectVisible) { context.fillStyle = "blue"; // Change color to blue context.fillRect(x_val, 250, 70, 80); // Adjust position and size as needed // Write text inside the blue rectangle context.fillStyle = "white"; // Change text color context.font = "12px Arial"; context.textAlign = "left"; const lineHeight = 15; // Adjust line height as needed const lines = [ `Sugar: ${sugar}`, `Fat: ${fat}`, `Protein: ${protein}`, `Vitamin: ${Vitamin}`, `Calcium: ${Calcium}` ]; let yPos = 260; lines.forEach(line => { context.fillText(line, x_val, yPos); yPos += lineHeight; }); } else { // Draw gray rectangle if blue rectangle is not visible context.fillStyle = "rgb(192, 192, 192)"; // Change color to gray context.fillRect(x_val, 250, 70, 80); // Adjust position and size as needed } } }); context.fillStyle = "rgb(192, 192, 192)"; const triangleBase = 10; // Width of the triangle's base const triangleHeight = 70; // Height of the triangle const triangleBottomX = x_val; // X-coordinate of the triangle bottom const triangleBottomY = 40 + cupHeight; // Y-coordinate of the triangle bottom const triangleTopX = triangleBottomX + triangleBase; // X-coordinate of the triangle top const triangleTopY = triangleBottomY - triangleHeight; // Y-coordinate of the triangle top context.beginPath(); context.moveTo(triangleBottomX, triangleBottomY); // Bottom left vertex context.lineTo(triangleTopX, triangleBottomY); // Bottom right vertex context.lineTo(triangleBottomX, triangleTopY); // Top vertex context.closePath(); context.fill(); context.fillStyle = "rgb(192, 192, 192)"; const triangleBase2 = 10; // Width of the triangle's base const triangleHeight2 = 70; // Height of the triangle const triangleBottomX2 = x_val + 50; // X-coordinate of the triangle bottom const triangleBottomY2 = 40 + cupHeight; // Y-coordinate of the triangle bottom const triangleTopX2 = triangleBottomX2 + triangleBase2; // X-coordinate of the triangle top const triangleTopY2 = triangleBottomY2 - triangleHeight2; // Y-coordinate of the triangle top context.beginPath(); context.moveTo(triangleBottomX2, triangleBottomY2); // Bottom left vertex context.lineTo(triangleTopX2 - 20, triangleBottomY2); // Bottom right vertex context.lineTo(triangleBottomX2, triangleTopY2); // Top vertex context.closePath(); context.fill(); } container.appendChild(context.canvas); return container; } 31: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(); }32:Te05,canvas4 = { const scaleFactor = size; // Use the reactive value directly from the radio selection const width = 300; const height = scaleFactor * 200; const context = DOM.context2d(width, height); // Define canvas dimensions const canvas = context.canvas; let currentDropdownLayer = -1; // No layer has a dropdown initially // Clear the canvas context.clearRect(0, 0, width, height); // Define scaled dimensions based on the selected size const cupWidthTop = 60 * scaleFactor; const cupWidthBottom = 40 * scaleFactor; const cupHeight = 120 * scaleFactor; const cupX = width / 2; // Center the cup horizontally const cupY = 60; // Set top margin const layers = []; const colors = ["grey", "#f5f5dc", "brown", "#fffdd0"]; const layerHeight = cupHeight / 4; function cupWidthAtHeight(yPosition) { return cupWidthTop + (cupWidthBottom - cupWidthTop) * ((yPosition - cupY) / cupHeight) ; } function drawLayers() { for (let i = 0; i < 4; i++) { const topY = cupY + i * layerHeight; const bottomY = topY + layerHeight; const topWidth = cupWidthAtHeight(topY); const bottomWidth = cupWidthAtHeight(bottomY); layers[i] = { topY, bottomY, topWidth, bottomWidth }; context.fillStyle = i === currentDropdownLayer ? 'yellow' : colors[i]; context.beginPath(); context.moveTo(cupX - topWidth / 2, topY); context.lineTo(cupX + topWidth / 2, topY); context.lineTo(cupX + bottomWidth / 2, bottomY); context.lineTo(cupX - bottomWidth / 2, bottomY); context.closePath(); context.fill(); } } drawLayers(); // Draw the outline of the cup context.beginPath(); context.moveTo(cupX - cupWidthTop / 2, cupY); // Start from the top left corner context.lineTo(cupX + cupWidthTop / 2, cupY); // Line to top right corner context.lineTo(cupX + cupWidthBottom / 2, cupY + cupHeight); // Line to bottom right corner context.lineTo(cupX - cupWidthBottom / 2, cupY + cupHeight); // Line to bottom left corner context.closePath(); // Close the path back to the start point // Set styles for the outline context.strokeStyle = "rgb(0, 128, 0)"; // Green color for the stroke context.lineWidth = 2; // Set the line width for the outline context.stroke(); // Apply the stroke to the path // Prepare the dropdown const dropdown = document.createElement('select'); dropdown.innerHTML = ``; dropdown.style.position = 'absolute'; dropdown.style.display = 'none'; // Initially hidden document.body.appendChild(dropdown); canvas.addEventListener('click', event => { const mouseX = event.offsetX; const mouseY = event.offsetY; const clickedIndex = layers.findIndex(layer => mouseX >= (cupX - layer.topWidth / 2) && mouseX <= (cupX + layer.topWidth / 2) && mouseY >= layer.topY && mouseY <= layer.bottomY ); if (clickedIndex === currentDropdownLayer) { // Toggle dropdown visibility dropdown.style.display = 'none'; currentDropdownLayer = -1; } else if (clickedIndex !== -1) { currentDropdownLayer = clickedIndex; dropdown.style.display = 'block'; dropdown.style.left = `${event.pageX}px`; dropdown.style.top = `${event.pageY + 10}px`; // Position below the click } else { dropdown.style.display = 'none'; currentDropdownLayer = -1; } // Redraw layers with potential new highlighting drawLayers(); }); return canvas; } 33:T10fc,canvas3 = { const scaleFactor = size; // Reactive value from radio selection const width = 400; const height = scaleFactor * 200; const context = DOM.context2d(width, height); const canvas = context.canvas; const layerOptions = [ ["2% reduced fat", "1% reduced fat", "Soy milk", "Almond milk", "Oat milk"], // Options for Layer 0 ["Zero Calorie sugar", "Sugar(Normal)", "Honey", "Maple Syrup"], // Options for Layer 1 ["Coffee Type 1", "Coffee Type 2", "Coffee Type 3"], // Options for Layer 2 ["Cream", "No Cream"] // Options for Layer 3 ]; const layerSizeMultipliers = [1,1,1,1]; context.clearRect(0, 0, width, height); const cupWidthTop = 60 * scaleFactor; const cupWidthBottom = 40 * scaleFactor; const cupHeight = 120 * scaleFactor; const cupX = width / 2; const cupY = 60; const colors = ["grey", "#f5f5dc", "brown", "#fffdd0"]; const layerHeight = cupHeight / 4; const layers = []; for (let i = 0; i < 4; i++) { const topY = cupY + i * layerHeight; const bottomY = topY + layerHeight; const topWidth = cupWidthTop - (i * (cupWidthTop - cupWidthBottom) / 4); const bottomWidth = topWidth - ((cupWidthTop - cupWidthBottom) / 4); layers.push({ index: i, top: topY, bottom: bottomY, left: cupX - bottomWidth / 2, right: cupX + bottomWidth / 2, color: colors[i] }); context.fillStyle = colors[i]; context.beginPath(); context.moveTo(cupX - topWidth / 2, topY); context.lineTo(cupX + topWidth / 2, topY); context.lineTo(cupX + bottomWidth / 2, bottomY); context.lineTo(cupX - bottomWidth / 2, bottomY); context.closePath(); context.fill(); } context.strokeStyle = "rgb(0, 128, 0)"; context.lineWidth = 2; context.beginPath(); context.moveTo(cupX - cupWidthTop / 2, cupY); context.lineTo(cupX + cupWidthTop / 2, cupY); context.lineTo(cupX + cupWidthBottom / 2, cupY + cupHeight); context.lineTo(cupX - cupWidthBottom / 2, cupY + cupHeight); context.closePath(); context.stroke(); function redrawCanvas() { context.clearRect(0, 0, width, height); for (let i = 0; i < layers.length; i++) { const layer = layers[i]; const scaleFactor = layerSizeMultipliers[i]; // Use the multiplier for the layer size const heightAdjustment = layerHeight * scaleFactor; const topY = cupY + (i * heightAdjustment); const bottomY = topY + heightAdjustment; const topWidth = cupWidthTop - (i * (cupWidthTop - cupWidthBottom) / 4) * scaleFactor; const bottomWidth = topWidth - ((cupWidthTop - cupWidthBottom) / 4) * scaleFactor; context.fillStyle = layer.color; context.beginPath(); context.moveTo(cupX - topWidth / 2, topY); context.lineTo(cupX + topWidth / 2, topY); context.lineTo(cupX + bottomWidth / 2, bottomY); context.lineTo(cupX - bottomWidth / 2, bottomY); context.closePath(); context.fill(); } context.strokeStyle = "rgb(0, 128, 0)"; context.lineWidth = 2; context.beginPath(); context.moveTo(cupX - cupWidthTop / 2, cupY); context.lineTo(cupX + cupWidthTop / 2, cupY); context.lineTo(cupX + cupWidthBottom / 2, cupY + cupHeight); context.lineTo(cupX - cupWidthBottom / 2, cupY + cupHeight); context.closePath(); context.stroke(); } // Setup dropdown for layer options const dropdown = document.createElement('select'); dropdown.style.position = 'absolute'; dropdown.style.display = 'none'; document.body.appendChild(dropdown); canvas.addEventListener('click', event => { const { offsetX, offsetY } = event; const clickedLayer = layers.find(layer => offsetX >= layer.left && offsetX <= layer.right && offsetY >= layer.top && offsetY <= layer.bottom ); if (clickedLayer) { dropdown.innerHTML = layerOptions[clickedLayer.index].map((opt, index)=> ``).join(''); dropdown.style.left = `${event.pageX}px`; dropdown.style.top = `${event.pageY}px`; dropdown.style.display = 'block'; dropdown.onchange = () => { layerSizeMultipliers[clickedLayer.index] = parseFloat(dropdown.value); redrawCanvas(); }; } else { dropdown.style.display = 'none'; } }); return canvas; } 34:T764,canvas5 = { // Create SVG canvas const svg = d3.select("body").append("svg") .attr("width", 800) .attr("height", 600); // Data for cup fragments including position, size, and color const cupFragments = [ { id: 'body', x: 350, y: 250, width: 100, height: 200, fill: '#006241', type: 'rect' }, { id: 'lid', x: 350, y: 200, width: 120, height: 20, fill: '#f4f4f4', type: 'rect' }, ...Array.from({length: 20}, (_, i) => ({ id: `drop${i}`, x: 400 + Math.random() * 100 - 50, // Randomize initial positions a bit y: 250 + Math.random() * 100 - 50, r: 5 + Math.random() * 5, fill: '#603813', type: 'circle' })) ]; // Append each fragment to the SVG cupFragments.forEach(fragment => { svg.append(fragment.type) .attr('id', fragment.id) .attr(fragment.type === 'circle' ? { 'cx': fragment.x, 'cy': fragment.y, 'r': fragment.r } : { 'x': fragment.x, 'y': fragment.y, 'width': fragment.width, 'height': fragment.height }) .attr('fill', fragment.fill); }); // Explosion function function explode() { svg.selectAll("rect, circle") .transition() .duration(2000) .ease(d3.easeExpOut) .attr("transform", d => { const angle = Math.random() * 2 * Math.PI; // Random angle const distance = 150 + Math.random() * 150; // Random distance const dx = Math.cos(angle) * distance; const dy = Math.sin(angle) * distance; return `translate(${dx},${dy})`; }) .style("opacity", 0) .on("end", function() { d3.select(this).remove(); // Optionally remove elements after animation }); } // Trigger the explosion after 1 second setTimeout(explode, 1000); return svg.node(); // Ensure we return the node for rendering } 35:[{"id":"acdf8f9bb597f15eb4d9c20102397146098d2910a3bbb101e9c9470c7f5a289d9b68df51822b072b17d9aca4a4a2a07631f9435657b17d032dda881a9905e502","href":"https://static.observableusercontent.com/files/acdf8f9bb597f15eb4d9c20102397146098d2910a3bbb101e9c9470c7f5a289d9b68df51822b072b17d9aca4a4a2a07631f9435657b17d032dda881a9905e502","name":"no_unit.csv","type":"text/csv","lastModified":1715254962097.946,"size":27045},{"id":"e90ae902635a65663ca8bdb2c101f55a81a12bbafcb9af67f63fbde04c059b5fdc594954c494e7cc33160f18b790b62ef50cf1fb2a76f8396ab9d2cf850ecf4a","href":"https://static.observableusercontent.com/files/e90ae902635a65663ca8bdb2c101f55a81a12bbafcb9af67f63fbde04c059b5fdc594954c494e7cc33160f18b790b62ef50cf1fb2a76f8396ab9d2cf850ecf4a","name":"Screenshot 2024-04-25 at 4.58.25 PM.png","type":"image/png","lastModified":1715254962097.946,"size":174828},{"id":"b4aa94659d6c97a603d46262c6f56ebbfb1898b4c6409cf72eba5bdaf31cf256258d99c3925da5bebb40e02510fcb1b02f1e9836f988a88aef26465709d66a28","href":"https://static.observableusercontent.com/files/b4aa94659d6c97a603d46262c6f56ebbfb1898b4c6409cf72eba5bdaf31cf256258d99c3925da5bebb40e02510fcb1b02f1e9836f988a88aef26465709d66a28","name":"Screenshot 2024-04-25 at 4.58.47 PM.png","type":"image/png","lastModified":1715254962097.946,"size":147394},{"id":"9766733a5e40c8fdb389fb509afc36dd1f44ed5be200d0f10f50048c8165beadf6e446ea39d5df70a3f85578229feb35922bb5f4a749857ee12920ee2b9f9a0e","href":"https://static.observableusercontent.com/files/9766733a5e40c8fdb389fb509afc36dd1f44ed5be200d0f10f50048c8165beadf6e446ea39d5df70a3f85578229feb35922bb5f4a749857ee12920ee2b9f9a0e","name":"starbucks_drinkMenu_expanded@1.csv","type":"text/csv","lastModified":1715254962097.946,"size":26898}] 2d:{"id":"68c1caec9572f78f","slug":null,"title":"SipSmart: Unveiling Starbucks- anu","thumbnail":"ab46ce6a67936f9f8882f71fef0702ea56bd59572b0b54e5d7ce87ce518282ce","access_level":"public","create_time":"$D2024-05-09T11:42:42.097Z","update_time":"$D2024-05-09T11:43:10.680Z","view_time":null,"first_public_time":"$D2024-05-09T11:42:59.372Z","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":846,"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":0,"collection":null,"type":"notebook","body":{"title":"SipSmart: Unveiling Starbucks- anu","cells":[{"id":0,"value":"# SipSmart: Unveiling Starbucks- anu\n","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":835,"value":"screenshot20240425At45825Pm = FileAttachment(\"Screenshot 2024-04-25 at 4.58.25 PM.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":836,"value":"screenshot20240425At45847Pm = FileAttachment(\"Screenshot 2024-04-25 at 4.58.47 PM.png\").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@1.csv\").text(),\n d3.autoType\n) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"drink_nounit = d3.csvParse(\n await FileAttachment(\"no_unit.csv\").text(),\n d3.autoType\n) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"md`### Filter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"category = Object.keys(drink_nounit[0])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"detailOptions = Array.from(new Set(drink_nounit.map(d => d[category[1]])));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"viewof details = Inputs.select(detailOptions, { label: \"Category\" });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"selectedData = {\n let selected_data = [];\n\n const key = category[1];\n const value = viewof details.value;\n const list = drink_nounit.filter(d => d[key] === value);\n \n for (let i = 0; i < list.length; i++) {\n selected_data.push(list[i]);\n }\n return selected_data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"data_dic = {\n let data_dic = [];\n \n for (let i = 0; i < selectedData.length; i++) {\n let beverage = selectedData[i]['Beverage'];\n let milk = selectedData[i]['Beverage_prep'];\n let name = beverage + \" \" + milk\n let sugar = selectedData[i]['Sugars'];\n let fat = selectedData[i]['Total_Fat'];\n let sodium = selectedData[i]['Sodium'];\n let caffeine = selectedData[i]['Caffeine'];\n let vitaminA = parseInt(selectedData[i]['VitaminA'].split(\"%\")[0]);\n let vitaminC = parseInt(selectedData[i]['VitaminC'].split(\"%\")[0]);\n let vitamin = vitaminA + vitaminC;\n let calcium = parseInt(selectedData[i]['Calcium'].split(\"%\")[0]);\n \n // Push cup data to data_dic\n data_dic.push({ name, sugar, fat, sodium, caffeine, vitamin, calcium });\n }\n return data_dic\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`### Visual`","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":807,"value":"function roundToNearestTen(num) {\n return Math.ceil(num / 10) * 10;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"svg_nutrition_cup(data_dic)","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":"$31","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":329,"value":"viewof size = Inputs.radio(new Map([[\"Short\", 1], [\"Tall\", 1.5], [\"Grande\", 2], [\"Venti\", 2.5]]), {value: 1, label: \"Size\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"