30:[{"id":"8e097e46aa1475c34e50f284da26ed879a848e92da85864702a899bbc72ac6b0b558657731a938e3a312f341d895409791c2ff3a30e721db9b257959e4bda0f6","href":"https://static.observableusercontent.com/files/8e097e46aa1475c34e50f284da26ed879a848e92da85864702a899bbc72ac6b0b558657731a938e3a312f341d895409791c2ff3a30e721db9b257959e4bda0f6","name":"Homosexuality-Acceptance@2.csv","type":"text/csv","lastModified":1596368201143.46,"size":573}] 2e:{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":37,"value":"xScale = d3.scaleLinear()\n .domain([0, 1])\n .range([margin.left, (width - margin.right)])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":41,"value":"yAxis = d3.axisLeft(yScale)\n .tickSize(0) \n .tickSizeInner(-width)\n","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":33,"value":"margin = ({ top: 75, right: 30, bottom: 30, left: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"height = 1000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"fontSizeForLegend = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"paddingForLabels = 35","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"radius = 12","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":564,"value":"sortedData = {\n return chartData.sort((a, b) => d3.descending(a[sortSelection], b[sortSelection]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"html``","pinned":false,"hidden":false,"mode":"html"},{"id":692,"value":"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}