2e:null 2f:["$","title",null,{"children":"Germany Net Cement Imports and Exports 2019 | binarybias_ | Observable"}] 34:T6a7,# Germany Net Cement Imports and Exports 2019 Thank you [@luciyer](https://luciyer.me/) for the great [template](https://observablehq.com/@luciyer/give-or-take)! Which countries import cement from Germany and which export to Germany? Please keep in mind, that cement produced and used directly in Germany is not included in the analysis. Data are from https://oec.world/en/profile/hs92/cement, more specificall [import data](https://oec.world/olap-proxy/data?cube=trade_i_baci_a_92&HS4=52523&Year=2019&Importer+Country=eudeu&drilldowns=Exporter+Country&measures=Trade+Value&parents=true&sparse=false&properties=Exporter+Country+ISO+3&locale=en) and [export data](https://oec.world/olap-proxy/data?cube=trade_i_baci_a_92&HS4=52523&Year=2019&Exporter+Country=eudeu&drilldowns=Importer+Country&measures=Trade+Value&parents=true&sparse=false&properties=Importer+Country+ISO+3&locale=en), year 2019 only. Day 2 of [#30DayMapChallenge](https://github.com/tjukanovt/30DayMapChallenge) - Lines ## Arc View of Trade Relationships In the map (Lagrange projection) below you can choose if you want to see all countries, or only net importers / exporters. ### Made in Germany - Net Importers The top three countries which import cement (import > export) from Germany are neighbours: Netherlands, Austria and France. ### Cement Net Exporters to Germany Again, neighbours are the top three countries exporting (export > import) cement to Germany: France, Poland, Netherlands. I am a bit suprised about values e.g. from Burkina Faso which exported cement with the value of USD 9 or Namibia USD 193 to Germany. https://oec.world/en/profile/hs92/cement is a good source to explore more cement trade data.35:T1198,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([-10,-10]) .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 germany = centroids.filter(d => d.properties.NAME === "Germany")[0]; centroids.forEach((point) => { var source = projection.invert([germany.c[0], germany.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([3, 40]); 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} (import 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 ? '#fd5901' : '#008083'; else if (data.map[iso_code] && relation === "Net Exporters") return data.map[iso_code].trade_balance < 0 ? '#fd5901' : 'none'; else if (data.map[iso_code] && relation === "Net Importers") return data.map[iso_code].trade_balance < 0 ? 'none' : '#008083'; 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(); }36: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 ? '#fd5901' : '#008083'; 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(); }37: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 ? '#fd5901' : '#008083') .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(); }38:T5c5,trade_data = { var raw_exp = d3.csvParse(await FileAttachment("cem_deu_exp_2019.csv").text()), raw_imp = d3.csvParse(await FileAttachment("cem_deu_imp_2019.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); } else {d.trade_balance = +(d.export_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 } }39:[{"id":"9cfa27b7ab807bf76677e5eb82d6e13511f3152624ff4c70489d6ddc9a5847f26c17c6c09d453dc6a084ba003a3b97684950e836e3b27c81a52cb5462a764805","href":"https://static.observableusercontent.com/files/9cfa27b7ab807bf76677e5eb82d6e13511f3152624ff4c70489d6ddc9a5847f26c17c6c09d453dc6a084ba003a3b97684950e836e3b27c81a52cb5462a764805","name":"ne_50m_admin_0_countries.json","type":"application/json","lastModified":1635556007682.841,"size":4130378},{"id":"33613dbd3097d232add71476842651fbbf329fe421324809c386b76874d59f29adc3c0bd8e39e1b8f932f2280108fbf0dde95fcb32d535b316a3929624be2847","href":"https://static.observableusercontent.com/files/33613dbd3097d232add71476842651fbbf329fe421324809c386b76874d59f29adc3c0bd8e39e1b8f932f2280108fbf0dde95fcb32d535b316a3929624be2847","name":"cem_deu_exp_2019.csv","type":"text/csv","lastModified":1635557019471.58,"size":4280},{"id":"8b88fa258e867b6cd195898cb012adbb25defa1b590c777ddcc00bf6c13ae29ef3c85fb2dbe20770a3a34be694c22df02fd1bbcfca04a046371b7b3c37a7a4e5","href":"https://static.observableusercontent.com/files/8b88fa258e867b6cd195898cb012adbb25defa1b590c777ddcc00bf6c13ae29ef3c85fb2dbe20770a3a34be694c22df02fd1bbcfca04a046371b7b3c37a7a4e5","name":"cem_deu_imp_2019.csv","type":"text/csv","lastModified":1635557019530.463,"size":2524}] 32:{"id":"b62fe1125b67679f","slug":"germany-net-cement-imports-and-exports-2019","title":"Germany Net Cement Imports and Exports 2019","thumbnail":"df967a6f7c186dab3ce4a4d70c78be07c2b79e0009359537869541edebf991be","access_level":"public","create_time":"$D2021-10-30T01:06:47.682Z","update_time":"$D2021-11-03T02:07:02.760Z","view_time":null,"first_public_time":"$D2021-11-02T11:07:18.253Z","fork":{"id":"5bad9795cedc657c","slug":"give-or-take","title":"Give or Take","owner":{"id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer"}},"stars":5,"starred":false,"owner":{"type":"team","id":"5868b2b4a081475d","login":"binarybias","name":"binarybias_","avatar_url":"https://avatars-next.observableusercontent.com/635aa2b17ccce91aa5e9e74d89d58279da3bcfe074ce2cc4c6a8333bad5c993c","tier":"starter_2024"},"version":994,"publish_version":994,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b9fdc8debb28a1d","login":"binarybias","name":"binarybias_","avatar_url":"https://avatars-next.observableusercontent.com/635aa2b17ccce91aa5e9e74d89d58279da3bcfe074ce2cc4c6a8333bad5c993c","tier":null}],"members":[{"type":"individual","id":"3b9fdc8debb28a1d","login":"binarybias","name":"binarybias_","avatar_url":"https://avatars-next.observableusercontent.com/635aa2b17ccce91aa5e9e74d89d58279da3bcfe074ce2cc4c6a8333bad5c993c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"3e87d996b12c3a83","slug":"30daymapchallenge","title":"#30DayMapChallenge","owner":{"id":"5868b2b4a081475d","login":"binarybias","name":"binarybias_"}},"type":"notebook","body":{"title":"Germany Net Cement Imports and Exports 2019","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"**You may recognize that the arc to the USA don't actually end in the USA. This is caused by me using centroids and the USA having Alaska. Will fix this (maybe) in the future :)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"lagrange(trade_data, \"trade_balance\", {\n height: width,\n margin: 20,\n radius: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"## Germany Imports and Exports\n\nColored by trade balance, with parity line.\n\nTotal Exports: **$${fDollar(summary.total_exports)}**, Total Imports: **$${fDollar(summary.total_imports)}**, Trade Balance: **$${fDollar(summary.trade_balance)}**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"basic_plot(trade_data.flow, {\n height: width / 1.5,\n margin: 50,\n radius: 6,\n opacity: 0.7\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"## Geographical View\nCircles Sized by Net Trade Balance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"## Functions, Data and Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"world_geo = FileAttachment(\"ne_50m_admin_0_countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"