31:T430,table = html `

Long Label	Short Label	Value
Central/East. European Countries and New Indep. States of the former URSS	CEECs	0
Least Developed Countries	LDCs	1
Other Low Income Countries	Other LICs	2
Limited Middle Income Countries	LMICs	3
More Advanced Developing Countries and Territories	MADCTs	4
Upper Middle Income Countries	UMICs	5
High Income Countries	HICs	6

`32:T76b,tracker = { const div = d3.select(DOM.element('div')) const svg = div.append('svg') .attr('width', width) .attr('height', height - 900) .attr('class','income-lines') const g = svg.append('g') const cells = g.append('g') .selectAll('g') .data(lineData) .join('g') .attr('class', d => d.country) .attr('transform', d => `translate(${layoutScale.col(d.col - 1)}, ${layoutScale.row(d.row)})`) .attr("class", "smallmultiple"); cells.append("g") .call(yearAxis) .attr('transform', d => `translate(0, ${layoutScale.row.bandwidth()})`) .attr("class", "bottomAxis") cells.append('path') .data(lineData) .attr('d', (d, i) => d.line) .attr('fill', 'none') .attr('stroke-width', 4) .attr('stroke', (d, i) => selectColor === 'Income Groups' ? colorScale(d.incomegroup) : d.color); cells.selectAll('path') .data(function(d) { return d.points}) .enter() .append('circle') .attr('cx', d => yearScale(d[1])) .attr('cy', d => valueScale(d[0])) .attr('fill', 'black') .attr('r', 1); const label = cells.append("g") .attr("class", "country-label") label.append('text') .data(lineData) .attr('class', 'country-label') .attr('x', 0) .attr('y', 10) .attr('font-size', 9) .attr('fill', 'none') .attr('stroke', 'white') .attr('stroke-width', 5) .attr("font-family", "sans-serif") .attr('text-anchor', 'start') .text((d, i) => d.code); label.append('text') .data(lineData) .attr('class', 'country-label') .attr('x', 0) .attr('y', 10) .attr('font-size', 9) .attr("font-family", "sans-serif") .attr('text-anchor', 'start') .attr('fill', (d, i) => selectColor === 'Income Groups' ? colorScale(d.incomegroup) : d.color) .text((d, i) => d.code); return div.node(); }33:[] 2f:{"title":"Income Tracker","cells":[{"id":0,"value":"md`# Income Tracker`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md `### How countries changed income groups over the years`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md `Single trendlines for countries showing their updgrade or downgrade to a certain income group. Here groups have been converted in numbers, going from 0 to 6 depending on their income level. Below you can check the conversion table. By hovering individual lines it is possible to obtain more information.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md `#### How to read:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"fav = html`

Green lines are positive. Yellow ones are stable development trends, while red lines are negative. You can also switch colors and have an overview of which country belongs to which group!

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"viewof selectColor = DOM.select(options)","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"md`Flag the box below to see only countries relevant for our investigation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"viewof filter = Toggle({ label: \"Only relevant countries\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"graphs = d3.select(tracker).selectAll(\"g.smallmultiple\").selectAll('g.country-label').selectAll('text')","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"highlight = {\n const svg = d3.select(tracker);\n \n graphs.on(\"mouseover.highlight\", function(d) { \n d3.select(this)\n .text((d, i) => d.country);\n });\n\n graphs.on(\"mouseout.highlight\", function(d) {\n d3.select(this)\n .text((d, i) => d.code);\n });\n \n return graphs\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"md `## Code and calculations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"options = [\"Development Trend\", \"Income Groups\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"determineColor = function(firstValue, lastValue) {\n if (firstValue < lastValue) {\n return '#00B377'\n } else if (firstValue === lastValue) {\n return '#E69900'\n } else { return '#990000' }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"lineData = {\n let col = 0\n let row = 0\n let rowCount = 0\n let currentCountries = filter === true ? filterCountries : countries\n \n return currentCountries.map(function(label, l) {\n\n const currentGroup = countryGrouped[label]\n const grouplength = currentGroup.length\n const color = determineColor(currentGroup[0].group_value, currentGroup[grouplength - 1].group_value)\n \n if (col < 4) { \n col = col + 1 \n } else { \n col = 1; rowCount = rowCount + 4 \n }\n \n if (l <= rowCount) { row = row + 1 }\n\n return { \n line: lineGenerator(currentGroup), \n code: currentGroup[0].code,\n country: label,\n col, \n row, \n color,\n points: currentGroup.map(d => { return [d.group_value, d.year] }),\n incomegroup: incomeGroup[currentGroup[grouplength - 1].group_value]\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"incomeGroup = ['CEECs', 'LDCs', 'Other LICs', 'LMICs', 'MADCTs', 'UMICs', 'HICs']","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"lineGenerator = d3.line().x(d => yearScale(d.year)).y(d => valueScale(d.group_value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"yearAxis = d3.axisTop(yearScale)\n .tickValues([parseYear(\"1996-01-01\"), parseYear(\"2019-01-01\")])\n .tickSize([0])\n .tickFormat(d3.timeFormat('%Y'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"yearScale = d3.scaleTime().domain([parseYear(\"1996-01-01\"), parseYear(\"2019-01-01\")]).range([margin.left, width / 4.5 - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"valueScale = d3.scaleLinear().domain([0, 6]).range([50, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"layoutScale = {\n const row = d3.scaleBand()\n .domain(d3.range(65))\n .range([0, height])\n // .paddingOuter(0.4)\n .padding(0.1);\n \n const col = d3.scaleBand()\n .domain(d3.range(4))\n .range([0, width - margin.right])\n .paddingOuter(0.3)\n .align(0.1)\n .padding(0.02);\n \n return {row, col}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"colorScale = d3.scaleOrdinal(['#B8BCC3','#EDCE90','#B2AE79','#7F8D67','#576A55','#394740','#212727'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"parseYear = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"height = 3900","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"margin = ({left: 10, right: 10, top: 40, bottom: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"filterCountries = [\"Jordan\", \"Egypt\", \"Uganda\", \"Rwanda\", \"Kenya\", \"Sudan\", \"India\", \"Bangladesh\", \"Colombia\", \"Bolivia\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"countries = _.uniq(data.map(function (d) { return d.country }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"countryGrouped = _.groupBy('country', data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"data = noparsedata.map(function(d) {\n return {\n country: d.country,\n year: new Date(d.year),\n group_value: +d.group_value,\n code: d.iso3code\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"noparsedata = d3.csv('https://raw.githubusercontent.com/die-tageszeitung/water-data/main/ipynb_notebooks/data/IncomeTracker/oecd-history_withvalues.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"_ = {\n const [_, fp] = await Promise.all([\n require(\"lodash@4\"),\n require(\"https://cdn.jsdelivr.net/gh/lodash/lodash@4/dist/lodash.fp.min.js\")\n ]);\n return fp(_);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"import { Toggle } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}