2c:null 2d:["$","title",null,{"children":"Virtual Water Trade (Wheat) | Clément Renaud | Observable"}] 32: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 }33: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) }34:[] 30:{"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","bio":""},"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,"bio":""}],"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":{"titling":"auto","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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"final = svg.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"chords = chord(matrix);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"svgSize = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"ribbon = d3.ribbon()\n .radius(innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"innerRadius = outerRadius - 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1839,"value":"exporters = Object.keys(hashmap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"