2d:null 2e:["$","title",null,{"children":"Virtual Water Trade (Wheat) | Clément Renaud | Observable"}] 33:T59d,group = { svg.selectAll('*').remove() const g = svg.append("g") .selectAll("g") .data(chords.groups) //.groups.filter(d=> d.value !== 0) ) .join("g") .attr('class', 'country') g.append("path") .attr("fill", d => color(countries[d.index])) .attr("stroke", d => d3.rgb(color(countries[d.index])).darker()) .attr("d", arc) .on("mouseover", mouseOver) .on("mouseout", mouseOut); g.append("text") .attr('class', 'country-name') .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; return d }) .attr("dy", ".35em") .attr("text-anchor", d => d.angle > Math.PI ? "end" : null ) .attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90})` + `translate(${outerRadius + 10})` + `${d.angle > Math.PI ? "rotate(180)" : ""}` ) .attr('fill', '#555') .attr('font-size', '.8em') .attr('font-weight', d => exporters.includes(countries[d.index]) ? "bold" : "normal") .text(d => metadata[countries[d.index]].country_name) .on("mouseover", mouseOver) .on("mouseout", mouseOut) svg.append("g") .attr("fill-opacity", 0.67) .attr("class", "chord") .selectAll("path") .data(chords) .join("path") .attr("d", ribbon) .attr("fill", d => color(countries[d.target.index])) .attr("stroke", d => d3.rgb(color(countries[d.target.index])).darker()) return g }34:T4d3,mouseOver = (g, i, els) => { const targets = [...chords.filter(d => d.target.index === i).map(d => d.source.index), i] const sources = [...chords.filter(d => d.source.index === i).map(d => d.target.index), i] svg.selectAll(".chord path") .transition() .attr("fill", d => d.target.index === i ? "red" : d.source.index === i ? "green" : color(countries[d.target.index]) ) .attr("stroke", d => d.target.index === i ? "red" : d.source.index === i ? "green" : d3.rgb(color(countries[d.target.index])).darker() ) .filter(d => d.source.index != i && d.target.index != i ) .style("opacity", .1) svg.selectAll(".country") .transition() // .attr("fill", d => // targets.includes(d.index) ? "red" : // sources.includes(d.index) ? "green" : // color(d.index) // ) // .attr("stroke", d => // targets.includes(d.index) ? "red" : // sources.includes(d.index) ? "green" : // d3.rgb(color(d.index)).darker() // ) .filter(d => !targets.includes(d.index) && !sources.includes(d.index) ) .style("opacity", .1) }35:[] 31:{"id":"e60cc499d104d706","slug":"virtual-water-trade-wheat","title":"Virtual Water Trade (Wheat)","thumbnail":"c88c41b615da126bafdbfc6f7978d82d6345c0f200f1ef2577bca766dbafa616","access_level":"public","create_time":"$D2019-05-06T14:24:40.266Z","update_time":"$D2022-04-06T14:59:52.783Z","view_time":null,"first_public_time":"$D2022-04-06T11:38:35.717Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"866b7439c266bbe5","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":"starter_2024"},"version":1937,"publish_version":1937,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b23a90c6da12bac","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":null}],"members":[{"type":"individual","id":"4b23a90c6da12bac","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":null,"role":"editor"}],"comments":[{"id":"ce570d73cfa90b98","reply_to_id":null,"content":"this notebook is not published; (either way you don't need anything specific to download svg, there is now a menu item)","create_time":"$D2022-04-06T14:38:22.559Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Virtual Water Trade (Wheat)","cells":[{"id":0,"value":"md`# Virtual Water Trade (Wheat)\n\nA representation of wheat trade as [virtual water](https://en.wikipedia.org/wiki/Virtual_water). \n\n> Virtual water trade (also known as trade in embedded or embodied water) refers to the hidden flow of water if food or other commodities are traded from one place to another. (...) When a country imports one tonne of wheat instead of producing it domestically, it is saving about 1,300 cubic meters of real indigenous water. -- *from [Wikipedia](https://en.wikipedia.org/wiki/Virtual_water)*.\n\nThe present diagram shows the global flows of \"virtual\" water observed in wheat trade. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"viewof footprintType = select({\n title: \"Type of footprint\",\n // description: ,\n options : [\n {\n value : \"green\", \n label : \"Green: precipitations\" \n },\n {\n value: \"blue\",\n label: \"Blue: surface or groundwater resources\"\n },\n {\n value : \"grey\",\n label : \"Grey: volume of water that is required to dilute pollutants\"\n },\n {\n value: \"value\",\n label : \"Value: trade data value (in tonnes)\"\n }\n]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof minExport = slider({\n min: 0, \n max: maxValue/2, \n step: maxValue/500,\n value : maxValue/200,\n format: v => `${Math.round(v)} ${footprintType === \"value\" ? \"tonnes\" : \"cubic meters\"}`,\n description: `Treshold : minimum export value (${footprintType === \"values\" ? \"tonnes\" : \"m³ of water\" })`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"final = svg.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"viewof indicatorType = select({\n title: \"Color indications\",\n options : [\n { value : \"ppp\", label : \"Freshwater per capita (FAO)\" },\n { value : \"freshwater\", label: \"GDP PPP (World Bank)\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"html`\n

Color intensity is based on ${indicatorType === \"ppp\" ? \"GDP (ppp)\" :\"water\" } per capita in the country.

\n0\n${\nnew Array(10).fill(0).map((d, i, arr) =>( (d3.max(indicatorValues) - d3.min(indicatorValues)) / arr.length ) * i)\n .map(d => colorScale(d))\n .map(d => '')\n}\n${Math.round(d3.max(indicatorValues))} ${indicatorType === \"ppp\" ? \"USD (current international)\" : \"m³\"}/person\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"md`\n\nFootprint type: *${footprintType}*. \n\nExports are in green, imports in red.\n\nValues are expressed in m³ of water = wheat trade (in tonnes) * water footprint per ton of crop (m³). \n\n**${exporters.length} Exporters** (*in bold*): ${exporters.map(d=>metadata[d].country_name).join(\" / \")} \n\n**${countries.length - exporters.length} importers: ** ${countries.filter(d => !exporters.includes(d)).map(d=>metadata[d].country_name).join(\" / \")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"md`\n#### Wheat Trade Data \n\nsource: Food and Agriculture Organization (FAO) - [Link FAOSTAT](http://www.fao.org/faostat/en/#data/TM)\n\n#### Water Footprint \n\nsource: Mekonnen, M.M. & Hoekstra, A.Y. (2011) The green, blue and grey water footprint of crops and derived crop products, Hydrology and Earth System Sciences, 15(5): 1577-1600. - *\"[Appendix II. Water footprint per ton of crop or derived crop product at national and sub-national level (m3/ton) (1996-2005)](https://waterfootprint.org/en/resources/waterstat/product-water-footprint-statistics/)\"*\n\n#### Freshwater resources per capita\n\nsource: Renewable internal freshwater resources per capita (cubic meters) from Food and Agriculture Organization, AQUASTAT data (FAO). CC BY-4.0 - [World Bank](https://data.worldbank.org/indicator/er.h2o.intr.pc?end=2014&name_desc=true&start=2014&type=points&view=map&year=2014)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"chords = chord(matrix);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"color = (countryCode) => \n indicatorType === \"ppp\"\n ? colorScale(metadata[countryCode].ppp)\n : colorScale(metadata[countryCode].freshwater)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"colorSchemeName = `scheme${footprintType === \"value\"? \"Orange\" : footprintType[0].toUpperCase() + footprintType.substring(1)}s`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"indicatorValues = countries\n .map(d => parseFloat(metadata[d][indicatorType]))\n .map(d => Number.isNaN(d) ? null : d) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"colorScale = d3.scaleLinear()\n .domain([d3.min(indicatorValues), d3.max(indicatorValues)])\n .range([d3[colorSchemeName][9][0], d3[colorSchemeName][9][8]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"svgSize = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"svg = d3.select(DOM.svg(svgSize, svgSize))\n .attr(\"viewBox\", [-svgSize / 2-100, -svgSize / 2 -100, svgSize+200, svgSize+200])\n .style(\"fill\", \"white\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"mouseOut = (g, i, els) => {\n \n svg.selectAll(\".chord path\")\n .transition()\n .style(\"opacity\", 1)\n .attr(\"fill\", d => color(countries[d.target.index]))\n .attr(\"stroke\", d => d3.rgb(color(countries[d.target.index])).darker())\n \n svg.selectAll(\".country\")\n .transition()\n .style(\"opacity\", 1)\n // .attr(\"fill\", d => color(d.index))\n // .attr(\"stroke\", d => d3.rgb(color(d.index)).darker())\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"chord = d3.chord()\n .padAngle(0.05)\n .sortSubgroups(d3.descending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"arc = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"ribbon = d3.ribbon()\n .radius(innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"outerRadius = Math.min(svgSize, svgSize) * 0.5 - 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"innerRadius = outerRadius - 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"function groupTicks(d, step) {\n const k = (d.endAngle - d.startAngle) / d.value;\n return d3.range(0, d.value, step).map(value => {\n return {value: value, angle: value * k + d.startAngle};\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1839,"value":"exporters = Object.keys(hashmap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"matrix = countries.map(a => countries.map( b => hashmap[a]? hashmap[a][b] || 0 : 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"hashmap = {\n const clean = {}\n filtered.forEach(d =>{\n if( !Object.keys(clean).includes(d.src)) clean[d.src] = {}\n clean[d.src][d.tgt] = d[footprintType]\n })\n return clean\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1787,"value":"countries = Array.from(new Set(\n filtered.map(d => [d.src, d.tgt])\n .reduce( (acc, x) => acc.concat(x), [])\n .filter(d => metadata[d]) // keep only countries w metadata\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"filtered = raw.filter(d => d.src != \"\" && d.tgt != \"\") // remove unknow dest\n .filter(d => d[footprintType] > minExport)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"data = {\n const clean = {}\n raw.forEach(d =>{\n if( !Object.keys(clean).includes(d.src)) clean[d.src] = {}\n clean[d.src][d.tgt] = d[footprintType]\n })\n return clean\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"metadata = {\n const clean_metadata ={}\n raw_metadata.forEach(d => { clean_metadata[d.country_code] = d })\n return clean_metadata\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"maxValue = d3.max(raw.map(d => d[footprintType]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"raw_metadata = d3.csv('https://gist.githubusercontent.com/clemsos/e452c7d6b0d729fe504db5c550a00dc8/raw/35313bdc180f34f1e199ec30a7559478de90660a/wheat_water_footprint_metadat.csv', d=> ({\n \"country_name\" : d.country_name,\n \"country_code\" : d.country_code,\n \"ppp\" : parseFloat(d.ppp),\n \"freshwater\" : parseFloat(d.freshwater)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"raw = d3.csv('https://gist.githubusercontent.com/clemsos/e452c7d6b0d729fe504db5c550a00dc8/raw/35313bdc180f34f1e199ec30a7559478de90660a/wheat_water_footprint_matrix.csv', d => ({ \n \"src\" : d.src, \n \"tgt\" : d.tgt, \n \"green\" : parseFloat(d.green), \n \"grey\" : parseFloat(d.grey), \n \"blue\" : parseFloat(d.blue),\n \"value\" : parseFloat(d.value)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"import {slider, button, select, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"