{"version":3,"sources":["LearningPovertyKey.js","Tooltip.js","ShiftedMarimekko.js","App.js","reportWebVitals.js","index.js"],"names":["LearningPovertyKey","step","className","poverty","color","map","d","style","backgroundColor","formatSI","format","Tooltip","forwardRef","props","ref","useState","active","setActive","data","selected","setSelected","left","top","opacity","tooltipStyle","setTooltipStyle","units","setUnits","chartType","setChartType","handleMouseOver","dx","dy","xOffset","yOffset","chartWidth","end","chart","handleMouseOut","useImperativeHandle","Region","Subgroup","Value","Country","coosshare","bmpshare","margin","right","bottom","ShiftedMarimekko","width","height","view","regionLabels","shiftedmarimekko","filter","yAxisRef","useRef","activeBar","setActiveBar","chartHeight","xScale","scaleLinear","domain","range","yScale","heightScale","yAxis","axisLeft","tickSize","tickPadding","tickValues","tickFormat","v","Math","abs","colorScale","scaleOrdinal","tooltipRef","useEffect","select","current","call","rectStyles","useSprings","length","i","config","duration","easing","easeSinInOut","x","cumshare","share","y","yglobal","shareinregion","shareinglobal","stroke","strokeWidth","fill","Regioncode","highlightMap","rectData","regionCode","subgroup","regionData","rect","reduce","acc","currVal","getRect","highlightStyle","useSpring","id","viewBox","refX","refY","markerWidth","markerHeight","orient","transform","onMouseOver","onMouseLeave","Text","textAnchor","transitionProperty","transitionDuration","transitionDelay","verticalAnchor","fontSize","x1","x2","y1","y2","markerEnd","fontFamily","App","href","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.45534d94.chunk.js","sourcesContent":["import React from \"react\";\n\nconst LearningPovertyKey = (step) => {\n  const colorData = [\n    {\n      poverty: \"Learning poor - out of school\",\n      color: \"#C94940\",\n    },\n    {\n      poverty: \"Learning poor - pupils below minimum proficiency level\",\n      color: \"#E4D152\",\n    },\n    {\n      poverty: \"Not learning poor\",\n      color: \"#6CB1C0\",\n    }\n  ];\n  const globalColorData = [\n    {\n        poverty: \"Learning poor\",\n        color: \"#E0B17E\",\n      },\n      {\n        poverty: \"Not learning poor\",\n        color: \"#6CB1C0\",\n      }\n  ]\n  return (\n    step.step !== \"global\" ?\n    <div className=\"chart-legend\">\n      {colorData.map((d) => {\n        return (\n          <div className=\"pill-container\" key={d.poverty}>\n            <div className={\"pill\"} style={{ backgroundColor: d.color }}></div>\n            <div className=\"pill-label\">{d.poverty}</div>\n          </div>\n        );\n      })}\n    </div>\n    :\n    <div className=\"chart-legend\">\n    {globalColorData.map((d) => {\n      return (\n        <div className=\"pill-container\" key={d.poverty}>\n          <div className={\"pill\"} style={{ backgroundColor: d.color }}></div>\n          <div className=\"pill-label\">{d.poverty}</div>\n        </div>\n      );\n    })}\n  </div>\n  );\n};\n\nexport default LearningPovertyKey;","import React, { forwardRef, useState, useImperativeHandle } from \"react\";\nimport { format } from \"d3-format\";\n\nconst formatSI = format(\".2s\");\n\nconst Tooltip = forwardRef((props, ref) => {\n  const [active, setActive] = useState(false);\n  const [selected, setSelected] = useState({data: []});\n  const [tooltipStyle, setTooltipStyle] = useState({\n    left: 0,\n    top: 0,\n    opacity: 0\n  });\n  const [units, setUnits] = useState(\"\")\n  const [chartType, setChartType] = useState(\"\")\n\n  const handleMouseOver = (d, dx, dy, xOffset, yOffset, chartWidth, end, units, chart) => {\n    setActive(true);\n    setChartType(chart)\n    if (end) {\n      setTooltipStyle({\n        left: `${dx - xOffset}px`,\n        top: `${dy + yOffset}px`,\n      });\n    } else {\n      setTooltipStyle({\n        left: `${dx + xOffset}px`,\n        top: `${dy + yOffset}px`,\n      });\n    }\n    setSelected(d);\n    setUnits(units)\n  };\n\n  const handleMouseOut = () => {\n    setActive(false);\n  };\n\n  useImperativeHandle(ref, () => {\n    return {\n      handleMouseOver: handleMouseOver,\n      handleMouseOut: handleMouseOut,\n    };\n  });\n\n  return (\n    chartType === \"shiftedmarimekko\"\n    ?\n      <div className={`tooltip${active ? \" active\" : \"\"}`} style={tooltipStyle}>\n        <div className=\"tooltip-country\">{selected.Region}</div>\n        <div className=\"tooltip-poverty\">{selected.Subgroup + \": \" + formatSI(selected.Value) + units}</div>\n      </div>\n    : chartType === \"bubble\"\n      ? <div className={`tooltip${active ? \" active\" : \"\"}`} style={tooltipStyle}>\n         <div className=\"tooltip-country\">{selected.Country}</div>\n          <div className=\"tooltip-poverty\">{\"Out of school: \" + selected.coosshare + units}</div>\n          <div className=\"tooltip-poverty\">{\"Below minimum proficiency: \" + selected.bmpshare + units}</div>\n        </div>\n      : <div className={`tooltip${active ? \" active\" : \"\"}`} style={tooltipStyle}>\n          <div className=\"tooltip-country\">{selected[0]}</div>\n          <div className=\"tooltip-poverty\">{formatSI(selected[1]) + units}</div>\n        </div>\n  );\n});\n\nexport default Tooltip;","import React, { useRef, useState, useEffect } from \"react\";\nimport { scaleLinear, scaleOrdinal } from \"d3-scale\";\nimport { select } from \"d3-selection\";\nimport { shiftedmarimekko } from \"./data.json\";\nimport Tooltip from \"./Tooltip\";\nimport { axisLeft } from \"d3-axis\";\nimport { useSpring, useSprings, animated } from \"react-spring\";\nimport { easeSinInOut } from \"d3-ease\";\nimport { Text } from '@visx/text';\n\nconst margin = {\n    top: 10,\n    right: 20,\n    bottom: 40,\n    left: 50\n  };\n\nconst ShiftedMarimekko = ({\n    width,\n    height,\n    view,\n    step\n  }) => {\n    if(width < 500){\n      margin.bottom = 60;\n    }\n    else{margin.bottom = 40}\n\n    let regionLabels = shiftedmarimekko.filter(d => d.Subgroup === \"Children out of school\");\n\n    const yAxisRef = useRef(null);\n\n    const [activeBar, setActiveBar] = useState(\"\");\n    \n    const chartWidth = width - margin.left - margin.right;\n    const chartHeight = height - margin.top - margin.bottom;\n    const tickSize = 6;\n\n    let xScale = scaleLinear()\n      .domain([0,1])\n      .range([0,chartWidth]);\n\n    let yScale = scaleLinear()\n      .domain([-1,1])\n      .range([chartHeight,0]);\n\n    let heightScale = scaleLinear()\n        .domain([0,1])\n        .range([0,chartHeight/2])\n\n    const yAxis = axisLeft(yScale)\n      .tickSize(-chartWidth)\n      .tickPadding(tickSize)\n      .tickValues([-1,-0.8,-0.6,-0.4,-0.2,0.2,0.4,0.6,0.8,1])\n      .tickFormat(function (v) {\n        return Math.abs(v)*100 + '%';\n    })\n\n    let colorScale = scaleOrdinal()\n        .domain([\"Above minimum proficiency level\", \"Below minimum proficiency\", \"Children out of school\", \"Learning poor\"])\n        .range([\"#6CB1C0\", \"#E4D152\", \"#C94940\", \"#E0B17E\"])\n\n    const tooltipRef = useRef(null);\n\n    useEffect(() => {\n        select(yAxisRef.current).call(yAxis);\n      });\n\n    const rectStyles = useSprings(\n      shiftedmarimekko.length,\n      shiftedmarimekko.map((d, i) => {\n        return {\n          config: {\n            duration: 150,\n            easing: easeSinInOut,\n          },\n          x: xScale(d.cumshare),\n          width: xScale(d.share),\n          y: view === \"regional\"\n              ? yScale(d.y)\n              : yScale(d.yglobal),\n          height: view === \"regional\"\n            ? heightScale(d.shareinregion)\n            : heightScale(d.shareinglobal),\n          stroke: \"#FFFFFF\",\n          strokeWidth: view === \"regional\" ? 1 : 0,\n          fill: step === \"global\" \n            ? d.Subgroup === \"Below minimum proficiency\" || d.Subgroup === \"Children out of school\"\n              ?  colorScale(\"Learning poor\")\n              : colorScale(d.Subgroup)\n            : colorScale(d.Subgroup),\n          opacity: activeBar === d.Regioncode + \"-\" + d.Subgroup || step === \"global\" || step === \"global-breakdown\"\n            ? 1\n            : activeBar === \"\"\n              ? 1\n              : 0.3\n        };\n      })\n    );\n\n    const highlightMap = {\n      \"global\": [null, null],\n      \"global-breakdown\": [null, null],\n      \"regional\": [null, null],\n      \"subsaharanafrica-1\": [\"SSF\", \"all\"],\n      \"subsaharanafrica-2\": [\"SSF\", \"learning poor\"],\n      \"subsaharanafrica-3\": [\"SSF\", \"Below minimum proficiency\"],\n      \"subsaharanafrica-4\": [\"SSF\", \"Children out of school\"],\n      \"southasia-1\": [\"SAR\", \"learning poor\"],\n      \"southasia-2\": [\"SAR\", \"Children out of school\"],\n      \"southasia-3\": [\"SAR\", \"Below minimum proficiency\"],\n    }\n    \n    function getRect(regionCode, subgroup) {\n      if(regionCode === null){\n        return {\"x\": 0, \"y\": chartHeight, \"width\": 0, \"height\": 0}\n      }\n      const regionData = shiftedmarimekko.filter(d => d.Regioncode === regionCode);\n      let rect = {}\n      if(subgroup === \"all\"){\n        let height = regionData.reduce(\n          (acc, currVal) => acc + currVal.shareinregion, 0)\n        rect.x = xScale(regionData[0].cumshare);\n        rect.y = yScale(regionData.filter(d => d.Subgroup === \"Above minimum proficiency level\")[0].y);\n        rect.width = xScale(regionData[0].share);\n        rect.height = heightScale(height);\n      }\n      else if(subgroup === \"learning poor\") {\n        let height = regionData.filter(d => d.Subgroup === \"Below minimum proficiency\")[0].shareinregion + regionData.filter(d => d.Subgroup === \"Children out of school\")[0].shareinregion\n        rect.x = xScale(regionData[0].cumshare);\n        //rect.y = yScale(regionData.filter(d => d.Subgroup === \"Below minimum proficiency\")[0].y);\n        rect.y = yScale(0);\n        rect.width = xScale(regionData[0].share);\n        rect.height = heightScale(height);\n      }\n      else {\n        rect.x = xScale(regionData.filter(d => d.Subgroup === subgroup)[0].cumshare)\n        rect.y = yScale(regionData.filter(d => d.Subgroup === subgroup)[0].y)\n        rect.width = xScale(regionData.filter(d => d.Subgroup === subgroup)[0].share)\n        rect.height = heightScale(regionData.filter(d => d.Subgroup === subgroup)[0].shareinregion)\n      }\n      return rect;\n    }\n    let rectData = getRect(highlightMap[step][0], highlightMap[step][1])\n\n    const highlightStyle = useSpring(\n      {config: {\n          duration: 1000,\n          easing: easeSinInOut,\n        },\n        x: rectData.x,\n        width: rectData.width,\n        y: rectData.y,\n        height: rectData.height,\n      }\n    );\n\n    return (\n    <>\n        <svg width={width} height={height}>\n        <defs>\n            <marker\n                id=\"arrow\"\n                viewBox=\"0 -10 20 20\"\n\t\t\t\t        refX={5}\n\t\t\t\t        refY={0}\n\t\t\t\t        markerWidth={8}\n\t\t\t\t        markerHeight={8}\n\t\t\t\t        orient=\"auto\">\n                <path \n                    d=\"M0,-10L20,0L0,10\"\n                    className=\"arrowhead\"\n                ></path>\n            </marker>\n        </defs>\n        <g transform={`translate(${margin.left}, ${margin.top})`}>\n        <g className=\"g-axis\">\n            <g\n              className=\"axis axis--y\"\n              transform={`translate(0, 0)`}\n              ref={yAxisRef}\n            ></g>\n            <g className=\"axis-titles\">\n            </g>\n          </g>\n            <g className=\"marimekko-g\">\n                {shiftedmarimekko.map((d,i) => {\n                  return (\n                    <g>\n                      <animated.rect\n                        key={\"bar-\" + d.Regioncode + \"-\" + d.Subgroup}\n                        x={xScale(d.cumshare)}\n                        y={rectStyles[i].y}\n                        width={xScale(d.share)}\n                        height={rectStyles[i].height}\n                        fill={rectStyles[i].fill}\n                        stroke={\"#ffffff\"}\n                        strokeWidth={rectStyles[i].strokeWidth}\n                        opacity={rectStyles[i].opacity}\n                        onMouseOver={() => {\n                          setActiveBar(d.Regioncode + \"-\" + d.Subgroup)\n                          const xOffset = 50;\n                          const yOffset = 50;\n                          const end = xScale(d.cumshare) +  xScale(d.share)/2 > width / 2 ? true : false;\n                          const chart = \"shiftedmarimekko\";\n                          const units = \" children\";\n    \n                          tooltipRef.current.handleMouseOver(\n                            d,\n                            xScale(d.cumshare) +  xScale(d.share)/2,\n                            yScale(d.y),\n                            xOffset,\n                            yOffset,\n                            chartWidth,\n                            end,\n                            units,\n                            chart\n                          );\n                        }}\n                        onMouseLeave={() => {\n                          setActiveBar(\"\")\n                          tooltipRef.current.handleMouseOut();\n                        }}\n                      ></animated.rect>\n                    </g>\n                  );\n                })\n            }\n            </g>\n            <g className=\"highlightRect\">\n              <animated.rect\n                x={highlightStyle.x}\n                y={highlightStyle.y}\n                height={highlightStyle.height}\n                width={highlightStyle.width}\n                stroke={\"#000000\"}\n                fill={\"none\"}\n                strokeWidth={2}\n              ></animated.rect>\n            </g>\n            <g className=\"regionlabels\">\n                {regionLabels.map(d => {\n                        return (\n                            <Text\n                                className={\"region-label\"}\n                                x={xScale(d.cumshare + d.share/2)}\n                                y={yScale(d.y) + heightScale(d.shareinregion)}\n                                dy={4}\n                                textAnchor={\"middle\"}\n                                style={{\n                                  opacity: view === \"regional\" ? 1 : 0,\n                                  transitionProperty: \"opacity\",\n                                  transitionDuration: 150,\n                                  transitionDelay: view === \"regional\" ? 1 : 0}}\n                                width={xScale(d.share)}\n                                verticalAnchor={\"start\"} \n                            >{d.Region}</Text>\n                        )\n                    })\n                }\n            </g>\n            <g className=\"widthannotation\"\n              style={{\n                opacity: view === \"regional\" ? 1 : 0,\n                transitionProperty: \"opacity\",\n                transitionDuration: 150,\n                transitionDelay: view === \"regional\" ? 1 : 0}}>\n                <Text\n                    x={xScale(0.28421762 + 0.3188211108/2)}\n                    y={yScale(0.50) - 5}\n                    textAnchor={\"middle\"}\n                    verticalAnchor={\"end\"}\n                    width={xScale(0.28421762 + 0.3188211108) - xScale(0.28421762)}\n                    fontSize={\"15px\"}\n                >Population of children in each region</Text>\n                <line\n                    x1={xScale(0.28421762) + 2}\n                    x2={xScale(0.28421762 + 0.3188211108) - 6}\n                    y1={yScale(0.50)}\n                    y2={yScale(0.50)}\n                    stroke={\"#000000\"}\n                    strokeWidth={1}\n                    markerEnd={\"url(#arrow)\"}\n                ></line>\n                <line\n                    x2={xScale(0.28421762) + 6}\n                    x1={xScale(0.28421762 + 0.3188211108) - 2}\n                    y1={yScale(0.50)}\n                    y2={yScale(0.50)}\n                    stroke={\"#000000\"}\n                    strokeWidth={1}\n                    markerEnd={\"url(#arrow)\"}\n                ></line>\n            </g>\n            <g className=\"learning-poor-annotation\">\n                <line\n                  x1={xScale(0) - 8}\n                  x2={xScale(1) + 3}\n                  y1={yScale(0)}\n                  y2={yScale(0)}\n                  stroke={\"#000000\"}\n                  strokeWidth={1}\n                ></line>\n                <line\n                  x1={xScale(0) - 8}\n                  x2={xScale(0)- 8}\n                  y1={yScale(0)}\n                  y2={yScale(0.12)}\n                  stroke={\"#000000\"}\n                  strokeWidth={1}\n                  markerEnd={\"url(#arrow)\"}\n                ></line>\n                <line\n                  x1={xScale(0) - 8}\n                  x2={xScale(0) - 8}\n                  y1={yScale(0)}\n                  y2={yScale(-0.12)}\n                  stroke={\"#000000\"}\n                  strokeWidth={1}\n                  markerEnd={\"url(#arrow)\"}\n                ></line>\n                <text\n                  x={xScale(0) + 3}\n                  y={yScale(0) - 8}\n                  fontFamily={\"Open Sans Condensed\"}\n                  fontSize={15}\n                >Not learning poor</text>\n                <text\n                  x={xScale(0) + 3}\n                  y={yScale(0) + 16}\n                  fontFamily={\"Open Sans Condensed\"}\n                  fontSize={15}\n                >Learning poor</text>\n            </g>\n        </g> \n      </svg>\n      <div style={{\"opacity\": step === \"global\" || step === \"global-breakdown\" ? 0 : 1}}>\n        <Tooltip ref={tooltipRef}/>\n      </div>\n      </>\n      )\n    }\n\nexport default ShiftedMarimekko;","import ContainerDimensions from \"react-container-dimensions\"\nimport LearningPovertyKey from \"./LearningPovertyKey\";\nimport ShiftedMarimekko from \"./ShiftedMarimekko\";\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <div className=\"row header\">\n          <h2>Learning poverty in low- and middle-income countries varies by region</h2>\n          <div className=\"learning-poverty-key-container\">\n              {<LearningPovertyKey\n                  step={\"regional\"}\n              ></LearningPovertyKey>}\n          </div>\n        </div>\n      <div className=\"row viz\">\n        <ContainerDimensions>\n          { ({ width,height }) =>\n          <>\n            <ShiftedMarimekko\n                width={width}\n                height={height}\n                view={\"regional\"}\n                step={\"regional\"}\n            ></ShiftedMarimekko>\n          </>\n          }\n        </ContainerDimensions>\n      </div>\n      <div className=\"row footer\">Source: World Bank. 2019. <a href=\"https://openknowledge.worldbank.org/handle/10986/32553\">Ending Learning Poverty : What Will It Take?</a> Washington, DC.</div>\n    </div>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.scss';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}