2c:null 2d:["$","title",null,{"children":"U.S. International Trade Since 1985 | Adrian Pearl | Observable"}] 32:Tabb,chart = { const root = treemap(yeardata); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("font", "10px sans-serif"); const label = svg.selectAll("text") .data(root.children) .enter().append("text") .attr("font-size", 24) .attr("font-weight", 200) .attr("y", 36) .attr("x", d => d.x0) .text(d => d.data.name); const leaf = svg.selectAll("g") .data(root.leaves()) .enter().append("g") .attr("transform", d => `translate(${d.x0},${d.y0 + topmargin})`); 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", d => { if (d.data.name == selected.country) {return "#001";} while (d.depth > 2) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", 0.5) .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) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value))) .enter().append("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => (i === nodes.length - 1) * 3 + 16 + (i - 0.5) * 9) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); leaf.on('mouseover', (d, i, e) => { const rect = e[i].querySelector('rect') rect.setAttribute('stroke', '#444') rect.setAttribute('stroke-width', 2) }); leaf.on('mouseout', (d, i, e) => { const rect = e[i].querySelector('rect') rect.setAttribute('stroke', null) }); leaf.on('mousedown', (d, i, e) => { selected.setcountry(d); //selected.setleaf(d.parent.parent); for (var j in e) { var rect = e[j].querySelector('rect'); var text = e[j].querySelector('text'); var x = e[j].__data__; if (x.data.name == d.data.name) { rect.setAttribute('fill', '#000'); text.setAttribute('fill', '#fff'); } else { while (x.depth > 2) x = x.parent; rect.setAttribute('fill', color(x.data.name)); text.setAttribute('fill', '#000'); } } }); //return root.children; return html`

Breaking Down Imports and Exports by Country in ${year}

Total annual imports and exports shown in millions of nominal USD

${svg.node()} `; }33:T1b2b,viewof selection = { const svg = d3.select(DOM.svg(width, histheight)); var xa = svg.append("g"); xa.call(xAxis); var ya = svg.append("g"); ya.call(yAxis); var ctry = selected.country; var rt = html`

Trade Surplusses and Deficits With ${ctry}, Since 1985

The black line shows total annual imports in millions of 2010 USD, as compared to exports. Blue bars show annual trade surpluses, and red bars annual trade deficits.

${svg.node()} `; // Add the bars group first to make sure the bars are underneath all overlays var bars = svg.append("g"); // Add the black imports line as a step curve var imline = svg.append("path") .datum(selected.data) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d3.line() .curve(curve) .x(d => x(d.Year)) .y(d => y(d.Imports))); // Two dashed lines to mark import and export totals when hovering var imdash = svg.append("line") .attr("stroke-width", 1) .attr("stroke", "grey") .attr("stroke-dasharray", "5,5") .attr("x1", x(1985)); var exdash = svg.append("line") .attr("stroke-width", 1) .attr("stroke", "grey") .attr("stroke-dasharray", "5,5") .attr("x1", x(1985)); // White rectangles underneath the labels var imbox = svg.append("rect") .attr("fill-opacity", "0.9") .attr("rx", 3) .attr("ry", 3) .attr("fill", "white"); var exbox = svg.append("rect") .attr("fill-opacity", "0.9") .attr("rx", 3) .attr("ry", 3) .attr("fill", "white"); // Import and export text labels, added over the rectangles var imlabel = svg.append("text") .attr("x", x(1985) + 5 + textpadding) .style("font", "12px sans-serif"); var exlabel = svg.append("text") .attr("x", x(1985) + 5 + textpadding) .style("font", "12px sans-serif"); // Function to update the chart, called once now and whenever the selected country changes update(); // Whenever the selected country changes, we have to change the chart title and load the new data dispatch.on("statechange.selection", function(d) { ctry = selected.country; var ht = document.getElementById("historytitle"); var newkid = document.createElement('span'); newkid.textContent = selected.country; ht.replaceChild(newkid, ht.children[2]); // Update the y axis to the new bounds. Whether to do this is not an easy question. // Arguably, it's better to leave the y axis scale the same for all countries // so they can be easily compared. However, comparing U.S. trade with different countries // is the purpose of the treemap above. The purpose of this chart is to look at changes // in the trade balance within a particular country over time, and for that purpose it's // better to let each country's data fill up the available space y.domain(d3.extent(selected.data.map(d => d.Imports).concat(selected.data.map(d => d.Exports)))); ya.transition() .duration(750) .call(yAxis); imline.datum(selected.data) .transition() .duration(750) .attr("d", d3.line() .curve(curve) .x(d => x(d.Year)) .y(d => y(d.Imports))); update(); }); function update() { var selection = bars.selectAll("rect").data(selected.data); // Define the hover effect for any newly created bars. // New bars are added in only 2 cases: when the chart is first created, and // when you switch from a country where data from some years isn't available // (i.e. Russia pre-1992) to a country with all the data available (most of them). // The hover effect only needs to be defined once, so we add it here on the enter selection. // It includes moving the dashed lines, text labels, and white rectangles behind the text. selection.enter().append("rect") .on("mouseover", function(d) { // Move the dashed lines imdash.attr("x2", x(d.Year)) .attr("y1", y(d.Imports)) .attr("y2", y(d.Imports)); exdash.attr("x2", x(d.Year)) .attr("y1", y(d.Exports)) .attr("y2", y(d.Exports)); // To make sure the text labels don't overlap, whichever text label is on top // will be just above its dashed line, and the lower label will be just below its line. if (d.Imports > d.Exports) { imlabel.attr("y", y(d.Imports) - 5 - textpadding).attr("alignment-baseline", "baseline"); exlabel.attr("y", y(d.Exports) + 5 + textpadding).attr("alignment-baseline", "hanging"); } else { exlabel.attr("y", y(d.Exports) - 5 - textpadding).attr("alignment-baseline", "baseline"); imlabel.attr("y", y(d.Imports) + 5 + textpadding).attr("alignment-baseline", "hanging"); } imlabel.text(d.Year + " Imports from " + ctry + (d.Year == 2018 ? " (through March) " : "") + ": $" + format(d.Imports) + "M"); exlabel.text(d.Year + " Exports to " + ctry + (d.Year == 2018 ? " (through March) " : "") + ": $" + format(d.Exports) + "M"); // Find bounding boxes for each text label and place the white rectangles right behind them. const imrect = imlabel.node().getBBox(); imbox.attr("x", imrect.x - textpadding); imbox.attr("y", imrect.y - textpadding); imbox.attr("width", imrect.width + 2*textpadding); imbox.attr("height", imrect.height + 2*textpadding); const exrect = exlabel.node().getBBox(); exbox.attr("x", exrect.x - textpadding); exbox.attr("y", exrect.y - textpadding); exbox.attr("width", exrect.width + 2*textpadding); exbox.attr("height", exrect.height + 2*textpadding); }) // Now merge the new bars with the existing bars, and transition them to their new state .merge(selection) .transition() .duration(750) .attr("x", d => x(d.Year)) .attr("fill", d => d.Exports > d.Imports ? histcolors[1] : histcolors[0]) .attr("y", d => y(Math.max(d.Imports, d.Exports))) .attr("height", d => y(0) - y(Math.abs(d.Exports - d.Imports))) .attr("width", x.bandwidth()); // This is only necessary when switching to a country with less data available. // If, for example, you switch from Colombia (which has data from all years available) // to Yugoslavia (with only 1985-1991 data available), the bars pertaining to 1992-2018 // Colombia data need to be removed. selection.exit().remove(); } return rt; }34:[] 30:{"id":"cd86a1b19d100f05","slug":"u-s-international-trade-since-1985","title":"U.S. International Trade Since 1985","thumbnail":"35265942ea2910ea805d6280bc2842f9850c2a35e115dce86fe748ee028c9148","access_level":"public","create_time":"$D2018-06-05T17:11:44.503Z","update_time":"$D2021-11-18T02:30:14.449Z","view_time":null,"first_public_time":"$D2018-06-24T01:41:56.330Z","has_unpublished_edits":null,"fork":{"id":"a1fd3857bac219b0","slug":"treemap-component","title":"Treemap component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":3,"starred":false,"owner":{"type":"team","id":"2c58c2f129e15ae9","login":"adrianpearl","name":"Adrian Pearl","avatar_url":"https://avatars-next.observableusercontent.com/bcab59a714ee4fc7a6744a599157e552553ebb94146f9138ed2075f77487cf70","tier":"starter_2024","bio":""},"version":851,"publish_version":851,"role":null,"authored":false,"authors":[{"type":"individual","id":"399fb5b66e39fa45","login":"adrianpearl","name":"Adrian Pearl","avatar_url":"https://avatars-next.observableusercontent.com/bcab59a714ee4fc7a6744a599157e552553ebb94146f9138ed2075f77487cf70","tier":null,"bio":""}],"members":[{"type":"individual","id":"399fb5b66e39fa45","login":"adrianpearl","name":"Adrian Pearl","avatar_url":"https://avatars-next.observableusercontent.com/bcab59a714ee4fc7a6744a599157e552553ebb94146f9138ed2075f77487cf70","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"U.S. International Trade Since 1985","cells":[{"id":0,"value":"md`# U.S. International Trade Since 1985\nSources: [Census Bureau](https://www.census.gov/foreign-trade/statistics/country/index.html), [IUCN Red List](http://www.iucnredlist.org/technical-documents/data-organization/countries-by-regions) for a list of countries by region, and [Minneapolis Fed](https://www.minneapolisfed.org/community/financial-and-economic-education/cpi-calculator-information/consumer-price-index-and-inflation-rates-1913) for historical CPI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"md`\nThis notebook is an exploration of 32 years of U.S. international trade, focused on who our trade partners are (top graphic) and how our trade balance with each of them has changed over time (lower graphic). It combines a [treemap](https://beta.observablehq.com/@mbostock/d3-treemap) with a [difference chart](https://beta.observablehq.com/@mbostock/d3-difference-chart) (implemented differently from the linked example, using bars rather than clipped areas), and uses D3 dispatch to connect them and add interactivity\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md`\nLet's start by looking at who we traded with in 1985, when Japan and Canada were our largest trading partners by a comfortable margin. Moving forward towards the present day, China, Mexico, and several countries in Southeast Asia are the most notable risers.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof year = slider({min: 1985, max: 2018, step: 1, value: 1985})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"md`\nSelect a country from the treemap above to view its history of trade with the U.S. Hong Kong is an interesting example where declining imports and consistently increasing exports have turned trade deficits into large surplusses. There are also examples where regional neighbors, such as Guatemala, Honduras, and El Salvador, have similar trade histories.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"// For selecting a year, it is easy to use viewof and have the whole notebook\n// automatically respond to changes. For selecting a country by clicking on\n// it in the treemap, I don't think this is possible, so we have to use dispatch.\nselected = ({\n country: \"Hong Kong\",\n region: \"East Asia\",\n data: countrydata(\"East Asia\", \"Hong Kong\"),\n setcountry: function(d) {\n this.country = d.data.name;\n this.region = d.parent.data.name;\n this.data = countrydata(this.region, this.country);\n dispatch.call(\"statechange\", this, this.country);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"// Extract the selected country's trade data from every year in the database\ncountrydata = function(region, country) {\n var arr = [];\n for (var yr in trade) {\n \n // For each year, get the import and export data\n let im = trade[yr].children[0].children;\n let ex = trade[yr].children[1].children;\n \n // Find the data for the region of the selected country\n im = im.find(d => d.name == region);\n ex = ex.find(d => d.name == region);\n \n // For this year, the data might not exist\n // If it does, add it to the array. If not, move on to then next year\n im = im ? im.children.find(d => d.name == country) : null;\n ex = ex ? ex.children.find(d => d.name == country) : null;\n if (im && ex) {\n arr.push({\"Year\": yr, \"Imports\": im.value*basecpi/cpi[yr], \"Exports\": ex.value*basecpi/cpi[yr]});\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"yeardata = trade[year]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"basecpi = cpi[2010]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"// Consumer price index history from Minneapolis Fed\n// (Dollars in 2010) = (Dollars in other year) * (CPI in 2010) / (CPI in other year)\ncpi = ({\"1985\": 107.0, \"1986\": 109.0, \"1987\": 113.0, \"1988\": 118.0, \"1989\": 124.0, \"1990\": 130.0, \"1991\": 136.0, \"1992\": 140.0, \"1993\": 144.0, \"1994\": 148.0, \"1995\": 152.0, \"1996\": 156.0, \"1997\": 160.0, \"1998\": 163.0, \"1999\": 166.0, \"2000\": 172.0, \"2001\": 177.0, \"2002\": 179.0, \"2003\": 184.0, \"2004\": 188.0, \"2005\": 195.0, \"2006\": 201.0, \"2007\": 207.0, \"2008\": 215.0, \"2009\": 214.0, \"2010\": 218.0, \"2011\": 224.0, \"2012\": 229.0, \"2013\": 233.0, \"2014\": 236.0, \"2015\": 237.0, \"2016\": 240.0, \"2017\": 245.0, \"2018\": 250.0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"trade = d3.json(\"https://gist.githubusercontent.com/adrianpearl/dfaaffce1bc10415f2feac9aabb6c8af/raw/f51525df9e967fc70bb6b140dfd351e80eedb262/USA_trade_hierarchy.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"curve = d3.curveStepAfter","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"treemap = data => d3.treemap()\n .size([width, height - topmargin])\n .padding(1)\n .round(true)\n (d3.hierarchy(yeardata)\n .sum(d => d.value)\n .sort((a, b) => b.height - a.height || b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${linemargin.left},0)`)\n .call(d3.axisLeft(y))\n //.call(g => g.select(\".domain\").remove())\n /*.call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"x2\", width))\n .call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr(\"x\", 10)\n .attr(\"y\", 25)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Millions of USD\"))*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${histheight - linemargin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(d3.format(\"\")))\n //.call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr(\"x\", width - linemargin.right)\n .attr(\"y\", -10)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Year\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"y = d3.scaleLinear()\n .domain(d3.extent(selected.data.map(d => d.Imports).concat(selected.data.map(d => d.Exports))))\n .range([histheight - linemargin.bottom, linemargin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"x = d3.scaleBand()\n .domain(Object.keys(trade))\n .range([linemargin.left, width - linemargin.right])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"textpadding = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"topmargin = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"linemargin = ({top: 60, right: 0, bottom: 60, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"histheight = 680","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"width = 932","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 1060","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"dispatch = d3.dispatch(\"statechange\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"histcolors = d3.schemePastel1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3.scaleOrdinal().range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"