30:T1197,lagrange = function(data, key, style) { const dimension = { width: width, height: style.height, margin: style.margin } const maxW = dimension.width - dimension.margin * 2; const maxH = dimension.height - dimension.margin * 2; let projection = d3.geoLagrange() .rotate([54,27]) .fitExtent([[20,20], [width-30, style.height-30]], {type: "Sphere"}) let p = d3.geoPath() .projection(projection); let centroids = [], arcs = []; function makeLineFeature (s, t, p) { return { "type": "Feature", "properties" : p, "geometry": { "type": "LineString", "coordinates": [s, t], } }; } centroids = world_geo.features.map(function (feature) { return { c: d3.geoPath(projection).centroid(feature), properties: feature.properties }; }); const argentina = centroids.filter(d => d.properties.NAME === "Argentina")[0]; centroids.forEach((point) => { var source = projection.invert([argentina.c[0], argentina.c[1]]), target = projection.invert([point.c[0], point.c[1]]); if (data.map[point.properties.GU_A3]) point.properties.trade_balance = data.map[point.properties.GU_A3].trade_balance; arcs.push(makeLineFeature(source, target, point.properties)); }); let thickScale = d3.scaleLinear() .domain([0, d3.max(centroids, d => Math.abs(d.properties.trade_balance))]) .range([1, 15]); const svg = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]); svg .append("path") .datum({ type: "Sphere" }) .attr("stroke", "#DDD") .attr("fill", "#FFF") .attr("d", p) const map = svg.append("g") .attr("class", "world-map"); const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "1rem") .style("background", "rgba(255,255,255,0.8)") .style("padding", "0.1rem 0.5rem") .style("color", "#000") .style("border-radius", "3px"); var original_thickness = null; let mouseover = function (d) { var element = d3.select(this), original_thickness = element.attr("stroke-width"); d3.selectAll(".arcs path") .style("stroke-opacity", 0.1); if (original_thickness < 5) element.style("stroke-width", 5) element .style("stroke-opacity", 1); tooltip .style("visibility", "visible") .text(`${d.properties.NAME} (USD ${fDollar(d.properties.trade_balance)})`); }; let mousemove = () => tooltip .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+20)+"px"); let mouseout = function (d) { d3.select(this) .style("stroke-width", original_thickness); d3.selectAll(".arcs path") .style("stroke-opacity", 0.4) tooltip.style("visibility", "hidden"); }; map .selectAll("path") .data(world_geo.features) .enter() .append("path") .attr("fill", "#DDD") .attr("stroke", "#FFF") .attr("d", d3.geoPath(projection)) .attr("clip-path", "url(#clip)"); map .append("g") .attr("class", "arcs") .selectAll("path") .data(arcs) .enter() .append("path") .attr("class","arc") .attr("d", function(d, i) { var iso_code = centroids[i].properties.GU_A3; if (data.map[iso_code]) return p(d); }) .style("fill", "none") .style("stroke-opacity", 0.4) .attr("stroke", function(_, i) { var iso_code = centroids[i].properties.GU_A3; if (data.map[iso_code] && relation === "All") return data.map[iso_code].trade_balance < 0 ? '#F26419' : '#145C9E'; else if (data.map[iso_code] && relation === "Net Exporters") return data.map[iso_code].trade_balance < 0 ? '#F26419' : 'none'; else if (data.map[iso_code] && relation === "Net Importers") return data.map[iso_code].trade_balance < 0 ? 'none' : '#145C9E'; else return "none"; }) .attr("stroke-width", function(_, i) { var iso_code = centroids[i].properties.GU_A3; if (data.map[iso_code]) return thickScale(Math.abs(data.map[iso_code].trade_balance)); else return 0; }) .style("stroke-linecap", "round") .on("mouseenter", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseout); return svg.node(); }31:T11c8,arc_map = function(data, key, style) { const dimension = { width: width, height: style.height, margin: style.margin } const maxW = dimension.width - dimension.margin * 2; const maxH = dimension.height - dimension.margin * 2; let projection = d3.geoOrthographic() .rotate([rotateX,rotateY]) .fitSize([maxW, maxH], world_geo); let p = d3.geoPath() .projection(projection); let centroids = [], arcs = []; function makeLineFeature (s, t, p) { return { "type": "Feature", "properties" : p, "geometry": { "type": "LineString", "coordinates": [s, t], } }; } centroids = world_geo.features.map(function (feature) { return { c: d3.geoPath(projection).centroid(feature), properties: feature.properties }; }); const argentina = centroids.filter(d => d.properties.NAME === "Argentina")[0]; centroids.forEach((point) => { var source = projection.invert([argentina.c[0], argentina.c[1]]), target = projection.invert([point.c[0], point.c[1]]); if (data.map[point.properties.GU_A3]) point.properties.trade_balance = data.map[point.properties.GU_A3].trade_balance; arcs.push(makeLineFeature(source, target, point.properties)); }); let thickScale = d3.scaleLinear() .domain([0, d3.max(centroids, d => Math.abs(d.properties.trade_balance))]) .range([1, 15]); const svg = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]); const map = svg.append("g") .attr("class", "world-map") .attr("transform", `translate(${style.margin}, 0)`); const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "1rem") .style("background", "rgba(255,255,255,0.8)") .style("padding", "0.1rem 0.5rem") .style("color", "#000") .style("border-radius", "3px"); var original_thickness = null; let mouseover = function (d) { var element = d3.select(this), original_thickness = element.attr("stroke-width"); d3.selectAll(".arcs path") .style("stroke-opacity", 0.1); if (original_thickness < 5) element.style("stroke-width", 5) element .style("stroke-opacity", 1); tooltip .style("visibility", "visible") .text(`${d.properties.NAME} (USD ${fDollar(d.properties.trade_balance)})`); }; let mousemove = () => tooltip .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+20)+"px"); let mouseout = function (d) { console.log(original_thickness); d3.select(this) .style("stroke-width", original_thickness); d3.selectAll(".arcs path") .style("stroke-opacity", 0.4) tooltip.style("visibility", "hidden"); }; map .append("path") .datum({ type: "Sphere" }) .attr("stroke", "#DDD") .attr("fill", "#FFF") .attr("d", p) map .selectAll("path") .data(world_geo.features) .enter() .append("path") .attr("fill", "#DDD") .attr("stroke", "#FFF") .attr("d", d3.geoPath(projection)); map .append("g") .attr("class", "arcs") .selectAll("path") .data(arcs) .enter() .append("path") .attr("class","arc") .attr("d", function(d, i) { var iso_code = centroids[i].properties.GU_A3; if (data.map[iso_code]) return p(d); }) .style("fill", "none") .style("stroke-opacity", 0.4) .attr("stroke", function(_, i) { var iso_code = centroids[i].properties.GU_A3; if (data.map[iso_code] && relation === "All") return data.map[iso_code].trade_balance < 0 ? '#F26419' : '#145C9E'; else if (data.map[iso_code] && relation === "Net Exporters") return data.map[iso_code].trade_balance < 0 ? '#F26419' : 'none'; else if (data.map[iso_code] && relation === "Net Importers") return data.map[iso_code].trade_balance < 0 ? 'none' : '#145C9E'; else return "none"; }) .attr("stroke-width", function(_, i) { var iso_code = centroids[i].properties.GU_A3; if (data.map[iso_code]) return thickScale(Math.abs(data.map[iso_code].trade_balance)); else return 0; }) .style("stroke-linecap", "round") .on("mouseenter", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseout); return svg.node(); }32:T755,world_map = function(data, key, style) { const dimension = { width: width, height: style.height, margin: style.margin } let projection = d3.geoEquirectangular() .fitSize([dimension.width - dimension.margin * 2, dimension.height - dimension.margin * 2], world_geo) const svg = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]) const map = svg.append("g") .attr("class", "world-map") .attr("transform", `translate(${dimension.margin}, ${dimension.margin})`); let centroids = world_geo.features.map(function (feature) { if (data.map[feature.properties.GU_A3]) feature.properties.trade_balance = data.map[feature.properties.GU_A3].trade_balance; return { c: d3.geoPath(projection).centroid(feature), properties: feature.properties }; }); let rScale = d3.scaleSqrt() .domain([0, d3.max(centroids, d => Math.abs(d.properties.trade_balance))]) .range([2, 20]); map .selectAll("path") .data(world_geo.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", "#DDD") .attr("d", d3.geoPath(projection)); map .selectAll(".centroid") .data(centroids) .enter() .append("circle") .attr("class", "centroid") .attr("fill", function(d) { var iso_code = d.properties.GU_A3; if (data.map[iso_code]) return data.map[iso_code].trade_balance < 0 ? '#F26419' : '#145C9E'; else return "none"; }) .attr("opacity", 0.75) .attr("r", function(_, i) { var iso_code = centroids[i].properties.GU_A3; if (data.map[iso_code]) return rScale(Math.abs(data.map[iso_code].trade_balance)); else return 0; }) .attr("cx", d => d.c[0]) .attr("cy", d => d.c[1]); return svg.node(); }33:T62d,function basic_plot (data, style) { const dimension = { width: width, height: style.height, margin: style.margin } let xScale = d3.scaleLog() .domain([1, d3.max(data, d => +d.import_val)]).nice() .range([dimension.margin, dimension.width - dimension.margin]) let yScale = d3.scaleLog() .domain([1, d3.max(data, d => +d.export_val)]).nice() .range([dimension.height - dimension.margin, dimension.margin]) let xAxis = d3.axisBottom() .scale(xScale) .tickFormat(fDollar); let yAxis = d3.axisLeft() .scale(yScale) .tickFormat(fDollar); const svg_plot = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]) svg_plot .append('g') .attr('transform', `translate(0, ${dimension.height - dimension.margin})`) .call(xAxis); svg_plot .append('g') .attr('transform', `translate(${dimension.margin}, 0)`) .call(yAxis); svg_plot .append("g") .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => d.import_val ? xScale(+d.import_val) : xScale(1)) .attr("cy", d => d.export_val ? yScale(+d.export_val) : yScale(1)) .attr("r", style.radius) .attr("fill", d => d.trade_balance < 0 ? '#F26419' : '#145C9E') .attr("fill-opacity", style.opacity); svg_plot .append("line") .attr("x1", xScale(1)) .attr("y1", yScale(1)) .attr("x2", xScale(10e9)) .attr("y2", yScale(10e9)) .attr("stroke", "black") .attr("stroke-width", 1) return svg_plot.node(); }34:T591,trade_data = { var raw_exp = d3.csvParse(await FileAttachment("arg_exp_2017.csv").text()), raw_imp = d3.csvParse(await FileAttachment("arg_imp_2017.csv").text()), imp_map = new Map(), flow_map = new Map(); var export_partners = raw_exp.map(d => d.country_destination_id), import_partners = raw_imp.map(d => d.country_destination_id), export_only = export_partners.filter(d => !import_partners.includes(d)), import_only = import_partners.filter(d => !export_partners.includes(d)); raw_imp.forEach(d => imp_map[d.country_destination_id] = { import_val: d.import_val, import_val_pct: d.import_val_pct }); var trade = raw_exp.map(function(d) { if (imp_map[d.country_destination_id]) { d.import_val = +imp_map[d.country_destination_id].import_val; d.import_val_pct = imp_map[d.country_destination_id].import_val_pct; d.trade_balance = +(d.export_val - d.import_val); } flow_map[d.country_destination_id] = d; return d; }); import_only.forEach(function(d) { var imp = raw_imp.filter(dd => dd.country_destination_id === d)[0]; imp.trade_balance = -1 * imp.import_val; flow_map[d] = imp; trade.push(imp); }); return { flow: trade, map: flow_map, export_partners: export_partners, import_partners: import_partners, export_only: export_only, import_only: import_only } }35:[{"id":"b3eeae6b9e996ad48f096c68f9d04431c3313e9277a3340e10561ab345601902b464f6b22d22a453575b5563e880d96636c5be59127e12f92156a1bbd4672821","href":"https://static.observableusercontent.com/files/b3eeae6b9e996ad48f096c68f9d04431c3313e9277a3340e10561ab345601902b464f6b22d22a453575b5563e880d96636c5be59127e12f92156a1bbd4672821","name":"arg_exp_2017.csv","type":"text/csv","lastModified":1583450410215.672,"size":6409},{"id":"2d5c1e5f7d1cfd88435ad5a4ec94c9e5e22a9b81cb04d8a29d527ed90f928c3a4d931ca311f87efbad25ac90b50502caacd1a039c6c8484fd0559a7901a493a3","href":"https://static.observableusercontent.com/files/2d5c1e5f7d1cfd88435ad5a4ec94c9e5e22a9b81cb04d8a29d527ed90f928c3a4d931ca311f87efbad25ac90b50502caacd1a039c6c8484fd0559a7901a493a3","name":"arg_imp_2017.csv","type":"text/csv","lastModified":1583450410227.661,"size":5964},{"id":"9cfa27b7ab807bf76677e5eb82d6e13511f3152624ff4c70489d6ddc9a5847f26c17c6c09d453dc6a084ba003a3b97684950e836e3b27c81a52cb5462a764805","href":"https://static.observableusercontent.com/files/9cfa27b7ab807bf76677e5eb82d6e13511f3152624ff4c70489d6ddc9a5847f26c17c6c09d453dc6a084ba003a3b97684950e836e3b27c81a52cb5462a764805","name":"ne_50m_admin_0_countries.json","type":"application/json","lastModified":1583607813493.79,"size":4130378}] 2e:{"title":"Give or Take","cells":[{"id":0,"value":"md`# Give or Take`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"md`Data from https://oec.world/en/profile/country/arg/ for 2017.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`**Arc View of Trade Relationships**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"viewof rotateX = slider({\n min: -180, \n max: 180, \n step: 1, \n value: 20, \n title: \"Rotate Horizontally\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof rotateY = slider({\n min: -180, \n max: 180, \n step: 1, \n value: -20, \n title: \"Rotate Vertically\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"viewof relation = select({\n title: \"Show\",\n options: [\"All\", \"Net Importers\", \"Net Exporters\"],\n value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"arc_map(trade_data, \"trade_balance\", {\n height: width,\n margin: 20,\n radius: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`Same view, Lagrange projection centered on Argentina.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"lagrange(trade_data, \"trade_balance\", {\n height: width,\n margin: 20,\n radius: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`_Note:_ Lagrange projection results in clipping/splitting of some countries, which means that the centroid function returns a centroid that often does not fall within that country's territory. Australia is one fine example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`** Argentine Imports and Exports, colored by trade balance, with parity line.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`Total Exports: **$${fDollar(summary.total_exports)}**, Total Imports: **$${fDollar(summary.total_imports)}**, Trade Balance: **$${fDollar(summary.trade_balance)}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"basic_plot(trade_data.flow, {\n height: width / 1.5,\n margin: 50,\n radius: 5,\n opacity: 0.75\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`**Geographical View: Circles Sized by Net Trade Balance**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"world_map(trade_data, \"trade_balance\", {\n height: 500,\n margin: 20,\n radius: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function fDollar (x) {\n var formatted_str = null;\n if (x > 950e6 || x < -950e6)\n formatted_str = (Math.round(x / 1e6) / 1e3).toLocaleString('en-US') + 'B';\n else if (x > 950e3 || x < -950e3)\n formatted_str = (Math.round(x / 1e3) / 1e3).toLocaleString('en-US') + 'M';\n else \n formatted_str = Math.round(x).toLocaleString('en-US');\n return formatted_str;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"summary = {\n return {\n total_exports: d3.sum(trade_data.flow, d => d.export_val),\n total_imports: d3.sum(trade_data.flow, d => d.import_val),\n trade_balance: d3.sum(trade_data.flow, d => d.trade_balance)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"world_geo = FileAttachment(\"ne_50m_admin_0_countries.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@5', 'd3-scale@^3.0.1', 'd3-geo-projection@2', 'd3-geo-polygon@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}