2b:null 2c:["$","title",null,{"children":"How do two Starbucks Drinks compare in Nutritional Content? | Liwen Peng | Observable"}] 31:Te86,chart = { const div = html`

`; const svg = d3.select(div).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // add the title of the chart svg.append("text") .attr("class", "title") .attr("x", 300) .attr("y", -65) .html(function (d) {return "" + "Comparison of " + comparison_selected + " in " + drink1_selected + "" + "" + " and in " + drink2_selected + "";}) .style("font-size", "18px") .style("font-weight", "bold") .attr("text-anchor", 'middle'); // draw axes yScale.domain([0, selectedData[0] == "Varies" ? 370 : (d3.max(selectedData) + offset(d3.max(selectedData)))]); svg.append("g") .attr("class", "y-axis") .style("font-size", "13px") .call(d3.axisLeft(yScale)); svg.append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${height})`) .style("font-size", "13px") .call(xAxis); // create bar labels const texts = svg.selectAll(".text") .data(filteredData) .enter().append("text") .text(d => Object.values(d)[index]) .attr("x", d => (xScale(d.Beverage) + xScale.bandwidth() / 2)) .attr("y", d => (Object.values(d)[index] == "Varies" ? 398 : yScale(Object.values(d)[index]) - 2)) .style("font-size", "16px") .style("fill", "black") .style("text-anchor", "middle"); // create bars const bar = svg.selectAll(".bar") .data(filteredData) .enter().append("rect") .style("fill", d => colorScale(d.Beverage)) .attr("class", "bar") .attr("x", d => xScale(d.Beverage)) .attr("y", d => yScale(Object.values(d)[index])) .attr("width", xScale.bandwidth()) .attr("height", d => height - yScale(Object.values(d)[index])) // draw the color legend const legend_width = 20; const legend_height = 10; svg.append("rect") .attr("x", (width - legend_width * 2 - 120 * 2) / 2) .attr("y", height + 44) .attr("width", legend_width) .attr("height", legend_height) .attr("fill", "#6D0B0B") .attr("opacity", "0.8"); svg.append("text") .attr("x", (width - legend_width * 2 - 120 * 2) / 2 + 33) .attr("y", height + 50) .text(comparison_selected + " in " + drink1_selected) .attr("font-family", "sans-serif") .style("font-size", "13px") .attr("alignment-baseline","middle"); if (drink1_selected != drink2_selected) { svg.append("rect") .attr("x", (width - legend_width * 2 - 120 * 2) / 2) .attr("y", height + 61) .attr("width", legend_width) .attr("height", legend_height) .style("fill", "#dfce99") .attr("opacity", "0.8"); svg.append("text") .attr("x", (width - legend_width * 2 - 120 * 2) / 2 + 33) .attr("y", height + 67) .text(comparison_selected + " in " + drink2_selected) .attr("font-family", "sans-serif") .style("font-size", "13px") .attr("alignment-baseline","middle"); } // add axes labels svg.append("text") .attr("class", "axis-label") .text("Beverage") .attr("x", width - 37) .attr("y", height + 18) .style("font-size", "15px") .style("font-weight", "bold"); svg.append("text") .attr("class", "axis-label") .text(comparison_selected) .attr("x", -30) .attr("y", -25) .style("font-size", "15px") .style("font-weight", "bold"); return div; }32:[{"id":"2424fd5d1bed49030e29d010b13761d192482cb6167cb0ffe5c9f025e62889ce438c77aefb66b465e66dd9ef734667863ffbc4ed8b4757a72bdb6a14c9a99839","href":"https://static.observableusercontent.com/files/2424fd5d1bed49030e29d010b13761d192482cb6167cb0ffe5c9f025e62889ce438c77aefb66b465e66dd9ef734667863ffbc4ed8b4757a72bdb6a14c9a99839","name":"starbucks_drinks.json","type":"application/json","lastModified":1676336218437.769,"size":11040}] 2f:{"id":"a6ca506b6e1dc649","slug":null,"title":"How do two Starbucks Drinks compare in Nutritional Content?","thumbnail":"1a2c41e9eaa203b47d7bd66be3147e09f72cfd1d861f184c7e757d0dd5b8c92f","access_level":"public","create_time":"$D2023-02-05T03:30:52.704Z","update_time":"$D2023-02-14T01:04:11.737Z","view_time":null,"first_public_time":"$D2023-02-05T03:30:52.704Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3d648461531216f2","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":"starter_2024"},"version":893,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a805c41a57924202","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":null}],"members":[{"type":"individual","id":"a805c41a57924202","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":null,"role":"editor"},{"type":"individual","id":"3886948c9bdafedc","login":"sg721","name":"Sneh Gupta","avatar_url":"https://avatars-next.observableusercontent.com/a5dc8991f45a4ace4b1386dfaeba35622f62bb722a6327a5bb56549a41d97ac4","tier":null,"role":"editor"},{"type":"individual","id":"b0a4e499ce26f84e","login":"yifanz47","name":"Yifan Zhang","avatar_url":"https://avatars-next.observableusercontent.com/5508017bf124d85c924fcfb17d7af959ef9cba231160e79051cd4a36da011eac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"How do two Starbucks Drinks compare in Nutritional Content?","cells":[{"id":0,"value":"# How do two Starbucks Drinks compare in Nutritional Content?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"dataset = FileAttachment(\"starbucks_drinks.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"margin = ({top: 100, right: 35, bottom: 80, left: 38});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"width = 885 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"height = 580 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"xScale = d3.scaleBand() \n .padding([0.5])\n .range([0, width])\n .domain([drink1_selected,drink2_selected])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":" yScale = d3.scaleLinear()\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"xAxis = d3.axisBottom(xScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"yAxis = d3.axisLeft(yScale)\n .tickSize(-width)\n .ticks(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"function dropdown(options) {\n let dd = html `