2d:null 2e:["$","title",null,{"children":"Untitled | Amber Hoak | Observable"}] 33:T13ae,wineChart = (showLegend) => { // These charts are not meant to be a D3 guide, if you're intrested in learning more about D3, you can't do much better than this guide: http://d3indepth.com/shapes/ const elementHeight = 140 const svg = d3.select(DOM.svg(width, elementHeight + 220)) .style('font', '16px verdana, sans-serif'); /* Adding our wine bottles */ const xAxis = svg.append('g') .selectAll('g') .data(wineClassesReduce) .enter() // We need to add nested svg elements here so we can align our bottles properly on a baseline. Also, the way our data is structured, it's easier to access the color scale in this loop which we can apply to the svg element. const bottleHolder = xAxis.append('svg') .attr('width', 30) .attr('height', 100) .attr('fill', d => wineClassColorScale(d.name)) .attr('x', d => wineClassScale(d.name) - 15) .attr('y', height + margin) xAxis.append('text') .attr('transform', d => `translate(${wineClassScale(d.name) - 5}, ${height + 50})rotate(-45)`) .attr('fill', 'black') .attr('text-anchor', 'middle') .attr('font-size', mediumFont) .text((d,i) => foodNames[i]) .attr('fill', d => wineClassColorScale(d.name)) /* /* Adding our foods in the right sidebar */ const modifiedData = wineIsServed.foodClasses const foodClass = svg.append('g') .attr('transform', `translate(${width - sideBar},0)`) .selectAll('g') .data(modifiedData) .enter() .append('g') .attr('transform', (d, i) => `translate(0,${foodClassScale(d.name)})`) foodClass.append('text') .attr('fill', '#58585A') .attr('font-size', largeFont) .attr('y', 5) .text(d => d.name) foodClass.append('text') .attr('fill', '#58585A') .attr('font-size', mediumFont) .attr('font-style', 'italic') .attr('y', 10) .text(d => d.name) .text(d => d.foods.reduce((p,n) => `${p ? `${p}, `:''} ${n}`,'')) .attr('dy', 10); /* Adding our food pairings in the middle */ const foodPairs = svg.append('g') .selectAll('g') .data(modifiedData) .enter() .append('g') .attr('transform',d => `translate(0, ${foodClassScale(d.name)})`) .classed('foodPair', true) // Lines left to right foodPairs.append('line') .attr('y1', 0) .attr('y2', 0) .attr('x1', 5) .attr('x2', width - sideBar - margin) .attr('stroke', d => foodCategoryColorScale(d.foodCategory)) .attr('stroke-dasharray', '3 4') // Standard pairings foodPairs.selectAll('.foodPairs') .data(d => d.wineClassPairings) .enter() .append('circle') .attr('r',5) .attr('cy', 0) .attr('cx', d => wineClassScale(d.name)) .attr('fill', d => wineClassColorScale(d.name)) // Perfect pairings foodPairs.selectAll('.foodPairs') .data(d => d.wineClassWFPPs) .enter() .append('circle') .attr('r',10) .attr('cy', 0) .attr('cx', d => wineClassScale(d.name)) .attr('fill', d => wineClassColorScale(d.name)) // Lines top to bottom const wineClass = svg.append('g') .selectAll('g') .classed('wine-class', true) .data(wineClassesReduce.map(d => d.name)) .enter() .append('g') .attr('transform', d => `translate(${wineClassScale(d)}, 0)`) .append('line') .attr('x1', 0) .attr('x2', 0) .attr('y1', margin) .attr('y2', showLegend ? elementHeight + 10 : elementHeight * 2 + 10) .attr('stroke', d => wineClassColorScale(d)) /* Setting up left side labels */ const foodCategories = svg.append('g') .selectAll('g') .classed('food-class', true) .data([Object.keys(foodCategoryBuckets)[0], Object.keys(foodCategoryBuckets)[1]]) .enter() foodCategories.append('rect') .attr('x', 0) .attr('y', (d, i) => i * 100 + (i*30) ) .attr('rx', 8) .attr('ry', 8) .attr('width', 30) .attr('height', (d,i) => { const elArr = foodCategoryBuckets[d] const firstEl = elArr[0] const lastEl = elArr[elArr.length - 1] const firstPos = foodClassScale(firstEl.name) const lastPos = foodClassScale(lastEl.name) return lastPos - (i * 100 + 15) + 40 + i*8 }) .attr('fill', d => foodCategoryColorScale(d)) foodCategories.append('text') .attr('transform', (d,i) => { const elArr = foodCategoryBuckets[d] const firstEl = elArr[0] const lastEl = elArr[elArr.length - 1] const firstPos = foodClassScale(firstEl.name) const lastPos = foodClassScale(lastEl.name) const newY = firstPos + ((lastPos - firstPos)/2) + i* 23 return `translate(${margin + 5}, ${newY})rotate(270)` }) // .attr('y', d => { // const elArr = foodCategoryBuckets[d] // const firstEl = elArr[0] // console.log("y", firstEl.name) // return foodClassScale(firstEl.name) // }) .attr('text-anchor', 'middle') .attr('font-size', 14) .text(d => d.toUpperCase()) return svg.node() }34:T461,md`### Scales, the Magic Sauce The magic sauce in D3 is without a doubt the power of it's scale functions. This allows us to map values like 'red, white, blue' to numerical output like '100, 200, 300'. It is what drives our entire visual. We 'interpolate' the Wine Class names to positions and colors. We do the same with Food Categories and Food Classes. The general construction of a scale is as such: Declare the type of scale with something like d3.scaleOrdinal. Domain is the type of input, such as our string values. Adding the range tells us what it should map the output to. Domains and ranges can be either discrete or continous. Discrete means they are defined input 'buckets' whereas continous means to use whatever value happens to come in. An example of continuous would be mapping time as an input within an upper and lower bound (say, the length of a day) to the output of blue to red color. Regardless of what time we give as an input, as long as it's within our range, it will produce a unique color value somewhere along that range. I've provided tabular views below to show the mapping of the data. `35:Tbe7,bottles = { const b1 = `` const b2 = ` ` const b3 = `` const b4 = `` const b5 = `` const b6 = `` return ({ Bold_Red: b1, Dessert: b6, Light_Red: b1, Light_White: b2, Medium_Red: b2, Rich_White: b3, Rose: b3, Sparkling: b4, Sweet_White: b5 })}36:[] 31:{"id":"5f4c2a121802f6e7","slug":"the-wine-folly-food-pairing-guide-as-_powered_-by-graphcms","title":"","thumbnail":"af7c68987e628f6fd130a4a13405ae96c74189e1c4ba977b62f7af261f6722ed","access_level":"public","create_time":"$D2019-07-17T22:06:10.095Z","update_time":"$D2019-10-01T20:19:16.424Z","view_time":null,"first_public_time":"$D2019-07-17T22:18:46.100Z","has_unpublished_edits":null,"fork":{"id":"fda941d193605949","slug":"the-wine-folly-food-pairing-guide-as-interpreted-by-graphcm","title":"The Wine Folly Food pairing Guide as _powered_ by GraphCMS","owner":{"id":"8ac22c4397aeac05","login":"motleydev","name":"Jesse"}},"stars":0,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":1278,"publish_version":1278,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":800,"value":"md`## Mock chart based on the Food Pairing adapted to Disney Rides`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"wineChart(false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"themeParkData = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-visualization-workshop/master/data/themePark/themePark.json\")).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"landsAvail = {\n return themeParkData.reduce((acc, d)=> {\n const kingdom = d.kingdom\n const land = d.land\n if(!acc[kingdom]) {\n acc[kingdom] = new Set([])\n }\n acc[kingdom ].add(land)\n return acc \n},{})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"wineIsServed = {\n const foodCategoryOrder = Object.keys(landsAvail).reduce((acc, o,i)=>{\n acc[o] =i\n return acc\n },{})\n\n const foodClasses = themeParkData.reduce((acc, item, i)=>{\n const name = item[\"short_name\"]\n const foodCategory = item.kingdom \n const lands = landsAvail[foodCategory]\n const foods = Array.from(lands)\n const wineClassPairings = winedata.foodClasses[i].wineClassPairings\n const wineClassWFPPs = winedata.foodClasses[i].wineClassWFPPs\n acc.push({name,foodCategory,foods,wineClassPairings, wineClassWFPPs })\n return acc\n }, []).sort((a,b)=> foodCategoryOrder[a.foodCategory] - foodCategoryOrder[b.foodCategory]).slice(0,6)\n return {foodClasses}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"md`## Wines According to Type`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"wineList = {\n \n const svg = d3.select(DOM.svg(width, 300))\n .style('font', '16px verdana, sans-serif')\n \n const wineBuckets = svg.append('g')\n .selectAll('g')\n .data(wineClassesReduce)\n .enter()\n .append('g')\n \n const bottleHolder = wineBuckets.append('svg')\n .attr('width', 60)\n .attr('height', 100)\n .attr('viewBox', '0 0 45 150')\n .attr('fill', \"black\")\n .attr('x', (d, i) => Math.floor((i / 3)) * (width / 4))\n .attr('y', (d, i) => (i % 3) * 100)\n \n bottleHolder.html( d => bottles[d.slug])\n \n svg.append('g')\n .attr('transform', (d,i) => `translate(${(Math.floor((i / 3)) * (width / 2)) + 60}, ${((i % 3) * 225) + margin + 10})`)\n .selectAll('text')\n .data(wineClassesReduce)\n .enter()\n .append('text')\n .attr('y', (d,i) => (largeFont + 6) * i)\n .text(d => d.name)\n .attr('x', (d, i) => Math.floor((i / 3)) * (width / 4))\n .attr('y', (d, i) => (i % 3) * 100)\n\n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`## Writing the query\nHere is the query we used to fetch the data. Through the power of the graph, we are able to structure our request in whatever meaningful way we would like. In our case, we choose our yAxis of data, grouped by the corresponding category. A unique selling point of GraphQL is that order of delivery is a gaurantee. The exact way you ask for the data is the exact way it will be delivered.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"html`

Now we just fetch the data!

\n\n\n${Object.keys(winedata.foodClasses[0]).map(d => `\n\n`).join(' ')}\n\n${winedata.foodClasses.slice(0,5).map(d => `\n\n\n \n \n \n \n \n`).join('')}\n\n

${d}
${d.name}	${d.foodCategory}	${d.foods.slice(0,3).map(d => d.name).join(', ')}…	${d.wineClassPairings.slice(0,3).map(d => d.name).join(', ')}…	${d.wineClassWFPPs.slice(0,3).map(d => d.name).join(', ')}…

…

\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"winedata = {\n const openTheBar = async () => {\n const res = await fetch('https://api-euwest.graphcms.com/v1/cjj75a4cx05hv01gg1zjttejo/master', {\n headers: {'Content-Type': 'application/json'},\n method: 'POST',\n body: JSON.stringify({ query: wineQuery })\n });\n return res\n }\n \n const popTheCork = await openTheBar()\n const fillTheGlasses = await popTheCork.json()\n\nreturn fillTheGlasses.data\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`### Wine Classes, Colors and Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"wineReduce = {\n const data = new Set()\n const arrs = winedata.foodClasses\n .reduce((p, n) => [...p, ...n.wineClassPairings], [])\n .reduce((p, n) => [...p, ...n.wines],[])\n .reduce((p,n) => {\n if (data.has(n.name)) return p\n data.add(n.name)\n return [...p, {name: n.name, class: n.wineClass.name}]\n }, [])\n .sort()\n \n return arrs\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"wineClassesReduce = {\n const data = new Set()\n const arrs = wineIsServed.foodClasses\n .reduce((p, n) => [...p, ...n.wineClassPairings], [])\n .reduce((p,n) => {\n if (data.has(n.name)) return p\n data.add(n.name)\n return [...p, n]\n }, [])\n .sort()\n \n return arrs\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"wineClassScale = d3.scalePoint()\n .domain(wineClassesReduce.map(d => d.name))\n .range([margin + 50, width - sideBar - (margin*2)])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"html`\n\n${wineClassesReduce.map(d => {\n\n return ``\n \n})}\n

${d.name}

${wineClassScale(d.name)}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"wineClassColors = ({\n bordeaux: \"#4b1a26\",\n tuscany: \"#c05c28\",\n red: \"#ed1d48\",\n yellowGreen: \"#8cc63f\",\n claret: \"#7e1832\",\n brightSun: \"#fed23e\",\n lightCarminePink: \"#f1696a\",\n fountainBlue: \"#57c5c7\",\n yellowOrange: \"#fbab40\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"swatches(Object.values(wineClassColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"foodNames = [\n'Cucumber Sandwiches',\n\n'Steak',\n\n'Eggs Benedict',\n\n'Spaghetti Bolognese',\n\n'Quiche',\n\n'Dim Sum',\n\n'Chicken Tikka Masala',\n\n'Curry',\n'Roast Chicken'\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"wineClassColorScale = d3.scaleOrdinal()\n .domain(wineClassesReduce)\n .range(Object.values(wineClassColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"wineColors = {\n return html`\n \n ${wineClassesReduce.map((d,i) => {\n\n return ``\n\n })}\n

${foodNames[i]}

${wineClassColorScale(d.name)}

\n`\n \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"wineQuery = `\n{\n foodClasses(orderBy: foodCategory_ASC) {\n name\n foodCategory\n foods {\n name\n }\n wineClassPairings(orderBy: slug_ASC) {\n name\n slug\n wines {\n name\n wineClass {\n name\n }\n }\n }\n wineClassWFPPs(orderBy: slug_ASC) {\n name\n slug\n wines {\n name\n wineClass {\n name\n }\n }\n }\n }\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`### Food Classes, Colors and Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"foodClasses = wineIsServed.foodClasses.map(d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"wineIsServed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"foodClassScale = d3.scalePoint()\n .domain(foodClasses)\n .range([margin,height - margin])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"html`\n\n${foodClasses.slice(0,10).map(d => {\n\n return ``\n \n})}\n

${d}	${foodClassScale(d)}

\n...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`### Food Category, Colors and Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"foodCategoryBuckets = {\n const data = foodCategoryReduce.reduce(\n (result, item, index) => {\n result[item] = [];\n return result\n }, {})\n \n for (let key of Object.keys(data)) {\n data[key] = wineIsServed.foodClasses.filter(d => d.foodCategory === key)\n }\n \n return data\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"foodCategoryReduce = [...new Set(wineIsServed.foodClasses.map(d => d.foodCategory))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"foodCategoryColors = ({\n urobilin: \"#e0aa25\",\n lightSeaGreen: \"#14a89e\",\n carnation: \"#f05d65\",\n gray: \"#8f9292\",\n carrotOrange: \"#f09222\",\n wildBlueYonder: \"#8283b8\",\n androidGreen: \"#a3c239\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"swatches(Object.values(foodCategoryColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"foodCategoryColorScale = d3.scaleOrdinal()\n .domain(foodCategoryReduce)\n .range(Object.values(foodCategoryColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"modFoodCategories = [Object.keys(foodCategoryBuckets)[0], Object.keys(foodCategoryBuckets)[1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"foodCatDisplay = {\n const content = html`\n\n${modFoodCategories.map(d => {\n const color = foodCategoryColorScale(d)\n return `` }\n )}\n

${d}

${color}

\n`\n return content\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`### Bottles\nSince we are already stealing the data set we scraped from the poster, why not steal the shapes? I've provided the svg elements here for reference. I copied them by hand, and since this is **not** a design tutorial, you'll have to live with their quality. Feel free to do with them as you will! Notice there's no fill, we add the fill as a function of our color scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`## General Utilities and Requires\nThis is simply a list of magic numbers and utilities we use for deriving our measurements above. They're all arbitrary, you can play around with the various sizes yourself and see if you like something better than the definitions here. Enjoy!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"largeFont = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"mediumFont = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"sideBar = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"footer = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"margin = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"height = wineIsServed.foodClasses.length * ((margin / 2) + largeFont * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"md`Shout out to Mike Bostock for the awesome color utils. He provides more in depth details about working with colors [here](https://beta.observablehq.com/@mbostock/working-with-color).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = \"calc(100% + 28px)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function swatch(color) {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"function swatches(colors) {\n return html`${colors.map(c => `

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 32:"$31:body"