34:["$","title",null,{"children":"The Wine Folly Food pairing Guide as _powered_ by GraphCMS | Jesse | Observable"}] 3c:T511,md`# The Wine Folly Food pairing Guide as _powered_ by GraphCMS If you've made it here without first seeing the tutorial, you'll likely be a little confused. This is the visual part of a lengthy tutorial on creating a project with GraphCMS (my employer), importing data and calling it to the front-end. GraphCMS is an excellent headless CMS that provides a native GraphQL API. You can check out the tuorial at the following link! Because this isn't a design tutorial, I'm only recreating the chart partially. To view the whole chart in it's beaty, do check out the awesome work of the Wine Folly people and view the chart at the link below! **Tutorial:** [Create a Project with GraphCMS from Scratch](https://graphcms.com/blog/wine-db/) **Chart:**

**Awesome CMS:**

`3d:T144f,chart = { // 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 svg = d3.select(DOM.svg(width, height + footer)) .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) bottleHolder.html( d => bottles[d.slug]) xAxis.append('text') .attr('transform', d => `translate(${wineClassScale(d.name) - 15}, ${height + 150})rotate(-45)`) .attr('fill', 'black') .attr('text-anchor', 'middle') .attr('font-size', mediumFont) .text(d => d.name) /* Adding our foods in the right sidebar */ const foodClass = svg.append('g') .attr('transform', `translate(${width - sideBar},0)`) .selectAll('g') .data(wineIsServed.foodClasses) .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.name}`,'')) .attr('dy', 10); /* Adding our food pairings in the middle */ const foodPairs = svg.append('g') .selectAll('g') .data(wineIsServed.foodClasses) .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', height - margin) .attr('stroke', d => wineClassColorScale(d)) .on('mouseover', (d,i) => console.log(d,i)) /* Setting up left side labels */ const foodCategories = svg.append('g') .selectAll('g') .classed('food-class', true) .data(Object.keys(foodCategoryBuckets)) .enter() foodCategories.append('rect') .attr('x', 10) .attr('y', d => foodClassScale(foodCategoryBuckets[d][0].name) - 1) .attr('width', 30) .attr('height', d => { 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 - firstPos + 2 }) .attr('fill', d => foodCategoryColorScale(d)) foodCategories.append('rect') .attr('x', 0) .attr('y', d => foodClassScale(foodCategoryBuckets[d][0].name) - 1) .attr('rx', 8) .attr('ry', 8) .attr('width', 30) .attr('height', d => { 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 - firstPos + 2 }) .attr('fill', d => foodCategoryColorScale(d)) foodCategories.append('text') .attr('transform', d => { 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) return `translate(${margin + 5}, ${newY})rotate(270)` }) .attr('text-anchor', 'middle') .attr('font-size', 14) .text(d => d.toUpperCase().replace('_', ' ')) return svg.node(); }3e:T611,overlapChart = { const svg = d3.select(DOM.svg(width, 800)) .style('font', '16px verdana, sans-serif') svg.append('g') .selectAll('g') .data(Object.values(JSON.parse(sharedWineVariables))) .enter('') .append('circle') .attr('r', 150) .attr('cy', 150) .attr('cx', (d, i) => ((i) * 200)+150) .attr('fill', d => wineClassColorScale(d)) .attr('opacity', 0.75) const filteredWine = svg.append('g') .attr('transform', 'translate(0, 350)') .selectAll('g') .data(wineClassesReduce.reduce( (prev, next) => { if (checkWines.map(d => d.wineClass.name).indexOf(next.name) == -1) return prev // This allows us to filter the ammount of wine classes we have depending on if we have a match from the server or not. Otherwise we'd have a bunch of empty wine classes. return [...prev, next] },[])) .enter() const wineBuckets = filteredWine.append('g') .attr('transform', (d,i) => `translate(${(i % 3) * 300}, ${Math.floor(i / 3) * 200})`) wineBuckets.append('g') .selectAll('g') .data(d => checkWines .filter(w => d.name == w.wineClass.name)) .enter() .append('text') .attr('y', (d,i) => i * (largeFont + 5)) .attr('x', 75) .text(d => d.name) const bottleHolder = wineBuckets.append('svg') .attr('width', 60) .attr('height', 200) .attr('viewBox', '0 0 30 100') .attr('fill', d => wineClassColorScale(d.name)) .attr('y', -30) bottleHolder.html( d => bottles[d.slug]) return svg.node() }3f:T59b,fourOverlapChart = { const svg = d3.select(DOM.svg(width, 900)) .style('font', '16px verdana, sans-serif') svg.append('g') .selectAll('g') .data(Object.values(JSON.parse(fourSharedWineVariables))) .enter('') .append('circle') .attr('r', 150) .attr('cy', (d,i) => ((i % 2) * 150)+150) .attr('cx', (d, i) => (Math.floor(i / 2) * 200)+150) .attr('fill', d => wineClassColorScale(d)) .attr('opacity', 0.5) const filteredWine = svg.append('g') .attr('transform', 'translate(0, 490)') .selectAll('g') .data(wineClassesReduce.reduce( (prev, next) => { if (checkWinesForFour.map(d => d.wineClass.name).indexOf(next.name) == -1) return prev return [...prev, next] },[])) .enter() const wineBuckets = filteredWine.append('g') .attr('transform', (d,i) => `translate(${(i % 3) * 300}, ${Math.floor(i / 3) * 200})`) wineBuckets.append('g') .selectAll('g') .data(d => checkWinesForFour .filter(w => d.name == w.wineClass.name)) .enter() .append('text') .attr('y', (d,i) => i * (largeFont + 5)) .attr('x', 75) .text(d => d.name) const bottleHolder = wineBuckets.append('svg') .attr('width', 60) .attr('height', 200) .attr('viewBox', '0 0 30 100') .attr('fill', d => wineClassColorScale(d.name)) .attr('y', -30) bottleHolder.html( d => bottles[d.slug]) return svg.node() }40: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. `41: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 })}42:[] 38:{"id":"fda941d193605949","slug":"the-wine-folly-food-pairing-guide-as-interpreted-by-graphcm","title":"The Wine Folly Food pairing Guide as _powered_ by GraphCMS","thumbnail":"44eb6afb5177fd6303624045327248bb59f60e5ba961ebe59fa9ff36a40b5d5c","access_level":"public","create_time":"$D2018-07-10T09:26:38.751Z","update_time":"$D2019-02-07T20:29:25.390Z","view_time":null,"first_public_time":"$D2018-07-12T15:44:34.083Z","has_unpublished_edits":null,"fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"8ac22c4397aeac05","login":"motleydev","name":"Jesse","avatar_url":"https://avatars-next.observableusercontent.com/8b27ded428b05cc7f591fe435f6c819d064f31305a7fa6549eed558c444083ca","tier":"starter_2024","bio":"Brand, product and web developer. Dev Advocate for GraphCMS. Husband, Father and US Expat in Germany.","followed_by_you":false,"follows_you":false},"version":1010,"publish_version":1010,"role":null,"authored":false,"authors":[{"type":"individual","id":"8c731744a285379c","login":"motleydev","name":"Jesse","avatar_url":"https://avatars-next.observableusercontent.com/8b27ded428b05cc7f591fe435f6c819d064f31305a7fa6549eed558c444083ca","tier":null,"bio":"Brand, product and web developer. Dev Advocate for GraphCMS. Husband, Father and US Expat in Germany.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8c731744a285379c","login":"motleydev","name":"Jesse","avatar_url":"https://avatars-next.observableusercontent.com/8b27ded428b05cc7f591fe435f6c819d064f31305a7fa6549eed558c444083ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Wine Folly Food pairing Guide as _powered_ by GraphCMS","cells":[{"id":0,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"md`## Food Pairing Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"wineList = {\n \n const svg = d3.select(DOM.svg(width, 675))\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', 200)\n .attr('viewBox', '0 0 45 150')\n .attr('fill', d => wineClassColorScale(d.name))\n .attr('x', (d, i) => Math.floor((i / 3)) * (width / 2))\n .attr('y', (d, i) => (i % 3) * 225)\n \n bottleHolder.html( d => bottles[d.slug])\n \n wineBuckets.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(d => wineReduce.filter(w => d.name == w.class))\n .enter()\n .append('text')\n .attr('y', (d,i) => (largeFont + 6) * i)\n .text(d => d.name)\n\n return svg.node()\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"html`

Now we just fetch the data!

\n\n\n${Object.keys(wineIsServed.foodClasses[0]).map(d => `\n\n`).join(' ')}\n\n${wineIsServed.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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"wineIsServed = {\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`This is just a cheeky title for fetching our wine database. We use the browser's implementation of fetch, so if you're on an old browser, this probably looks strange.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"md`## The Same Data, Asked for Differently\nWhat if we wanted to add some interactivity to our chart? What if we wanted to find the selection of wines that were shared between two foods?\n\nHere we need to pass in criteria that has to match all cases. This is our same dataset, simply restrucutred in the request. One API, tons of ways to ask.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"sharedWineQuery = `\nquery getSharedWines($wineOne: String, $wineTwo: String){\n wines(where: {\n wineClass: {\n AND: [\n {\n foodClassPairings_some: {\n name: $wineOne\n }\n },\n {\n foodClassPairings_some: {\n name: $wineTwo\n }\n }\n ]\n }\n }) {\n name\n wineClass {\n name\n }\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"sharedWineVariables = `\n{\n \"wineOne\": \"${foodPair1of2}\",\n \"wineTwo\": \"${foodPair2of2}\"\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"md`## Pairing 2 or More Food Classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"viewof foodPair1of2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof foodPair2of2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"checkWines = {\n\n const getSharedWines = async () => {\n\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: sharedWineQuery, variables: sharedWineVariables})\n });\n\n return res\n\n }\n \n const sharedWineResponse = await getSharedWines()\n const sharedWineBody = await sharedWineResponse.json()\n if (sharedWineBody.errors) console.log(sharedWineBody.errors)\n const sharedWineData = await sharedWineBody.data\n \n return sharedWineData.wines\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"md`## Pairing 4 Foods\nBecause the GraphQL Syntax is so flexible, we can easily modify this to a more complex query and check for the cross section of four Food Classes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"fourWineQuery = `\nquery getSharedWines($wineOne: String, $wineTwo: String, $wineThree: String, $wineFour: String){\n wines(where: {\n wineClass: {\n AND: [\n {\n foodClassPairings_some: {\n name: $wineOne\n }\n },\n {\n foodClassPairings_some: {\n name: $wineTwo\n }\n },\n {\n foodClassPairings_some: {\n name: $wineThree\n }\n },\n {\n foodClassPairings_some: {\n name: $wineFour\n }\n }\n ]\n }\n }) {\n name\n wineClass {\n name\n }\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"fourSharedWineVariables = `\n{\n \"wineOne\": \"${foodPair1of4}\",\n \"wineTwo\": \"${foodPair2of4}\",\n \"wineThree\": \"${foodPair3of4}\",\n \"wineFour\": \"${foodPair4of4}\"\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"viewof foodPair1of4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"viewof foodPair2of4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"viewof foodPair3of4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"viewof foodPair4of4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"checkWinesForFour = {\n\n const getSharedWines = async () => {\n\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: fourWineQuery, variables: fourSharedWineVariables})\n });\n\n return res\n\n }\n \n const sharedWineResponse = await getSharedWines()\n const sharedWineBody = await sharedWineResponse.json()\n if (sharedWineBody.errors) console.log(sharedWineBody.errors)\n const sharedWineData = await sharedWineBody.data\n \n return sharedWineData.wines\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"md`## And that's it!\nUsing the power of GraphQL we are able to make flexible queries to our content structure living in GraphCMS. The rest of this documentation talks about some helpers that went into making this project work. Feel free to read further if you're interested in the code magic behind the curtain!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md`## Data Munging, Shapes and Scales\nAs with all data viz projects, data manipulation is always half the battle. More is written on this in the official tutorial, but needless to say, even with the mighty powers of our GraphQL query, sometimes we just have to get our hands dirty. Below are a series of derived datasets that help with our visualization. It's possible there are more elegant ways to handle some of these with D3 itself. My D3 powers only go so far, so if you have a better way, fork it and tell me about it!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"wineReduce = {\n const data = new Set()\n const arrs = wineIsServed.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","tool":"$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","tool":"$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","tool":"$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)}

${d.name}

${wineClassColorScale(d.name)}

${d}	${foodClassScale(d)}

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"html`\n\n${foodCategoryReduce.map(d => {\n\n return ``\n \n})}\n

${d}

${foodCategoryColorScale(d)}

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"largeFont = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"mediumFont = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"sideBar = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"footer = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"margin = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1"}} 33:null