2c:null 2d:["$","title",null,{"children":"Grouped dot bar chart with transitions | Irene de la Torre | Observable"}] 32:Td7c,function drawDots(data) { const thisData = data[0]; const numbers = data[1]; console.log(thisData); 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) .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) => { 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); 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 => { 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)); }33:T429,// this function creates the data for the dots function createData() { const pointsArray = []; const values = []; const thisCountryData = data_countries.filter(d => d.country === countryName && d.statement === statement)[0]; const thisRegionData = data_regions.filter(d => d.region === regionName && d.statement === statement)[0]; pushToArray(thisCountryData, countryName); pushToArray(thisRegionData, regionName); // create array function pushToArray(thisData, name) { categoriesX.forEach((category) => { for (let i = 0; i < thisData[category] * 10; i++) { const number = i / 10; pointsArray.push({ id: `${name}_${number}`, name: name, category: category, value: Math.floor(number * 10) / 10, category_value: thisData[category], type: statement, }); } values.push({ name: name, category: category, category_value: thisData[category], type: statement, }); }); } return [pointsArray, values]; }34:[] 30:{"id":"776ef8dc5333944c","slug":"grouped-dot-bar-chart-with-transitions","title":"Grouped dot bar chart with transitions","thumbnail":"d4cf37d3f46370ac9a2f6a1598f93fe9cc48fefcd71f05e246215ba0f8d70f24","access_level":"public","create_time":"$D2020-02-04T17:47:19.488Z","update_time":"$D2021-09-30T13:18:02.916Z","view_time":null,"first_public_time":"$D2020-02-04T19:42:17.906Z","has_unpublished_edits":null,"fork":false,"stars":76,"starred":false,"owner":{"type":"team","id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":"starter_2024","bio":"Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen"},"version":257,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null,"bio":"Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen"}],"members":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":55,"collection":{"id":"7282c6828cd4171c","slug":"d3-js","title":"D3.js","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"type":"notebook","body":{"titling":"auto","title":"Grouped dot bar chart with transitions","cells":[{"id":0,"value":"md`# Grouped dot bar chart with transitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof O = {\n const countries = html`\n

Click on a country to show different data

\n \n `;\n\n countries.onclick = event => {\n const country = event.target.id;\n \n if (country === 'Australia') {\n mutable countryName = 'Australia';\n mutable regionName = 'Oceania';\n } else if (country === 'UK') {\n mutable countryName = 'United Kingdom';\n mutable regionName = 'Europe';\n }\n };\n \n return countries;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"viewof N = {\n const buttons = html`\n

People were asked how much they agree with the statement. Select one of them to see results

\n \n \n `;\n \n buttons.onclick = event => {\n const type = event.target.id;\n \n if (type === 'safe') {\n mutable statement = 'Vaccines are safe';\n } else if (type === 'effective') {\n mutable statement = 'Vaccines are effective'; \n } else if (type === 'important') {\n mutable statement = 'Vaccines are important for children';\n }\n };\n \n return buttons;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function createLegend() {\n const plotLegend = plot.select('.legend');\n \n plotLegend.selectAll('text').remove();\n \n plotLegend.append('text')\n .text(countryName)\n .style('font-weight', 'bold')\n .style('font-family', 'Helvetica, sans-serif')\n .style('fill', blue);\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(statement)\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"r = (height / 100) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"blue = '#1380a0'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"green = '#99bc65'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"darkGreen = '#588300'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"scaleColor = d3.scaleOrdinal()\n .domain([countryName, regionName])\n .range([blue, green])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"scaleColorText = d3.scaleOrdinal()\n .domain([countryName, regionName])\n .range([blue, darkGreen]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Four types of answer\ncategoriesX = ['agree', 'disagree', 'neither', 'no opinion'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// width for each type of answer\ncategorySpace = scaleXCategory.bandwidth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"mutable countryName = 'Australia'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"mutable regionName = 'Oceania'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"mutable statement = 'Vaccines are safe'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"scaleXRegion = d3.scaleBand()\n .domain([countryName, regionName])\n .range([padding, categorySpace - padding])\n .paddingInner([0.1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"// scale to position the dots\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"padding = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"scaleY = d3.scaleLinear().domain([0, 100]).range([height, 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`Add data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"data_countries = d3.csvParse(`country,region,statement,agree,disagree,neither,no opinion\nAustralia,Oceania,Vaccines are safe,83,7,8,1\nAustralia,Oceania,Vaccines are effective,91,4,5,1\nAustralia,Oceania,Vaccines are important for children,92,4,4,0\nUnited Kingdom,Europe,Vaccines are safe,75,9,14,2\nUnited Kingdom,Europe,Vaccines are effective,86,3,10,1\nUnited Kingdom,Europe,Vaccines are important for children,89,4,6,1\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data_regions = d3.csvParse(`region,statement,agree,disagree,neither,no opinion\nOceania,Vaccines are safe,82,7,10,1\nOceania,Vaccines are effective,89,5,5,1\nOceania,Vaccines are important for children,91,4,5,0\nEurope,Vaccines are safe,73,10,16,2\nEurope,Vaccines are effective,84,3,11,2\nEurope,Vaccines are important for children,89,3,6,1\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`Add SVG attributes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Add D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"