2c:null 2d:["$","title",null,{"children":"The dairy products the U.S. trades with and Mexico and Canada | Andrew Mollica | Observable"}] 32:T468,chart = { const root = treemap(data); const svg = d3.create("svg") .attr('width', width) .attr('height', height) .style("font", "10px sans-serif"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", '#b10000') .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .attr("clip-path", d => d.clipUid) .attr('fill', '#fff') .attr('fill-opacity', 1) .attr('font-size', 14) .attr('x', 5) .attr('dy', '1.33em') .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`) return svg.node(); }33:T40b,rawData = `Canada,exports,Butter and other milk fats,81388 Canada,exports,Casein,10927 Canada,exports,Cheese,56138 Canada,exports,Concentrated milk,14109 Canada,exports,Fluid milk,21092 Canada,exports,Ice cream,21606 Canada,exports,Infant food,194884 Canada,exports,Lactose,12292 Canada,exports,Milk albumin,64852 Canada,exports,Other,5497 Canada,exports,Whey and other natural milk products,49512 Canada,imports,Cheese,32671 Canada,imports,Other,26505 Canada,imports,Whey and other natural milk products,34512 Canada,imports,Yogurt,30643 Mexico,exports,Butter and other milk fats,32757 Mexico,exports,Buttermilk,22430 Mexico,exports,Cheese,386704 Mexico,exports,Concentrated milk,689623 Mexico,exports,Fluid milk,25533 Mexico,exports,Ice cream,51687 Mexico,exports,Lactose,31356 Mexico,exports,Other,14555 Mexico,exports,Whey and other natural milk products,93457 Mexico,exports,Yogurt,12088 Mexico,imports,Butter and other milk fats,47319 Mexico,imports,Cheese,16844 Mexico,imports,Concentrated milk,35448 Mexico,imports,Other,15477`34:[] 30:{"id":"cabd5e0b988fbb07","slug":"the-dairy-products-the-u-s-trades-with-and-mexico-and-canada","title":"The dairy products the U.S. trades with and Mexico and Canada","thumbnail":"6fd7065534e74b357b7d3af93f7af0dee09321afed6b0d551a3f2b9e99b5aac4","access_level":"public","create_time":"$D2019-09-30T20:16:09.631Z","update_time":"$D2019-11-08T21:52:49.307Z","view_time":null,"first_public_time":"$D2019-11-08T21:31:37.746Z","fork":{"id":"a1fd3857bac219b0","slug":"treemap-component","title":"Treemap component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1591dff650540652","login":"armollica","name":"Andrew Mollica","avatar_url":"https://avatars-next.observableusercontent.com/81698a6b415cad75964279b2f83be562de78f68bb0853ad141ddb15746fb7218","tier":"starter_2024"},"version":225,"publish_version":225,"role":null,"authored":false,"authors":[{"type":"individual","id":"1de40fc611387e4a","login":"armollica","name":"Andrew Mollica","avatar_url":"https://avatars-next.observableusercontent.com/81698a6b415cad75964279b2f83be562de78f68bb0853ad141ddb15746fb7218","tier":null}],"members":[{"type":"individual","id":"1de40fc611387e4a","login":"armollica","name":"Andrew Mollica","avatar_url":"https://avatars-next.observableusercontent.com/81698a6b415cad75964279b2f83be562de78f68bb0853ad141ddb15746fb7218","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"The dairy products the U.S. trades with and Mexico and Canada","cells":[{"id":0,"value":"md`# The dairy products the U.S. trades with and Mexico and Canada\nCleaned up version of these graphics ended up in this story:\n\n[Robotic milking in Canada, struggling farmers in Mexico: How Wisconsin’s trading partners are weathering the dairy crisis](https://www.jsonline.com/in-depth/news/special-reports/dairy-crisis/2019/10/18/dairy-crisis-wisconsin-farmers-futures-tied-canada-mexico-farms/3997359002/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof tile = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof dataset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"getSideLength = () => {\n // 1 Canada exports 532297\n // 2 Canada imports 124331\n // 3 Mexico exports 1360190\n // 4 Mexico imports 115088\n \n const area = d3.scaleLinear()\n .domain([0, 1360190])\n .range([0, 500000]);\n \n const value = {\n exportsToMexico: 1360190,\n importsFromMexico: 115088,\n exportsToCanada: 532297,\n importsFromCanada: 124331\n };\n \n const a = area(value[dataset]);\n const sideLength = Math.sqrt(a)\n return sideLength;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"width = getSideLength()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"height = getSideLength()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"data = datasets[dataset]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"datasets = ({\n exportsToMexico,\n importsFromMexico,\n exportsToCanada,\n importsFromCanada,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"parsedData = d3.csvParseRows(rawData, (row) => {\n return {\n country: row[0],\n direction: row[1],\n product_group: row[2],\n value: row[3],\n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"exportsToMexico = nestData(parsedData.filter(d => d.country === 'Mexico' && d.direction === 'exports'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"importsFromMexico = nestData(parsedData.filter(d => d.country === 'Mexico' && d.direction === 'imports'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"exportsToCanada = nestData(parsedData.filter(d => d.country === 'Canada' && d.direction === 'exports'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"importsFromCanada = nestData(parsedData.filter(d => d.country === 'Canada' && d.direction === 'imports'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"nestData = (d) => {\n const children = d3.nest()\n .key(d => d.product_group)\n .entries(d)\n .map((d) => {\n console.log(d)\n const children = d.values\n .map((d) => {\n return {\n key: d.key,\n value: +d.value,\n };\n });\n return {\n name: d.key,\n children: children\n };\n });\n return {\n name: 'Dairy',\n children: children\n };\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"treemap = data => d3.treemap()\n .tile(d3[tile])\n .size([width, height])\n .padding(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"