31:T19d7,chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]) .style("font", "10px IBM Plex Mono") .style("color", outlineColor); const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style('font-family', 'IBM Plex Mono') .style('background', 'white') .style('opacity', .9) .style('border-radius', '.1rem') .style('border', '0px solid black') .style('color', outlineColor) .style('display', 'block') .style('font-size', '14px') .style('max-width', '320px') .style('padding', '.2rem .4rem') .style('position', 'absolute'); // Add median speed let ciHight = 40; svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.min)) .attr("y", d => y(d.gender) - 120) .attr("fill",d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.max) - x(d.min)) .attr("opacity", .1); svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.mean - d.ci_999)) .attr("y", d => y(d.gender) - 120) .attr("fill",d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.mean + d.ci_999) - x(d.mean - d.ci_999)) .attr("opacity", .20); svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.mean - d.ci_995)) .attr("y", d => y(d.gender) - 120) .attr("fill",d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.mean + d.ci_995) - x(d.mean - d.ci_995)) .attr("opacity", .1); svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.mean - d.ci_99)) .attr("y", d => y(d.gender) - 120) .attr("fill",d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.mean + d.ci_99) - x(d.mean - d.ci_99)) .attr("opacity", .25); svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.mean - d.ci_95)) .attr("y", d => y(d.gender) - 120) .attr("fill", d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.mean + d.ci_95) - x(d.mean - d.ci_95)) .attr("opacity", 0.4); svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.mean - d.ci_90)) .attr("y", d => y(d.gender) - 120) .attr("fill",d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.mean + d.ci_90) - x(d.mean - d.ci_90)) .attr("opacity", .6); svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.mean - d.ci_85)) .attr("y", d => y(d.gender) - 120) .attr("fill",d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.mean + d.ci_85) - x(d.mean - d.ci_85)) .attr("opacity", .8); svg.append("g") .selectAll("rect") .data(data_ci) .join("rect") .attr("x", d => x(d.mean - d.ci_80)) .attr("y", d => y(d.gender) - 120) .attr("fill",d => colorCi(d.gender)) .attr("height",ciHight) .attr("width", d=> x(d.mean + d.ci_80) - x(d.mean - d.ci_80)) .attr("opacity", 1); svg.selectAll('line') .data(data_ci) .join('line') .attr('x1', d => x(d.mean)) .attr('x2', d => x(d.mean)) .attr('y1', d => y(d.gender) - 80) .attr('y2', d => y(d.gender) - 80-ciHight) .attr('stroke-width', 2) .attr('stroke', outlineColor); svg.append('g') .style('font-size', 14) .style("color", outlineColor) .style("font-weight", 700) .call(xAxis); svg.selectAll('.line-visites') .data(x.ticks()) .join('line') .attr('class', 'line-visites') .attr('x1', d => x(d)) .attr('x2', d => x(d)) .attr('y1', 100) .attr('y2', height - margin.top +35) .attr('stroke-width', .6) .attr('stroke', 'lightgray'); svg.selectAll('.label-edat') .data(data) .join('text') ///.attr('class', 'label-edat') .attr('x', 0) .attr('y', d => y(d.gender) - 80 - ciHight/4) .style('font-family', 'IBM Plex Mono') .style("fill", d => colorCi(d.gender)) .style('font-size', '20px') .attr('text-align', 'right') .attr('alignment-baseline', 'right') .text(d => d.gender); svg.append("text") .attr("x", (width -margin.left)/2) .attr("y", (margin.top)-75) .attr("text-anchor", "middle") .style("font-size", "20px") .style("fill", outlineColor) .attr("font-family", "IBM Plex Mono") .attr("font-weight", "bold") .text("Literacy rate for adults in 2018 in 80 countries") .attr("opacity", 1) ; svg.append("text") .attr("x", (width -margin.left)/2) .attr("y", (margin.top)-35) .attr("text-anchor", "middle") .style("font-size", "20px") .style("fill", outlineColor) .attr("font-family", "IBM Plex Mono") .attr("font-weight", "bold") .text("(% of male/female ages 15 and above)") .attr("opacity", 1) ; const circleWidth = width/7 const simulation = d3.forceSimulation(data) .force('x', d3.forceX((d) => x(d.percentage)).strength(0.3)) .force('y', d3.forceY((d) => y(d.gender)).strength(0.3)) .force('collide', d3.forceCollide(d => size(circleWidth) + padding).strength(1)) .stop(); for(let i = 0; i < 300; i++) { simulation.tick(); } simulation.stop(); svg.selectAll('circle') .data(data) .join('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', d => size(circleWidth)) // no encoding in the size .attr('fill', d => color(d.CountryName)) .attr('opacity', .8); svg.selectAll("circle") .on("mouseover", function(d) { d3.select(this) .attr('stroke-width', '1') .attr("stroke", "black") tooltip .style("visibility", "visible") .html(`Country:
${d.CountryName}
Percentage:
${percentformat(d.percentage)}%
`) }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px") }) .on("mouseout", function() { d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); return svg.node(); }32:[] 2f:{"title":"2018 World Literacy in Confidence Strips","cells":[{"id":0,"value":"md`# 2018 World Literacy in Confidence Strips\n\nAdult literacy in 80 countries in 2018 and the confidence strips\n\nDay 27 of [30DayChartChallenge](https://twitter.com/30DayChartChall) - *educational* uncertainties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"md ` **Data source**\n\n- [World Bank Female Literacy](https://data.worldbank.org/indicator/SE.ADT.LITR.FE.ZS)\n- [World Bank Male Literacy](https://data.worldbank.org/indicator/SE.ADT.LITR.MA.ZS)\n\nI excluded the aggregate rows from the datasets, and used only the individual countries. The python scrip for the data processing is in my [github](https://github.com/terezaif/30DayChartChallenge_Collection2021/blob/main/code/literacy.py)\n\nTaking this to next level would be to link the interaction..\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"outlineColor = \"#004488\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"colorCi = d3.scaleOrdinal()\n .domain(data_ci.map(d => d.gender))\n .range([ \"#EE6677\" ,\"#4477aa\"]).unknown('black')","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"percentformat = d3.format (\".2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"y = d3.scaleBand()\n .domain(groups)\n .range([height, height/2.2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"x = d3.scaleLinear()\n .domain([0,100])\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"xAxis = g => g\n .attr('transform', `translate(0,${height +30 - margin.top})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"popExtent = {\n const bounds = data.map((d) => d.percentage).sort(d3.ascending);\n return [bounds[0], bounds[bounds.length - 1]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"size = d3.scaleSqrt()\n .domain(popExtent)\n .nice()\n .range([0.5, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"dataExtent = {\n const bounds = data.map((d) => d.percentage).sort(d3.ascending);\n return [bounds[0], bounds[bounds.length - 1]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"color = d3.scaleOrdinal()\n .domain(countries) .range(colors)\n .unknown('black')","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"padding = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"rmargin = width/6","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"margin = ({\n left: 90,\n right: rmargin,\n top: 100,\n bottom: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"md `** Data **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"colors2 = ['#E8ECFB', '#DDD8EF', '#D1C1E1', '#C3A8D1', '#B58FC2',\n '#A778B4', '#9B62A7', '#8C4E99', '#6F4C9B', '#6059A9',\n '#5568B8', '#4E79C5', '#4D8AC6', '#4E96BC', '#549EB3',\n '#59A5A9', '#60AB9E', '#69B190', '#77B77D', '#8CBC68',\n '#A6BE54', '#BEBC48', '#D1B541', '#DDAA3C', '#E49C39',\n '#E78C35', '#E67932', '#E4632D', '#DF4828', '#DA2222',\n '#B8221E', '#95211B', '#721E17', '#521A13']","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"colors = ['#4477AA', '#EE6677', '#228833', '#CCBB44', '#66CCEE',\n '#AA3377', '#BBBBBB', '#000000']","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"csvs = ({\n all: \"https://raw.githubusercontent.com/terezaif/30DayChartChallenge/main/2021/dataset/literacy_2018.csv\",\n ci: \"https://raw.githubusercontent.com/terezaif/30DayChartChallenge/main/2021/dataset/literacy_ci_2018.csv\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"groups = Array.from(new Set(data.map(d => d.gender)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"countries = Array.from(new Set(data.map(d => d.CountryName)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"data = data_raw[0].sort((a, b) => d3.ascending(a.percentage, b.percentage))","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"data_ci = data_raw_ci[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"data_raw=Promise.all([csvs['all']].map(file => d3.csv(file, d3.autoType)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":739,"value":"csvs[\"ci\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"data_raw_ci = Promise.all([csvs[\"ci\"]].map((file) => d3.csv(file, d3.autoType)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"specificStyles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}