29:null 2a:["$","title",null,{"children":"Example Grouped dot bar chart | Lixuan Yang | Observable"}] 2f:T459,viewof O = { const regions = html`

Click on a cuisine to show different data

`; regions.onclick = event => { const region = event.target.id; if (region === 'MH') { //mutable countryName = 'Australia'; mutable regionName = 'Manhattan'; } else if (region === 'BK') { //mutable countryName = 'United Kingdom'; mutable regionName = 'Brooklyn'; } else if (region === 'BX') { //mutable countryName = 'United Kingdom'; mutable regionName = 'Bronx'; } else if (region === 'QN') { //mutable countryName = 'United Kingdom'; mutable regionName = 'Queens'; } else if (region === 'ST') { //mutable countryName = 'United Kingdom'; mutable regionName = 'Staten Island'; } }; return regions; }30:Te79,function drawDots(data) { const thisData = data[0]; const numbers = data[1]; console.log('thisdata:',thisData); console.log('numbers',numbers); const plotDataDot = plot .select('.dots') .selectAll('.dot') .data(thisData, (d, i) => `${d.name}_${i}`); // new dots being drawn plotDataDot .enter() .append('circle') .attr('class', d => `dot ${d.name}-${d.category}`) .attr('r', 0) .attr('cx', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); const row = Math.floor(d.value);// each row 1 dot, round floor const column = +(d.value - row).toFixed(1); const spaceDecimal = scaleXDecimal(column); return spaceCategory + spaceRegion + spaceDecimal; }) .attr('cy', (d, i) => i * r * 2) //.attr('cy', (d, i) => scaleY(d.category_value) - 15) .style('fill', d => scaleColor(d.name)) .transition() .delay((d, i) => { return i * Math.random() * 0.5; }) .duration(500) .attr('r', r) .attr('cy', d => { const y = Math.floor(d.value); return scaleY(y) - r * 2; }); // remove dots that won't happen plotDataDot .exit() .transition() .duration(250) .attr('r', 0) .remove(); // transition animation for dots that need to be updated (position) plotDataDot .transition() .delay((d, i) => { //console.log("what is i:",i) return i * Math.random() * 0.5; }) .duration(500) .attr('cx', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); const row = Math.floor(d.value);// each row 1 dot, round floor const column = +(d.value - row).toFixed(1); const spaceDecimal = scaleXDecimal(column); return spaceCategory + spaceRegion + spaceDecimal; }) .attr('cy', d => { const y = Math.floor(d.value); console.log('what is cy',scaleY(y) - r * 2) return scaleY(y) - r * 2; }) .style('fill', d => scaleColor(d.name)); // plot numbers const plotDataText = plot .select('.percentages') .selectAll('text') .data(numbers, (d) => `${d.name}_${d.type}`); // new text being drawn plotDataText .enter() .append('text') .attr('class', d => `${d.name}-${d.category}`) .text(d => `${d.category_value}%`) .attr('x', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); return spaceCategory + spaceRegion; }) .attr('y', d => { console.log('where is y pos:',scaleY(d.category_value)); return scaleY(d.category_value) - 15; }) .attr('dy', '.35em') .style('fill', d => scaleColorText(d.name)) .style('font-family', 'Helvetica, sans-serif') .style('font-weight', 'bold') .style('opacity', 0) .transition() .duration(500) .style('opacity', 1); // remove text that won't happen (not in this case) plotDataText .exit() .transition() .duration(250) .style('opacity', 0) .remove(); // transition animation for text that needs to be updated (position) plotDataText .transition() .duration(500) .text(d => d.category_value) .attr('x', d => { // in which part of the widthband const spaceCategory = scaleXCategory(d.category); const spaceRegion = scaleXRegion(d.name); return spaceCategory + spaceRegion; }) .attr('y', d => { return scaleY(d.category_value) - 10; }) .style('fill', d => scaleColorText(d.name)); }31:T6cf,function createData() { const pointsArray = []; const values = []; const thisRegionData = data_regions.filter(d => d.borough === regionName && d.cuisine.has(cuisine)); //console.log("thisRegionData", thisRegionData) pushToArray(thisRegionData, regionName); // create array function pushToArray(thisData, name) { console.log('thisData is:', thisData); // fixed the sum_price function const sum_price = categoriesX.reduce((total, price) => { let sum = 0; for (let i = 0; i < thisData.length; i++) { if (thisData[i][price] != null) { sum += thisData[i][price]; } } return total + sum; }, 0); //console.log('current sum', sum_price); categoriesX.forEach((price) => { thisData.forEach(function(d) { if (d[price] != null) { //console.log('current price count',d[price]) for (let i = 0; i < d[price] * 10; i++) { const number = i / 10; console.log('what is number value:', Math.floor(number * 10) / 10) pointsArray.push({ id: `${name}_${number}`, name: name, category: price, value: Math.floor(number * 10) / 10, category_value: (d[price] / sum_price).toFixed(2)*100, // normalized d[price] value type: d.cuisine }); } values.push({ name: name, category: price, category_value: (d[price] / sum_price).toFixed(2)*100, // normalized d[price] value type: d.cuisine }); } }); }) } //console.log('values:',[pointsArray, values]) return [pointsArray, values]; } 32:[{"id":"2ac85bcceffd70cbe87e3054da8b740d9f523966139deeb86993aa5d91d0b57012787934ed2c8db81c1349d7577945171018ba35b53aaeb1bf7d383fbc95555e","href":"https://static.observableusercontent.com/files/2ac85bcceffd70cbe87e3054da8b740d9f523966139deeb86993aa5d91d0b57012787934ed2c8db81c1349d7577945171018ba35b53aaeb1bf7d383fbc95555e","name":"data.csv","type":"text/csv","lastModified":1682192513076.138,"size":2460706}] 2d:{"id":"8950bea59d39a62b","slug":null,"title":"Example Grouped dot bar chart","thumbnail":"bdc6a88e110f9fd41813a30942d0a9f0ece50fd52da0c3cc6148217d57813d82","access_level":"public","create_time":"$D2023-04-21T13:57:21.482Z","update_time":"$D2023-04-23T03:34:33.259Z","view_time":null,"first_public_time":"$D2023-04-21T13:57:21.482Z","fork":{"id":"776ef8dc5333944c","slug":"grouped-dot-bar-chart-with-transitions","title":"Grouped dot bar chart with transitions","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"stars":0,"starred":false,"owner":{"type":"team","id":"01e62fe58161dc35","login":"lixuanyang","name":"Lixuan Yang","avatar_url":"https://avatars-next.observableusercontent.com/ff3635618005b3556be184251f557021b25f6cfc69e33d6a96367b520f39e907","tier":"starter_2024"},"version":476,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b1a217c66bccbc0","login":"lixuanyang","name":"Lixuan Yang","avatar_url":"https://avatars-next.observableusercontent.com/ff3635618005b3556be184251f557021b25f6cfc69e33d6a96367b520f39e907","tier":null}],"members":[{"type":"individual","id":"b1124a0fda4254e9","login":"dp3129","name":"Ding Pang","avatar_url":"https://avatars-next.observableusercontent.com/a6ae173ee33ebec7ccff08df859d277bcbe57ee9dc379defb98ecc581da80bd5","tier":null,"role":"editor"},{"type":"individual","id":"9f1f9bdcd4a90dbb","login":"hw2930","name":"Mark Wu","avatar_url":"https://avatars-next.observableusercontent.com/0aac3fe09d841849329fdaedf45d5a7ffb16df8b7a0eb139ca9d356c7c7d0370","tier":null,"role":"editor"},{"type":"individual","id":"3b1a217c66bccbc0","login":"lixuanyang","name":"Lixuan Yang","avatar_url":"https://avatars-next.observableusercontent.com/ff3635618005b3556be184251f557021b25f6cfc69e33d6a96367b520f39e907","tier":null,"role":"editor"},{"type":"individual","id":"e31f85affc0818e1","login":"markwu098","name":"Mark Wu","avatar_url":"https://avatars-next.observableusercontent.com/e5fce5833399ba7413c76edad9b662772672e452bc7cdba48dc591d06be29308","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Example Grouped dot bar chart","cells":[{"id":0,"value":"md`# Example Grouped dot bar chart `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"viewof N = {\n const buttons = html`\n

People were asked to choose the cuisine. Select one of them to see results

\n \n \n \n \n `;\n \n buttons.onclick = event => {\n const type = event.target.id;\n \n if (type === 'CN') {\n mutable cuisine = 'Chinese';\n } else if (type === 'JP') {\n mutable cuisine = 'Japanese'; \n } else if (type === 'AM') {\n mutable cuisine = 'American';\n }\n else if (type === 'FR') {\n mutable cuisine = 'French';\n }\n else if (type === 'VT') {\n mutable cuisine = 'Vietnamese';\n }\n };\n \n return buttons;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"chart = {\n plot; \n\n // create groups for axis, dots\n plot.append('g')\n .attr('transform', `translate(${margin.l}, ${margin.t})`)\n .attr('class', 'axis axis-y');\n\n plot.append('g')\n .attr('transform', `translate(${margin.l}, ${margin.t + height})`)\n .attr('class', 'axis axis-x');\n\n plot.append('g')\n .attr('transform', `translate(${margin.l}, ${margin.t})`)\n .attr('class', 'dots');\n\n plot.append('g')\n .attr('transform', `translate(${margin.l}, ${margin.t})`)\n .attr('class', 'percentages');\n \n plot.append('g')\n .attr('transform', `translate(0, 25)`)\n .attr('class', 'legend');\n\n createAxis();\n createLegend();\n styling();\n \n const drawingData = createData();\n console.log('drawing', drawingData);\n drawDots(drawingData);\n\n return plot.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"function createLegend() {\n const plotLegend = plot.select('.legend');\n \n plotLegend.selectAll('text').remove();\n\n \n plotLegend.append('text')\n .text(regionName)\n .attr('y', 25)\n .style('font-weight', 'bold')\n .style('font-family', 'Helvetica, sans-serif')\n .style('fill', darkGreen);\n \n plotLegend.append('text')\n .text(cuisine)\n .attr('x', width - 5)\n .attr('text-anchor', 'end')\n .style('font-family', 'Helvetica, sans-serif')\n .style('fill', '#222222');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"//styling\nfunction styling() {\n plot.select('.axis-y')\n .selectAll('path')\n .style('display', 'none');\n \n plot.select('.axis-y')\n .selectAll('line')\n .style('stroke-width', 1)\n .style('stroke', '#d4d4d4');\n\n plot.select('.axis-x')\n .selectAll('line')\n .style('stroke-width', '2')\n .style('stroke', '#222222');\n \n plot.select('.axis-x')\n .selectAll('text')\n .style('font-size', '1rem');\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"// function to create axis\n function createAxis() {\n const axisX = d3.axisBottom()\n .scale(scaleXCategory)\n .tickPadding(5);\n\n const axisY = d3.axisLeft()\n .scale(scaleY)\n .tickSize(-width)\n .tickValues([0, 25, 50, 75, 100])\n .tickPadding(5);\n\n plot.select('.axis-x')\n .call(axisX);\n \n plot.select('.axis-y')\n .call(axisY);\n\n plot.select('.axis-x')\n .selectAll('.domain')\n .remove();\n\n plot.select('.axis-x')\n .append('line')\n .attr('class', 'domain')\n .attr('x1', 0)\n .attr('x2', width)\n .attr('y1', 0)\n .attr('y2', 0);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"r = (height / 100) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"blue = '#1380a0'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"green = '#99bc65'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"darkGreen = '#588300'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"scaleColor = d3.scaleOrdinal()\n .domain([regionName])\n .range([green])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"scaleColorText = d3.scaleOrdinal()\n .domain([regionName])\n .range([darkGreen]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"md`The horizontal space should be split by the four main categories (agree, disagree, neither and no opinion), and inside each of the groups between the country and the region data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"// Four types of answer\ncategoriesX = ['$', '$$', '$$$', '$$$$'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"scaleXCategory = d3.scaleBand().domain(categoriesX).range([0, width - margin.r]).paddingInner([0.4]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"// width for each type of answer\ncategorySpace = scaleXCategory.bandwidth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"md`\\`countryName\\` and \\`regionName\\` will change depending on what's selected`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"mutable regionName = 'Manhattan'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"mutable cuisine = 'American'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"scaleXRegion = d3.scaleBand()\n .domain([regionName])\n .range([padding, categorySpace - padding])\n .paddingInner([0.1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"// width for the country group or the region group\nregionSpace = scaleXRegion.bandwidth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"// scale to position the dots\n/*\nscaleXDecimal = d3.scaleBand()\n .domain([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])\n .range([0, regionSpace])\n .paddingInner([0]);\n*/\nscaleXDecimal = d3.scaleBand()\n .domain([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])\n .range([0, regionSpace])\n .paddingInner([0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"padding = 3;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"scaleY = d3.scaleLinear().domain([0, 100]).range([height, 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`Add data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"cuisine_set = FileAttachment(\"data.csv\").text().then(function(text) {\n var data = d3.csvParse(text);\n var borough_price_cuisine_map = {};\n \n data.forEach(function(d) {\n var borough = d.borough;\n var price = d.price;\n var cuisineArr = JSON.parse(d.categories.replace(/'/g, '\"'));\n var cuisineSet = new Set();\n \n cuisineArr.forEach(function(cuisine) {\n cuisineSet.add(cuisine.title);\n });\n \n var borough_price_key = borough + \"_\" + price;\n if (borough_price_key in borough_price_cuisine_map) {\n borough_price_cuisine_map[borough_price_key].cuisine = borough_price_cuisine_map[borough_price_key].cuisine.concat(Array.from(cuisineSet));\n } else {\n borough_price_cuisine_map[borough_price_key] = {\n borough: borough,\n price: price,\n cuisine: Array.from(cuisineSet)\n };\n }\n });\n \n var result = Object.values(borough_price_cuisine_map);\n\n //console.log('cuisine_type',typeof result)\n return result;\n\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"\nfunction aggregateData(borough_price_map, cuisine_set) {\n var groups = d3.group(borough_price_map.values(), function(d) {\n return d.borough + \"_\" + d.price;\n });\n\n var result = [];\n groups.forEach(function(value, key) {\n var boroughPrice = key.split(\"_\");\n var cuisine_lst = null;\n for (var i = 0; i < cuisine_set.length; i++) {\n if (cuisine_set[i].borough === boroughPrice[0] && cuisine_set[i].price === boroughPrice[1]) {\n cuisine_lst = cuisine_set[i];\n break;\n }\n }\n var cuisine_set_result = cuisine_lst ? new Set(cuisine_lst.cuisine) : new Set();\n result.push({\n borough: boroughPrice[0],\n [boroughPrice[1]]: value.length,\n cuisine: cuisine_set_result\n });\n });\n return result;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"data_regions = FileAttachment(\"data.csv\").text().then(function(text) {\n var data = d3.csvParse(text);\n var borough_price_map = d3.map(data, function(d) {\n return {\n restaurant_name: d.name,\n borough: d.borough,\n price: d.price,\n cuisine: d.categories\n };\n });\n console.log(\"borough_map\",borough_price_map);\n var aggregatedData = aggregateData(borough_price_map,cuisine_set);\n console.log(aggregatedData);\n return aggregatedData;\n});\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"//thisRegionData = data_regions.filter(d => d.borough === 'Manhattan');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"md`Add SVG attributes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"plot = d3.create('svg')\n .attr('width', width + margin.l + margin.r)\n .attr('height', height + margin.t + margin.b);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"margin = ({\n l: 25,\n r: 25,\n t: 70,\n b: 40,\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`Add D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"