2b:null 2c:["$","title",null,{"children":"Homosexuality Acceptance by Religious Beliefs (Barbell Plot) | Tim Lafferty | Observable"}] 31:[{"id":"8e097e46aa1475c34e50f284da26ed879a848e92da85864702a899bbc72ac6b0b558657731a938e3a312f341d895409791c2ff3a30e721db9b257959e4bda0f6","href":"https://static.observableusercontent.com/files/8e097e46aa1475c34e50f284da26ed879a848e92da85864702a899bbc72ac6b0b558657731a938e3a312f341d895409791c2ff3a30e721db9b257959e4bda0f6","name":"Homosexuality-Acceptance@2.csv","type":"text/csv","lastModified":1596368201143.46,"size":573}] 2f:{"id":"0266cfdc2bb1b262","slug":"dot-plot","title":"Homosexuality Acceptance by Religious Beliefs (Barbell Plot)","thumbnail":"8b09791d301616c4f21e0ea0efda8c71855c6a4b44d32b301e214278115cf4bc","access_level":"public","create_time":"$D2020-08-02T11:29:56.873Z","update_time":"$D2022-10-01T23:40:26.312Z","view_time":null,"first_public_time":"$D2020-08-03T00:37:47.498Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bee9456da5197995","login":"timlafferty","name":"Tim Lafferty","avatar_url":"https://avatars-next.observableusercontent.com/7f79f75b70e154fa26e9abf1c11d6e0ebb2e6250c6b28b28e485e6aaebaea00d","tier":"starter_2024"},"version":696,"publish_version":696,"role":null,"authored":false,"authors":[{"type":"individual","id":"d2d6cb4496c05170","login":"timlafferty","name":"Tim Lafferty","avatar_url":"https://avatars-next.observableusercontent.com/7f79f75b70e154fa26e9abf1c11d6e0ebb2e6250c6b28b28e485e6aaebaea00d","tier":null}],"members":[{"type":"individual","id":"d2d6cb4496c05170","login":"timlafferty","name":"Tim Lafferty","avatar_url":"https://avatars-next.observableusercontent.com/7f79f75b70e154fa26e9abf1c11d6e0ebb2e6250c6b28b28e485e6aaebaea00d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"872c5524b7cf6542","slug":"public-collection","title":"Public Collection","owner":{"id":"bee9456da5197995","login":"timlafferty","name":"Tim Lafferty"}},"type":"notebook","body":{"title":"Homosexuality Acceptance by Religious Beliefs (Barbell Plot)","cells":[{"id":534,"value":"

Homosexuality Acceptance by Religious Beliefs (Barbell Plot)

Acceptance of homosexuality by importance of religion (by country)

Data Source can be found here

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"viewof sortSelection = {\n const sortForm = radio({\n title: 'Sort By',\n description: 'Select value to sort by (descending)',\n options: [\n { label: 'Average Acceptance', value: 'avgAcceptance' },\n { label: 'Acceptance by the Relgious', value: 'religious' },\n { label: 'Acceptance by the non-Religious', value: 'nonReligious' },\n ],\n value: 'nonReligious'\n });\n return sortForm;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"chart = {\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n // add x axis\n buildXAxis(svg);\n \n // add y axis\n buildYAxis(svg)\n \n // add group for chart area\n createChartGroup(svg)\n\n // create group for bars\n plotBars(svg)\n \n // create group for 'Very Important' dots\n plotDotsImportant(svg)\n \n // create group for dot 'Not Very Important' dots\n plotDotsNotImportant(svg) \n \n // create legend at top\n buildLegend(svg);\n\n let updateYAxis = () => {\n yScale.domain(sortedData.map(d => d.country)).transition().duration(100)\n }\n viewof sortSelection.addEventListener(\"input\", updateYAxis)\n\n \n return svg.node();\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"function buildLegend(svg){\n svg.append(\"circle\")\n .attr(\"cy\", margin.top/4)\n .attr(\"cx\", (margin.left * 3))\n .attr(\"r\", radius)\n .attr(\"fill\", \"#ffcf43\")\n \n svg.append(\"text\")\n .attr(\"class\", \"legend\")\n .text(\"Religion is VERY Important\")\n .attr(\"x\", (margin.left * 3) + 20)\n .attr(\"y\", (margin.top/4) + (radius/2) - (fontSizeForLegend/4))\n \n svg.append(\"circle\")\n .attr(\"cy\", margin.top/4)\n .attr(\"cx\", (margin.left * 6))\n .attr(\"r\", radius)\n .attr(\"fill\", \"#5ce0d8\")\n \n svg.append(\"text\")\n .attr(\"class\", \"legend\")\n .text(\"Religion is NOT Very Important\")\n .attr(\"x\", (margin.left * 6) + 20)\n .attr(\"y\", (margin.top/4) + (radius/2) - (fontSizeForLegend/4))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"function plotBars(svg){\nsvg.selectAll(\".chart-group\")\n .append(\"g\")\n .attr(\"class\", \"bar-group\")\n .selectAll(\"rect\")\n .data(sortedData, d => d.country)\n .join(\n enter => {\n enter\n .append(\"rect\")\n .attr(\"class\", \"rect\")\n .attr(\"y\", d => yScale(d.country))\n .attr(\"x\", d => xScale(d.religious))\n .attr(\"width\", d => xScale(d.nonReligious) - xScale(d.religious))\n .attr(\"height\", \"3px\")\n .attr(\"fill\", \"#dedede\")\n },\n update => {\n update\n .attr(\"fill\", \"#333\")\n .transition()\n .duration(1000)\n .attr(\"width\", d => xScale(d.nonReligious) - xScale(d.religious))\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"function plotDotsImportant(svg){\n svg.selectAll(\".chart-group\")\n .append(\"g\")\n .attr(\"class\", \"important-group\")\n .selectAll(\".dot\")\n .data(sortedData, d => d.country)\n .join(\n enter => {\n enter\n .append(\"circle\")\n .attr(\"class\", \"dot\")\n .attr(\"cy\", d => yScale(d.country))\n .attr(\"cx\", d => xScale(d.religious))\n .attr(\"r\", radius)\n .attr(\"fill\", \"#ffcf43\");\n enter\n .append(\"text\")\n .attr(\"class\", \"dot-label\")\n .text(d => d3.format('.0%')(d.religious))\n .attr(\"x\", d => xScale(d.religious) - (radius/2) - 35)\n .attr(\"y\", d => yScale(d.country) + (radius) - (fontSizeForLegend/2) - 1) // 1px?! Really?!!\n },\n update => {\n update\n .transition()\n .duration(1000)\n .attr(\"r\", 15)\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"function plotDotsNotImportant(svg){\n svg.selectAll(\".chart-group\")\n .append(\"g\")\n .attr(\"class\", \"nonimportant-group\")\n .selectAll(\".dot\")\n .data(sortedData, d => d.country)\n .join(\n enter => {\n enter\n .append(\"circle\")\n .attr(\"class\", \"dot\")\n .attr(\"cy\", d => yScale(d.country))\n .attr(\"cx\", d => xScale(d.nonReligious))\n .attr(\"r\", radius)\n .attr(\"fill\", \"#5ce0d8\");\n enter\n .append(\"text\")\n .attr(\"class\", \"dot-label\")\n .text(d => d3.format('.0%')(d.nonReligious))\n .attr(\"x\", d => xScale(d.nonReligious) - (radius/2) + 25)\n .attr(\"y\", d => yScale(d.country) + (radius) - (fontSizeForLegend/2) - 1) // 1px?! Really?!!\n } \n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"xScale = d3.scaleLinear()\n .domain([0, 1])\n .range([margin.left, (width - margin.right)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"xAxis = d3.axisTop(xScale)\n .ticks(5)\n .tickSizeInner(-height)\n .tickSizeOuter(0)\n .tickFormat(d => d3.format(\".0%\")(d))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"function buildXAxis(svg) {\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${margin.top})`)\n .attr(\"class\", \"x axis\")\n .call(xAxis)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"yScale = d3.scaleBand()\n .domain(sortedData.map(d => d.country))\n .range([margin.top, (height)])\n .padding(0.15)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"yAxis = d3.axisLeft(yScale)\n .tickSize(0) \n .tickSizeInner(-width)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"function buildYAxis(svg) {\n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .attr(\"class\", \"y axis\")\n .call(yAxis)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"function createChartGroup(svg){\n svg.append(\"g\")\n .attr(\"class\", \"chart-group\")\n .attr(\"transform\", `translate(0, 15)`)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"margin = ({ top: 75, right: 30, bottom: 30, left: 100 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"height = 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"fontSizeForLegend = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"paddingForLabels = 35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"radius = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"chartData = {\n const rawData = await FileAttachment(\"Homosexuality-Acceptance@2.csv\").text();\n return d3.csvParse(rawData, ({ Country, VeryImportant, NotVeryImportant }) => ({\n country: Country,\n religious: +VeryImportant,\n nonReligious: +NotVeryImportant,\n gap: Math.abs(+VeryImportant - +NotVeryImportant),\n avgAcceptance: (+VeryImportant + +NotVeryImportant) / 2\n }))\n .filter(d => d.country != \"\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"sortedData = {\n return chartData.sort((a, b) => d3.descending(a[sortSelection], b[sortSelection]))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"html``","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"