45:["$","title",null,{"children":"Dynamic Flows On a Map 2020 | Raphael Charriez | Observable"}] 4d:Te8b,chart = { const path = d3.geoPath(projection); const document = d3.create("div") .style('position', 'relative'); const canvas = document.append("canvas") .attr('width', width) .attr('height', height) .style('position', 'absolute') .attr('top', '0px') .attr('top', '0px') .style('z-index', '1'); const svg = document.append("svg") .attr('width', width) .attr('height', height); const context = canvas.node().getContext("2d") /* Design Element 1 : Create the background Sphere */ const background = svg.append('g').attr("id", "background") background.append("path") .attr("id", "ocean") .attr("d", path(sphere)) .attr("fill", oceanColor) .attr("stroke", "#000") /*Design Element 2 : Render Countries On an SVG (vs a canvas in order to make it easier to add country interactions) */ function renderCountries(countriesShape) { svg.select('#countries').remove() const g = svg.append('g').attr("id", "countries") g.selectAll("path").data(countriesShape.features) .enter() .append("path") .attr("d", path) // Style .attr("id", function(d) {return "country_" + d.id}) .style("fill", function(d) { return countryColorPicker(d.id, countriesBalanceIndexed, countriesFillColorScale, maxValueCountry)}) .attr("stroke", "#000") } /* Design Element 3: Render Paths On an SVG. Why SVG and not Canvas here ? We are going to use SVG: getTotalLength, SVG: getPointAtLength api to generate the locations of the particles dynamically .*/ function renderPaths(countriesTradeMovements) { svg.select('#routes').remove() const g = svg.append('g').attr("id", "routes") g.selectAll("path").data(flowsGeoJson) .enter() .append("path") .attr("d", path) // Style .attr("stroke", function(d) { return particlesColorScale[Math.floor(d.value / maxValueParticle * ( particlesColorScale.length - 1))] }) .attr("fill", 'none') .attr("stroke-opacity", function(d) { return 0.4 * d.value / maxValueParticle +0.6}) .attr("stroke-width", function(d) { return 10 * d.value / maxValueParticle + 0.3 }) .attr("value", function(d) { return d.value }) .attr("class", "route") // /Style } /* Design Element 4: Add Particles on a Canvas, using SVG: getTotalLength, SVG: getPointAtLength, and a simple timer*/ const t = d3.timer(tick, 1000); var particles = [] var freqCounter = 0 function tick(elapsed) { /* remove particle that have finish their paths */ particles = particles.filter(function (d) {return d.current < d.path.getTotalLength()}); /* remove hidden paths (some projections hide them_ */ particles = particles.filter(function (d) {return d.path.getTotalLength() > 0}); if (freqCounter > 10000) { freqCounter = 1; } if (freqCounter % 100 == 0) { d3.selectAll("path.route") .each( function (d) { var offset = (Math.random() - .5) * 10; particles.push({link: d, time: elapsed, offset: offset, path: this, speed: 1}) } ); } drawParticlesOnCanvas(elapsed, context, particlesColorScale, particles); freqCounter++; } /* return all */ return document.call(drag(projection) .on("drag.render", () => { renderCountries(countriesShape); renderPaths(countriesTradeMovements); context.clearRect(0, 0, 2*width, 2*height)} ) .on("end.render", () => context.clearRect(0, 0, 2*width, 2*height)) ) .call(() => { renderCountries(countriesShape); renderPaths(countriesTradeMovements)}) .node(); }4e:[{"id":"0270e363654bfa977c8d1728b5b5f063219de8bb1a5b8f42387e3bf3165ef88ef8077d6c674b138ff416d74373cd3cdd8f7ae54716a130a4c701166674a1bc0a","href":"https://static.observableusercontent.com/files/0270e363654bfa977c8d1728b5b5f063219de8bb1a5b8f42387e3bf3165ef88ef8077d6c674b138ff416d74373cd3cdd8f7ae54716a130a4c701166674a1bc0a","name":"countries_shape_geojson.json","type":"application/json","lastModified":1583763409611.356,"size":254389},{"id":"5033453d38b58397675d16a6f9f9620c7c4dc1c6e45003c9cc88318e8eb4cb1d92a9ec616e5f8e03c0e7d508fd683652e693e83d2a1b54789a0aad9afd62c745","href":"https://static.observableusercontent.com/files/5033453d38b58397675d16a6f9f9620c7c4dc1c6e45003c9cc88318e8eb4cb1d92a9ec616e5f8e03c0e7d508fd683652e693e83d2a1b54789a0aad9afd62c745","name":"countries_balance@5.json","type":"application/json","lastModified":1583763409611.356,"size":8369},{"id":"e4ea8b9cf5198ccecc5e09c3108398921327b1fc61bdb614f2d076f8a8e9a9d0c6118ededa440944716c7c61be9454bd7a22f2d1af11529f5cc4cd658ae1944d","href":"https://static.observableusercontent.com/files/e4ea8b9cf5198ccecc5e09c3108398921327b1fc61bdb614f2d076f8a8e9a9d0c6118ededa440944716c7c61be9454bd7a22f2d1af11529f5cc4cd658ae1944d","name":"trade_flux.json","type":"application/json","lastModified":1583763409611.356,"size":166837}] 49:{"id":"239fcca57a4c6c08","slug":"dynamic-flows-on-a-map","title":"Dynamic Flows On a Map 2020","thumbnail":"dbb60a5113bad53e91512e96d5e1fbde81a49c3bbb6cef3ec7fbc6439f40f96d","access_level":"public","create_time":"$D2020-03-09T14:16:49.611Z","update_time":"$D2022-01-04T13:31:47.100Z","view_time":null,"first_public_time":"$D2020-03-09T14:17:13.605Z","has_unpublished_edits":null,"fork":true,"stars":25,"starred":false,"owner":{"type":"team","id":"cdff20d7c9d4b9fc","login":"raphaelcharriez","name":"Raphael Charriez","avatar_url":"https://avatars-next.observableusercontent.com/596a18931b25ef1c8954a143f55d83839ea295055211880959f2d75fddd2e864","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":582,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d94c972250a551e","login":"raphaelcharriez","name":"Raphael Charriez","avatar_url":"https://avatars-next.observableusercontent.com/596a18931b25ef1c8954a143f55d83839ea295055211880959f2d75fddd2e864","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1d94c972250a551e","login":"raphaelcharriez","name":"Raphael Charriez","avatar_url":"https://avatars-next.observableusercontent.com/596a18931b25ef1c8954a143f55d83839ea295055211880959f2d75fddd2e864","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dynamic Flows On a Map 2020","cells":[{"id":0,"value":"md`# Dynamic Flows On a Map 2020`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"/* Displaying 2018 trade flows of Live Animals (product code 01) from comtrade database */ ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"viewof projectionName = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"/* Particles Movements Util */ \nfunction drawParticlesOnCanvas(elapsed, cx, particlesColorScale, particles) {\n cx.clearRect(0, 0, 2*width, 2*height);\n var x;\n \n for (x=0; x {\n obj[cb.reporter_iso] = {import: cb.import_value, export: cb.export_value, balance: cb.export_value- cb.import_value}\n return obj},\n {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"/*\nFlows : {country from, country to, value} \n*/\ncountriesTradeMovements = FileAttachment(\"trade_flux.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"flowsGeoJson = generateLinksGeoJson(showTopNumberOfPaths, countriesTradeMovements)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`---\n### Vizualisation Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"showTopNumberOfPaths = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"particlesColorScale = [\"#E4CBB2\", \"#D5BAA0\", \"#C7AA8E\", \"#B89A7D\", \"#AA8A6C\", \"#9C7B5C\", \"#8D6C4C\", \"#7F5D3C\", \"#714F2D\", \"#63411E\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"// Centered on 0, blue if negative, red if positive.\ncountriesFillColorScale = [\"#1F4B99\", \"#2C629D\", \"#3A77A3\", \"#4B8DAA\", \"#60A2B3\", \"#78B6BE\", \"#95CACB\", \"#B5DCDA\", \"#D8EEEC\", \"#FFFFFF\", \"#FDE7D7\", \"#F8CFB2\", \"#F0B790\", \"#E5A071\", \"#D98955\", \"#CC723D\", \"#BD5C29\", \"#AE4418\", \"#9E2B0E\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"oceanColor = \"#394B59\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"defaultCountryColor = \"#EBF1F5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`---\n### Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"projection = d3[projectionName]().precision(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function drag(projection) {\n let v0, q0, r0;\n \n function dragstarted() {\n v0 = versor.cartesian(projection.invert([d3.event.x, d3.event.y]));\n q0 = versor(r0 = projection.rotate());\n }\n \n function dragged() {\n const v1 = versor.cartesian(projection.rotate(r0).invert([d3.event.x, d3.event.y]));\n const q1 = versor.multiply(q0, versor.delta(v0, v1));\n projection.rotate(versor.rotation(q1));\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"versor = require(\"versor@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"maxValueCountry = Math.max(...countriesBalance.map(\n c => Math.abs(c.export_value - c.import_value))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"// Modify if tageted color scale is unidirecitonal (values always >0) instead of bidirecitonal\ncountryColorPicker = (country, countriesBalanceIndexed, countriesFillColorScale, maxValue, negativeValues=true) => {\n const ls = countriesFillColorScale.length\n const zero = (ls-1)/2\n const balance = country in countriesBalanceIndexed ?countriesBalanceIndexed[country].balance : 0 \n return countriesFillColorScale[Math.floor( balance / maxValue * ls/2 + zero )]\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"function generateLinksGeoJson(showTopNumberOfPaths, countriesTradeMovements) {\n const data = countriesTradeMovements.sort((a, b) => (a.trade_value < b.trade_value) ? 1 : -1)\n const links = [];\n for (let i = 0; i < showTopNumberOfPaths; i++) {\n if (data[i] && data[i].partner_longitude && data[i].reporter_longitude) {\n links.push({\n type: \"LineString\",\n coordinates: [\n [data[i].reporter_latitude, data[i].reporter_longitude],\n [data[i].partner_latitude , data[i].partner_longitude],\n ],\n value: parseInt(data[i].trade_value),\n });\n }\n }\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"maxValueParticle = Math.max(... flowsGeoJson.map(r => r.value) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null