{
const w = 560, h = 360;
const margin = {top: 28, right: 20, bottom: 44, left: 56};
const iw = w - margin.left - margin.right;
const ih = h - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]).style("max-width", "100%");
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
texLabel(g, iw / 2, -14, "U.S. goods imports from China, 1991–2015",
{fontSize: 12, bold: true, anchor: "middle"});
const x = d3.scaleLinear().domain([1990, 2016]).range([0, iw]);
const y = d3.scaleLinear().domain([0, 520]).range([ih, 0]);
g.append("g").attr("transform", `translate(0,${ih})`)
.call(d3.axisBottom(x)
.tickValues([1990, 1995, 2000, 2005, 2010, 2015])
.tickFormat(d3.format("d")));
g.append("g").call(d3.axisLeft(y).ticks(5));
texLabel(g, iw / 2, ih + 34, "Year", {fontSize: 11});
texLabel(g, -44, ih / 2, "$B (nominal)", {rotated: true, fontSize: 11});
// Faint horizontal gridlines
g.append("g").attr("opacity", 0.15).selectAll("line")
.data(y.ticks(5)).join("line")
.attr("x1", 0).attr("x2", iw)
.attr("y1", d => y(d)).attr("y2", d => y(d))
.attr("stroke", "#3e3e3e").attr("stroke-width", 0.5);
// 2001: WTO accession reference
g.append("line")
.attr("x1", x(2001)).attr("x2", x(2001))
.attr("y1", 0).attr("y2", ih)
.attr("stroke", "#800000").attr("stroke-width", 1.2)
.attr("stroke-dasharray", "4,3").attr("opacity", 0.8);
texLabel(g, x(2001) + 4, 10, "WTO accession (Dec 2001)",
{fontSize: 10, anchor: "start", color: "#800000", bold: true});
// 2008 GFC marker
g.append("line")
.attr("x1", x(2008)).attr("x2", x(2008))
.attr("y1", 0).attr("y2", ih)
.attr("stroke", "#666").attr("stroke-width", 0.9)
.attr("stroke-dasharray", "3,3").attr("opacity", 0.6);
texLabel(g, x(2008) + 4, 26, "GFC", {fontSize: 9, anchor: "start", color: "#666"});
// Series line
const line = d3.line().x(d => x(d.year)).y(d => y(d.value)).curve(d3.curveMonotoneX);
g.append("path").datum(chinaImports).attr("d", line)
.attr("fill", "none").attr("stroke", "#005ab5").attr("stroke-width", 2.2);
// Annotated endpoints
g.append("circle").attr("cx", x(2000)).attr("cy", y(100.1)).attr("r", 3.5)
.attr("fill", "#005ab5");
texLabel(g, x(2000) - 4, y(100.1) - 12, "$100B in 2000",
{fontSize: 10, anchor: "end"});
g.append("circle").attr("cx", x(2007)).attr("cy", y(321.4)).attr("r", 3.5)
.attr("fill", "#005ab5");
texLabel(g, x(2007) + 6, y(321.4) - 6, "$321B in 2007",
{fontSize: 10, anchor: "start"});
texLabel(g, iw, ih + 34, "Source: FRED IMPCH",
{fontSize: 9, color: "#555", anchor: "end"});
return svg.node();
}