2b:null 2c:["$","title",null,{"children":"Trabalho Final da Disciplina InfoVis 2020 | luiztheodoro | Observable"}] 31:T4240,chart={ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) svg .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#D5F2DA"); ///////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////// TÍTULO //////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////// svg .append("text") .attr("x", width/2) .attr("y", margin.top-230) .text("Visualização de Dados Temporais de Origem-Destino") .style("text-anchor", "middle") .attr("fill", "#8C3C1F") .attr("font-size", "25") .attr("font-weight", "bold"); svg .append("text") .attr("x", width/2) .attr("y", margin.top-230) .attr("dy", 25) .text("de Africanos Escravizados pelo Atlântico") .style("text-anchor", "middle") .attr("fill", "#8C3C1F") .attr("font-size", "25") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + (barChartD_width + yAxisD_width)/2) .attr("y", margin.top - 100) .text("Região de") .style("text-anchor", "middle") .attr("fill", "#A68965") .attr("font-size", "20") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + (barChartD_width + yAxisD_width)/2) .attr("y", margin.top -100) .attr("dy", 20) .text("Origem") .style("text-anchor", "middle") .attr("fill", "#8C3C1F") .attr("font-size", "20") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + barChartO_width + yAxisO_width + heatmap_width + (yAxisD_width + barChartD_width)/2) .attr("y", margin.top -100) .text("Região de") .style("text-anchor", "middle") .attr("fill", "#A68965") .attr("font-size", "20") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + barChartO_width + yAxisO_width + heatmap_width + (yAxisD_width + barChartD_width)/2) .attr("y", margin.top - 100) .attr("dy", 20) .text("Destino") .style("text-anchor", "middle") .attr("fill", "#8C3C1F") .attr("font-size", "20") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + barChartO_width + yAxisO_width + (heatmap_width)/2) .attr("y", margin.top - 160) .text("Tempo") .style("text-anchor", "middle") .attr("fill", "#8C3C1F") .attr("font-size", "20") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + barChartO_width) .attr("y", margin.top) .attr("dy", -20) .text("Total de Escravos") .style("text-anchor", "end") .attr("fill", "#8C3C1F") .attr("font-size", "12") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + barChartO_width) .attr("y", margin.top) .attr("dy", -10) .text("Embarcados") .style("text-anchor", "end") .attr("fill", "#8C3C1F") .attr("font-size", "12") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + barChartO_width + yAxisO_width + heatmap_width + yAxisD_width) .attr("y", margin.top) .attr("dy", -20) .text("Total de Escravos") .style("text-anchor", "start") .attr("fill", "#8C3C1F") .attr("font-size", "12") .attr("font-weight", "bold"); svg .append("text") .attr("x", margin.left + barChartO_width + yAxisO_width + heatmap_width + yAxisD_width) .attr("y", margin.top) .attr("dy", -10) .text("Desembarcados") .style("text-anchor", "start") .attr("fill", "#8C3C1F") .attr("font-size", "12") .attr("font-weight", "bold"); ///////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////// LEGEND //////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////// const legend = svg .append("g") .attr("width", legend_width) .attr("height", heatmap_height) .attr("transform", `translate(${margin.left},${0})`) ///////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////// HEATMAP LEGEND //////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////// const heatmapLegend = svg .append("g") .attr("class","heatmap_legend") .attr("width", legendHeatmap.width) .attr("height", legendHeatmap.height) // .attr("transform", `translate(${legend_margin + width-legend_width-margin.right},${margin.top + 100})`); .attr("transform", `translate(${width/2 - legendHeatmap.width/2},${margin.top - 140})`); heatmapLegend .append("image") .attr("x", legendHeatmap.marginLeft) .attr("y", legendHeatmap.marginTop) .attr("width", legendHeatmap.width - legendHeatmap.marginLeft - legendHeatmap.marginRight) .attr("height", legendHeatmap.height - legendHeatmap.marginTop - legendHeatmap.marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(colorScale.interpolator()).toDataURL()); heatmapLegend .append("g") .attr("transform", `translate(0,${legendHeatmap.height - legendHeatmap.marginBottom})`) .call(d3.axisBottom(xLegendHeatmap) .ticks(legendHeatmap.ticks, legendHeatmap.tickFormat) .tickSize(legendHeatmap.tickSize) .tickValues( [1000, 10000, 20000, 30000, 40000, 50000, 60000])) .call(tickAdjustLegendHeatmap) .call(g => g.select(".domain").remove()) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end") .attr("fill", "gray") heatmapLegend .append("text") .attr("x", legendHeatmap.width/2) .attr("y", -5) .attr("fill", "#8C3C1F") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", "10") .text("Número de Escravos Desembarcados:"); ///////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////// BAR ORIG ///////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////// const barChartO = svg .append("g") .attr("width", barChartO_width) .attr("height", heatmap_height) .attr("transform", `translate(${margin.left},${margin.top})`); // .call(xOrigAxis); barChartO .append("g") .selectAll("rect") .data(dataSumOrig) .join("rect") .attr("x", d => xOrig(d.value)) .attr("y", (d, i) => yOrig(i)) .attr("width", d => xOrig(0) - xOrig(d.value) ) .attr("height", yOrig.bandwidth()) // .attr("fill", d => origRegionsColors.get(d.source)) .attr("fill", barChartOColor) .attr("opacity", 0.7); barChartO .append("g") .attr("fill", "#401B06") .attr("text-anchor", "start") // .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(dataSumOrig) .join("text") .attr("x", d => xOrig(d.value)) .attr("y", (d, i) => yOrig(i) + yOrig.bandwidth()/2) .attr("dy", "0.35em") .attr("dx", -4) .text(d=>d3.format(".4s")(d.value)) .attr("text-anchor", "end") .call(text => text.filter(d => barChartO_width - (xOrig(0) - xOrig(d.value)) < 20) // short bars .attr("dx", 4) .attr("fill", "#401B06") .attr("text-anchor", "start")); // barChartO // .append("g") // .attr("class", "axis") // .call(xOrigAxis) // .selectAll("text") // .attr("transform", "rotate(-45)") // .style("text-anchor", "start"); ///////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////// BAR DEST ///////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////// var barChartD = []; for (var i = 0; i < origRegions.length; i++) { barChartD[i] = svg .append("g") .attr("width", barChartD_width) .attr("height", heatmap_height) .attr("transform", `translate(${margin.left + yAxisO_width + yAxisD_width + heatmap_width + barChartO_width }, ${margin.top + i * (destRegions.length * heatmap_rectheight)})`); barChartD[i] .append("g") .selectAll("rect") .data(filterDataSumDest(i)) .join("rect") .attr("x", xDest(0)) .attr("y", (d, i) => yDest(i)) .attr("width", d => xDest(d.value)-xDest(0)) .attr("height", yDest.bandwidth()) // .attr("fill", d => destRegionsColors.get(d.target)) .attr("fill", barChartDColor) .attr("opacity", 0.7); barChartD[i] .append("g") .attr("fill", "#401B06") .attr("text-anchor", "end") // .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(filterDataSumDest(i)) .join("text") .attr("x", d => xDest(d.value)) .attr("y", (d, j) => yDest(j) + yDest.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", +4) .text(d=>d3.format(".2s")(d.value)) .attr("text-anchor", "start") .call(text => text.filter(d => barChartD_width - (xDest(d.value) - xDest(0)) < 50) // short bars .attr("dx", -4) .attr("fill", "#401B06") .attr("text-anchor", "end")); } ////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////// HEATMAP ////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////// const heatmap = svg .append("g") .attr("width", heatmap_width) .attr("height", heatmap_height) .attr("transform", `translate(${margin.left + barChartO_width + yAxisO_width},${margin.top})`) // .style("cursor", "pointer") .on("mouseover", onMouseOver) .on("mousemove", onMouseMove) .on("mouseout", onMouseOut); //.on("mousemove", hover); heatmap .append("rect") .attr("id", "heatmap") .attr("x", 0) .attr("y", 0) .attr("width", heatmap_width) .attr("height", heatmap_height) .attr("fill", "white") const rectangles = heatmap .selectAll(".rectangles") .data(data) .enter() .append("g") .attr("class", "rectangles"); rectangles .append("rect") .attr("x",d=>d.x*heatmap_rectwidth) .attr("y",d=>d.y*(heatmap_rectheight)) .attr("width", heatmap_rectwidth) .attr("height", heatmap_rectheight) .attr("fill", d=> d.value >= 1000 ? colorScale(d.value) : "white") // .attr("opacity", d => d.value >= 1000 ? 1 : 0.5) // .attr("stroke", "lightgray") // .attr("stroke-width", 0.1); heatmap .append("g") .attr("class","axis") .call(xAxis) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "start"); heatmap .append("g") .attr("class","axis") .call(y1Axis); heatmap .append("g") .attr("class","axis") .call(y2Axis); heatmap .append("rect") .attr("x",0) .attr("y",0) .attr("width", heatmap_width) .attr("height", heatmap_height) .attr("stroke", "gray") .attr("fill", "none") .attr("stroke-width", 1); const tooltip = heatmap .append("g") .attr("class", "tooltip") tooltip .append("text") .classed('tooltip1', true) .attr("x",0) .attr("y",10) .attr("font-size", 10) .attr("fill","#352E40") // .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("alignment-baseline", "start") .text(""); tooltip .append("text") .classed('tooltip2', true) .attr("x",0) .attr("y",20) .attr("font-size", 10) .attr("fill","#352E40") // .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("alignment-baseline", "start") .text(""); ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////// AXIS_O //////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////// const yAxisO = svg .append("g") .attr("class", "axis") .attr("width",margin.left) .attr("height", heatmap_height) .attr("transform", `translate(${margin.left + barChartD_width},${margin.top})`); const yAxisOText = yAxisO .selectAll(".yAxisOText") .data(y1tickArgumentAbrev) .enter() .append("g") yAxisOText .append("text") .attr("x", yAxisO_width/2) .attr("y", (d,i) => i*heatmap_rectheight) .attr("dy", heatmap_rectheight/1.5) .text(d => d) .attr("text-anchor", "middle") .attr("font-size", "10px") // .attr("font-family", "sans-serif") .attr("fill", "gray") .attr("class", (d,i) => "text-"+i); const yAxisLineTick = heatmap .selectAll(".yAxisOCirc") .data(y1tickArgument) .enter() .append("g") .attr("class", "axisLeg"); yAxisLineTick .append("path") .attr("d", (d,i) => `M 0 ${heatmap_rectheight*i} H ${heatmap_width}`) .attr("stroke-width", 1) .attr("stroke", (d,i) => i%6 == 0 ? "gray" : "lightgray"); //////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////// AXIS_D //////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// const yAxisD = svg .append("g") .attr("class", "axis") .attr("width",yAxisD_width) .attr("height", heatmap_height) .attr("transform", `translate(${margin.left + yAxisO_width + barChartO_width + heatmap_width},${margin.top})`); const yAxisDtext = yAxisD .selectAll(".yAxisD") .data(y2tickArgumentAbrev) .enter() .append("g") .attr("class", "axis"); yAxisDtext .append("text") .attr("x", yAxisD_width/2) .attr("y", (d,i) => i*heatmap_rectheight) .attr("dy", heatmap_rectheight/1.5) .text(d=> d) .attr("text-anchor", "middle") .attr("fill", "gray") .attr("font-size", "10px") // .attr("font-family", "sans-serif") // .append("foreignObject") // .attr("width", legend_width - 60) // .attr("height", 500) // .attr("x", 30) // .append("xhtml:body") // .style("font", "10px 'sans-serif'") // .style("text-anchor", "middle") // .html("

Geographic Localization

Region of Embarkation

"); //////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////// HIST FATE ////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////// const hist_fate = heatmap .selectAll(".hist_fate") .data(dataHistFate) .enter() .append("g") .attr("class", "hist_fate") .attr("transform", (d,i) => `translate(${x(d["year"])}, ${ i%2 == 0 ? -60 : -80 })`) // .call(xHistFate) // .style("cursor", "pointer") // .on("mousemove", hover_hf); hist_fate .append("circle") .attr("r", 8) .attr("fill", "white") .attr("opacity", 0.5) .attr("stroke", "lightgray"); hist_fate .append("text") .attr("font-size", 10) // .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .text((d,i) => i+1); hist_fate .append("line") .attr("y1", (d,i) => i%2 == 0 ? 60 + heatmap_height : 80 + heatmap_height) .attr("y2", 8) .attr("stroke", "lightgray") .style("stroke-dasharray","1,1"); // .attr("stroke-width", 1); return svg.node(); }32:T1b56,legenda = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", 900) .attr("height", 1302) svg .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#D5F2DA"); svg .append("text") .attr("x", width/2) .attr("y", 50) .text("Legenda") .style("text-anchor", "middle") .attr("fill", "#8C3C1F") .attr("font-size", "20") .attr("font-weight", "bold"); ///////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////// LEGEND //////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////// const legend = svg .append("g") .attr("width", legend_width) .attr("height", heatmap_height) .attr("transform", `translate(${margin.left},${80})`) /////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////// MAP LEGEND ///////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////// const map_legend = legend .append("g") .attr("class", "map_legend") .attr("width", legend_width-legend_margin) .attr("height", legend_width-legend_margin) // .attr("transform", `translate(${legend_margin + width-margin.right-legend_width},${margin.top + 200})`); .attr("transform", `translate(0,60)`); map_legend .append("rect") .attr("x",0) .attr("y",0) .attr("width", legend_width) .attr("height", legend_width) .attr("fill", "none") map_legend .selectAll('path') .data(africa.features) .enter() .append("path") .attr('d', path) .attr("fill", d => [...countriesColors.keys()].indexOf(d.properties.sov_a3) === -1 ? "#260B05" : countriesColors.get(d.properties.sov_a3)) .attr("stroke", "white") .attr("stroke-opacity", 0.3) .attr("opacity", d => [...countriesColors.keys()].indexOf(d.properties.sov_a3) === -1 ? 0.9 : 1); map_legend .append("text") .attr("x", 0) .attr("dy", -30) .attr("text-anchor", "start") .attr("font-size", "12") // .attr("font-family", "sans-serif") .attr("fill", "#8C3C1F") .attr("font-weight", "bold") .text("Mapa das Regiões Africanas:"); //// const map_legend_text = legend .append("g") .attr("width", legend_width-legend_margin) .attr("height", legend_width-legend_margin) .attr("transform", `translate(200,80)`); map_legend_text .selectAll("text") .data(africanRegions) .enter() .append("text") .attr("x",40) .attr("y", (d,i)=>i*20 + 10) .text(d=>d.region) .attr("text-anchor", "start") .attr("font-size", "12") .attr("fill", "gray") map_legend_text .selectAll("rect") .data(africanRegions) .enter() .append("rect") .attr("dx", legend_width) .attr("x",20) .attr("y", (d,i)=>i*20) .attr("width", 10) .attr("height", 10) .attr("fill", d => d.color); //////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////// ABBREVIATIONS ///////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////// legend .append("text") .attr("x", 0) .attr("y", 330) .text("Lista de Abreviações - Região de Origem") .attr("text-anchor", "start") .attr("font-size", "12") // .attr("font-family", "sans-serif") .attr("fill", "#8C3C1F") .attr("font-weight", "bold"); const abrevOrig_legend = legend .append("g") .attr("class", "abrev_legend") .attr("width", legend_width-legend_margin) .attr("height", 800) .attr("transform", `translate(0,360)`); abrevOrig_legend .selectAll("text") .data(abrevOrigList) .enter() .append("text") .attr("x", 0) .attr("y", (d,i) => i*20) .attr("dy", 20) .text( d => d[0] + " - " + d[1]) .attr("text-anchor", "start") .attr("font-size", "12") .attr("fill", "gray") legend .append("text") .attr("x", legend_width) .attr("y", 330) .text("Lista de Abreviações - Região de Destino") .attr("text-anchor", "start") .attr("font-size", "12") // .attr("font-family", "sans-serif") .attr("fill", "#8C3C1F") .attr("font-weight", "bold"); const abrevDest_legend = legend .append("g") .attr("class", "abrev_legend") .attr("width", legend_width-legend_margin) .attr("height", 800) .attr("transform", `translate(${legend_width},360)`); abrevDest_legend .selectAll("text") .data(abrevDestList) .enter() .append("text") .attr("x", 0) .attr("y", (d,i) => i*20) .attr("dy", 20) .text( (d,i) => d[0] + " - " + d[1]) .attr("text-anchor", "start") .attr("font-size", "12") .attr("fill", "gray") /////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////// HIST FATE LEGEND ////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////// legend .append("text") .attr("x", 0) .attr("y", 590) .text("Fatos Históricos:") .attr("text-anchor", "start") .attr("font-size", "12") // .attr("font-family", "sans-serif") .attr("fill", "#8C3C1F") .attr("font-weight", "bold"); const hist_fate_legend = legend .selectAll(".hist_fate_legend") .data(dataHistFate) .enter() .append("g") .attr("class", "hist_fate_legend") .attr("transform", (d,i) => `translate(0,${630+i*20})`) hist_fate_legend .append("circle") .attr("r", 10) .attr("fill", "white") .attr("opacity", 0.5) .attr("stroke", "lightgray"); hist_fate_legend .append("text") .attr("font-size", 12) // .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "gray") .text((d,i) => i+1); hist_fate_legend .append("text") .attr("dx", 10) .attr("font-size", 12) // .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .attr("fill", "gray") .text((d,i) => d.year + ": " + d.fate); return svg.node(); }33:[{"id":"ec23a68d06d2fc02355f60381c53e70db86ce4a46c059a5021e5508b10d5bb78fff43ef4676c0d315b8572a93cc26f16cd50ed79b641940234709294fb063f88","href":"https://static.observableusercontent.com/files/ec23a68d06d2fc02355f60381c53e70db86ce4a46c059a5021e5508b10d5bb78fff43ef4676c0d315b8572a93cc26f16cd50ed79b641940234709294fb063f88","name":"africa.json","type":"application/json","lastModified":1606522920081.475,"size":2280385},{"id":"8aeb0fac23d82323e2d9c0996d277be35c5048b919bd14bca170e9b53872552197a6f5067b753ac0cdc7b6468b6497888103c9746c0a1f3ec6c66918fe900e36","href":"https://static.observableusercontent.com/files/8aeb0fac23d82323e2d9c0996d277be35c5048b919bd14bca170e9b53872552197a6f5067b753ac0cdc7b6468b6497888103c9746c0a1f3ec6c66918fe900e36","name":"heatmap@25.csv","type":"text/csv","lastModified":1606783548706.135,"size":2050782},{"id":"bc2bd63d288649028adb46c0997cd8923a674141e74b3e1287930d9f2632b2fb698bf919335e8e8c1fcd3ae750c12f9861ec26cc2b44185edb77578a2f01637c","href":"https://static.observableusercontent.com/files/bc2bd63d288649028adb46c0997cd8923a674141e74b3e1287930d9f2632b2fb698bf919335e8e8c1fcd3ae750c12f9861ec26cc2b44185edb77578a2f01637c","name":"heatmap-SummaryDest@2.csv","type":"text/csv","lastModified":1606667645486.678,"size":4911},{"id":"2732347475a7b3dd0523354be70a89a1e495ef38be8085754c8883e88877163e0a3aef46249209da20aaedd667e79785372ea560c468f4dbec0cf3e3dba3b750","href":"https://static.observableusercontent.com/files/2732347475a7b3dd0523354be70a89a1e495ef38be8085754c8883e88877163e0a3aef46249209da20aaedd667e79785372ea560c468f4dbec0cf3e3dba3b750","name":"heatmap-SummaryOrig.csv","type":"text/csv","lastModified":1606599748772.366,"size":328},{"id":"8599c9da09d18dbfff800ffa3b34ddaa2afa7ee25a3e764203d9062a7e71d0c140e6cf2d1595b6ec6bad9de3f910fc17ba0fb8077f2b13013b2c5751ec869d0d","href":"https://static.observableusercontent.com/files/8599c9da09d18dbfff800ffa3b34ddaa2afa7ee25a3e764203d9062a7e71d0c140e6cf2d1595b6ec6bad9de3f910fc17ba0fb8077f2b13013b2c5751ec869d0d","name":"historical_fates.csv","type":"text/csv","lastModified":1606599753633.693,"size":657}] 2f:{"id":"5aa918beba64135f","slug":"heatmap","title":"Trabalho Final da Disciplina InfoVis 2020","thumbnail":"66584665319a01714a6b487909d67beb3ed0463c46c53943bebcc1e0274d273d","access_level":"public","create_time":"$D2020-11-26T15:07:43.059Z","update_time":"$D2020-12-02T21:57:53.148Z","view_time":null,"first_public_time":"$D2020-12-01T03:48:30.701Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"267a089e2110e8f7","login":"luiztheodoro","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed653b2fced6ee434b91de55c5bd18c1ca42d2b3d75d146905ce8a43086a0650","tier":"starter_2024"},"version":2474,"publish_version":2474,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c53aa6488c19ae3","login":"luiztheodoro","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed653b2fced6ee434b91de55c5bd18c1ca42d2b3d75d146905ce8a43086a0650","tier":null}],"members":[{"type":"individual","id":"9c53aa6488c19ae3","login":"luiztheodoro","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed653b2fced6ee434b91de55c5bd18c1ca42d2b3d75d146905ce8a43086a0650","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Trabalho Final da Disciplina InfoVis 2020","cells":[{"id":2337,"value":"md `# Trabalho Final da Disciplina InfoVis 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2399,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1591,"value":"md`## Sobre o banco de dados\n \n O Banco de Dados do Tráfico de Escravos Transatlântico é o resultado de várias décadas de pesquisas independentes e colaborativas, com base em dados encontrados em bibliotecas e arquivos de todo o mundo atlântico. O website Viagens é o produto de dois anos de trabalho de uma equipe multidisciplinar de historiadores, bibliotecários, especialistas em currículo, cartógrafos, programadores de computador e web designers, em consulta com estudiosos do tráfico de escravos de universidades da Europa, África, América do Sul e América do Norte. O National Endowment for the Humanities foi o principal patrocinador dessa Emory Center for Digital Scholarship initiative. O Hutchins Institute da Harvard University e o Wilberforce Institute for the Study of Slavery and Emancipation da University of Hull também patrocinaram o seu desenvolvimento.\n\n![site](https://i.imgur.com/pvbNO8x.png)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2457,"value":"md`## Tratamento dos dados\nTodos os dados utilizados nesta visualização foram tratados em dataframes Pandas em Python e exportados para o ambiente do Observable através de arquivos com extenção .csv, conforme estrutura abaixo.\n\nheatmap.csv: Arquivo formatado já no padrão adotado para gerar o heatmap.\n\nheatmap-SummaryOrig.csv: Arquivo formatado já no padrão adotado pelo gráfico de barras da origem dos escravos.\n\nheatmap-SummaryDest.csv: Arquivo formatado já no padrão adotado pelo gráfico de barras do destino dos escravos.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2460,"value":"md`## Inspiração\n \nA inspiração para esta visualização veio do artigo \"Flowstrates: An approach for visual exploration of temporal origin-destination data\" dos autores Boyandin, Bertini e Bak.\n\n![artigo](https://i.imgur.com/HSTuRVu.png)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2464,"value":"md `\n\nNeste artigo os autores propuseram uma abordagem de visualização na qual as origens e os destinos dos fluxos são exibidos em dois mapas separados, e as mudanças ao longo do tempo das magnitudes de fluxo são representadas em uma visualização de mapa de calor separada no meio. Isso permite que os usuários realizem consultas visuais espaciais, com foco em diferentes regiões de interesse para as origens e destinos, e para analisar as mudanças ao longo do tempo.\n\n![exemplo do artigo](https://i.imgur.com/COfZAHa.png)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2469,"value":"md`## Adaptações realizadas\n\nA visualização proposta aqui foi adaptada de forma a incluir informações adicionais sobre o totalização dos dados de origem e destino por região, no caso, de escravos embarcados e desembarcados por região.\n\nOs mapas de origem e destino foram retirados como forma de simplificação da visualização e simplificados na legenda.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2471,"value":"md `## Referências\n\nA paleta de cores usada na visualização foi pensada para usar as seguintes referências associadas ao tema dos dados que estão sendo visualizados.\n\nQuadro Navio Negreiro de Rugendas, 1930.\n\nApresentação no Ted Talks \"The Atlantic slave trade: What too few textbooks told you\" de Anthony Hazard.\n\n![rugendas](https://i.imgur.com/JUbXlDI.jpg)\n![ted](https://i.imgur.com/nkfz2rn.png)\n![paleta1](https://i.imgur.com/hTuAkkm.png)\n![paleta2](https://i.imgur.com/xhHozvT.png)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2200,"value":"function onMouseOut (event, d) {\n d3.select(\".tooltip\")\n .attr(\"visibility\", \"hidden\")\n return ;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2201,"value":"function onMouseMove (event, d) {\n const [posX, posY] = d3.pointer(event);\n const mouseDate = d3.format(\".0f\")(x.invert(posX));\n const mouseY = Math.floor(posY/heatmap_rectheight);\n const newPosY = mouseY * heatmap_rectheight + heatmap_rectheight;\n d3.select(\".tooltip\").attr(\"transform\", `translate(10,${newPosY})`)\n d3.select(\".tooltip1\")\n .text(\"Year: \" + mouseDate)\n d3.select(\".tooltip2\")\n .text(\"Slaves: \" + data.filter( d => {return d.year == mouseDate })[mouseY].value)\n return;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2203,"value":"function onMouseOver (event, d) {\n const [posX, posY] = d3.pointer(event);\n if (posY < 0 | posX < 0) return;\n d3.select(\".tooltip\")\n .attr(\"visibility\", \"visible\")\n return;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1623,"value":"xLegendHeatmap = d3.scaleLog()\n .domain([1000,60000])\n .range([legendHeatmap.marginLeft, legendHeatmap.width - legendHeatmap.marginRight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1525,"value":"tickAdjustLegendHeatmap = g => g.selectAll(\".tick line\").attr(\"y1\", legendHeatmap.marginTop + legendHeatmap.marginBottom - legendHeatmap.height);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1501,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"margin = ({top: 280, right: 50, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"y1Axis = g => g\n .attr(\"transform\", `translate(0,0)`)\n .call(d3.axisLeft(y1).tickFormat(\"\"))\n // .call(g => g.select(\".domain\").attr(\"stroke\", \"lightgray\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .attr(\"stroke\", \"lightgray\")\n //.attr(\"dy\", heatmap_rectheight/2)\n )\n .call(g => g.selectAll(\".tick text\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"dx\", 10)\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1409,"value":"y2Axis = g => g\n .attr(\"transform\", `translate(${heatmap_width},0)`)\n .call(d3.axisRight(y2).tickFormat(\"\"))\n // .call(g => g.select(\".domain\").attr(\"stroke\", \"lightgray\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .attr(\"stroke\", \"lightgray\")\n //.attr(\"dy\", heatmap_rectheight/2)\n )\n .call(g => g.selectAll(\".tick text\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"dx\", 10)\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,0)`)\n .call(d3.axisTop(x).ticks(10))\n // .call(g => g.select(\".domain\").attr(\"stroke\", \"lightgray\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .attr(\"stroke\", \"lightgray\")\n // .attr(\"dy\", heatmap_rectwidth/2)\n // .attr(\"height\",heatmap_height)\n )\n .call(g => g.selectAll(\".tick text\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"dx\", 10)\n .attr(\"fill\", \"gray\")\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"xScaleRange = {\n return [...(d3.group(data,d=>d.x)).keys()].map(d=>d*heatmap_rectwidth + heatmap_rectwidth/2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"xScaleDomain = {\n let m = [...(d3.group(data,d=>d.year)).keys()]\n return d3.extent(m)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"y1tickArgument = {\n return [...(d3.group(data,d=>d.sorter)).keys()].map( d => {\n d = d.split('@');\n return d[0]; \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1430,"value":"y1tickArgumentAbrev = {\n let t = [...(d3.group(data,d=>d.sorter)).keys()].map( d => {\n d = d.split('@');\n return d[0]; \n })\n let s = [...(d3.group(data,d=>d.source_label)).keys()]\n let r = [...(d3.group(data,d=>d.source)).keys()]\n let q = s.map((d,i) => [r[i],s[i]])\n let p = new Map(q)\n return t.map(d=>p.get(d))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1434,"value":"y2tickArgumentAbrev = {\n let t = [...(d3.group(data,d=>d.sorter)).keys()].map( d => {\n d = d.split('@');\n return d[1]; \n })\n let s = [...(d3.group(data,d=>d.target_label)).keys()]\n let r = [...(d3.group(data,d=>d.target)).keys()]\n let q = s.map((d,i) => [r[i],s[i]])\n let p = new Map(q)\n return t.map(d=>p.get(d))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"y2tickArgument = {\n return [...(d3.group(data,d=>d.sorter)).keys()].map( d => {\n d = d.split('@');\n return d[1]; \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"yScaleDomain = {\n return [...(d3.group(data,d=>d.sorter)).keys()]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"yScaleRange = {\n return [...(d3.group(data,d=>d.y)).keys()].map(d=>d*heatmap_rectheight + heatmap_rectheight/2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"x = {\n return d3.scaleLinear()\n .domain(xScaleDomain)\n .range([0,heatmap_width]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"y1 = {\n return d3.scaleOrdinal()\n .domain(yScaleDomain)\n .range(yScaleRange);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"y2 = {\n return d3.scaleOrdinal()\n .domain(yScaleDomain)\n .range(yScaleRange);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":986,"value":"xOrigAxis = g => g\n .attr(\"transform\", `translate(0,0)`)\n .call(d3.axisTop(xOrig).ticks(4))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .attr(\"stroke\", \"lightgray\")\n )\n .call(g => g.selectAll(\".tick text\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"dx\", 10)\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"yOrigAxis = g => g\n .attr(\"transform\", `translate(0,0)`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":912,"value":"xOrigScaleDomain = {\n return [...(d3.group(dataSumOrig,d=>d.source)).keys()]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":907,"value":"xOrig = d3.scaleLinear()\n .domain([0, d3.max(dataSumOrig, d => d.value)])\n .range([barChartO_width, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":961,"value":"yOrig = d3.scaleBand()\n .domain(d3.range(dataSumOrig.length))\n .rangeRound([0, heatmap_height])\n // .paddingInner(0.05) \n .round(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1141,"value":"xDest = d3.scaleLinear()\n .domain([0, d3.max(dataSumDest, d => d.value)])\n .range([0, barChartD_width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1143,"value":"yDest = d3.scaleBand()\n .domain(d3.range(destRegions.length))\n .rangeRound([0, heatmap_rectheight*destRegions.length])\n .paddingOuter(0.1) \n .round(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1923,"value":"xHistFate = g => g\n .attr(\"transform\", d => `translate(${margin.left + barChartD_width + yAxisO_width + x(d[\"year\"])}, ${margin.top-60})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":872,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"data = {\n const data = await FileAttachment(\"heatmap@25.csv\").csv({typed: true});\n const dataProcessed = data.map((d, i, arr) => {\n let { year, source, target, value, sorter, x, y, source_label, target_label } = d;\n return {\n year: year,\n source: source,\n target: target,\n value: +value,\n x: +x,\n y: +y,\n sorter: sorter,\n source_label: source_label,\n target_label: target_label\n };\n });\n return dataProcessed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1920,"value":"dataHistFate = {\n const data = await FileAttachment(\"historical_fates.csv\").csv({typed: true});\n \n const dataProcessed = data.map((d, i, arr) => {\n let { year, fate } = d;\n return {\n year: +year,\n fate: fate\n };\n });\n \n return dataProcessed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":902,"value":"dataSumOrig = {\n const data = await FileAttachment(\"heatmap-SummaryOrig.csv\").csv({typed: true});\n const dataProcessed = data.map((d, i, arr) => {\n let { source, value } = d;\n return {\n source: source,\n value: +value\n };\n });\n return dataProcessed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"dataSumDest = {\n const data = await FileAttachment(\"heatmap-SummaryDest@2.csv\").csv({typed: true});\n const dataProcessed = data.map((d, i, arr) => {\n let { source, value, target, sorter} = d;\n return {\n source: source,\n target: target,\n sorter: sorter,\n value: +value\n };\n });\n return dataProcessed\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1102,"value":"function filterDataSumDest(k) {\n return dataSumDest.filter( (d,i) => {return i >= k*destRegions.length & i < k*destRegions.length + destRegions.length});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1836,"value":"abrevOrigList = {\n let r = d3.group(data, d => d.source)\n let t = [...d3.group(data, d => d.source).keys()]\n let s = t.map(d => r.get(d)[0].source_label)\n return s.map( (d,i) => [d, t[i]] )\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1851,"value":"abrevDestList = {\n let r = d3.group(data, d => d.target)\n let t = [...d3.group(data, d => d.target).keys()]\n // return r\n let s = t.map(d => r.get(d)[0].target_label)\n return s.map( (d,i) => [d, t[i]] )\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"origRegions = [...d3.group(data,d=>d.source).keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":772,"value":"destRegions = [...d3.group(data,d=>d.target).keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":895,"value":"md `## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"colorDomain = d3.extent(data,d=>d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"// colorScale = d3.scaleLinear()\n// .domain(colorDomain)\n// .range([\"lightblue\", \"blue\"])\n// colorScale = d3.scaleLog()\n// .domain([1,1000000])\n// .range([\"white\", \"red\"])\n// colorScale = d3.scaleSequentialLog(d3.interpolateYlOrRd)\n// .domain([1,50000])\ncolorScale = d3.scaleSequentialLog(d3.interpolateOranges)\n .domain([1000,60000])\n// colorScale = d3.scaleThreshold()\n// .domain([1000,1500,2500,3900,6100,9800,15200,24200,38400,59600])\n// .range(colorPallete);\n// colorScale = d3.scaleSequentialQuantile([...data.map(d=>d.value)], d3.interpolateBlues)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"colorPallete = [\n // \"#C2C2CB\",\n \"gray\",\n \"#CED31D\",\n \"#B59D02\",\n \"#D6752D\",\n \"#DC2F26\",\n \"#5B0003\",\n \"#311408\",\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":786,"value":"colorOrigRegionPallete =\n //[\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\",\"#59a14f\",\"#edc949\",\"#af7aa1\",\"#ff9da7\",\"#9c755f\",\"#bab0ab\"]\n [\n \"#8C3C1F\",\n \"gray\",\n \"#675C73\",\n \"#A67681\",\n \"#A65424\",\n \"#A68965\",\n \"#59422E\", //\"#260B05\"\n \"#76A67D\",\n \"#B1F2A7\",\n \"#352E40\",\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":831,"value":"colorDestRegionPallete = [\"#8dd3c7\",\"#ffffb3\",\"#bebada\",\"#fb8072\",\"#80b1d3\",\"#fdb462\",\"#b3de69\",\"#fccde5\",\"#d9d9d9\",\"#bc80bd\",\"#ccebc5\",\"#ffed6f\"] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":780,"value":"origRegionsColors = new Map ( origRegions.map( (d, i) => [d,colorOrigRegionPallete[i]] ) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"destRegionsColors = new Map ( destRegions.map( (d, i) => [d,colorDestRegionPallete[i]] ) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1475,"value":"barChartDColor = \"#A68965\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1478,"value":"barChartOColor = \"#A68965\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":660,"value":"md `## Legend Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":589,"value":"projection = d3.geoMercator()\n\t.center([-23, 39])\n\t.translate([0, 0])\n\t.scale([legend_width/2.1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":591,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":621,"value":"africa = FileAttachment(\"africa.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":639,"value":"africanRegions = [\n {\n \"region\": \"West Central Africa and St. Helena\",\n \"countries\": [\"AGO\", \"GAB\", \"COG\", \"GNQ\", \"COD\"],\n \"color\": \"#4e79a7\"\n },\n {\n \"region\": \"Bight of Benin\",\n \"countries\": [\"NGA\"],\n \"color\": \"#f28e2c\"\n },\n {\n \"region\": \"Bight of Biafra and Gulf of Guinea islands\",\n \"countries\": [\"CMR\"],\n \"color\": \"#e15759\"\n },\n {\n \"region\": \"Gold Coast\",\n \"countries\": [\"GHA\", \"TGO\"],\n \"color\": \"#76b7b2\"\n },\n {\n \"region\": \"Senegambia and offshore Atlantic\",\n \"countries\": [\"SEN\",\"GMB\", \"GNB\", \"BEN\"],\n \"color\": \"#59a14f\"\n },\n {\n \"region\": \"Sierra Leone + Windward Coast\",\n \"countries\": [\"GIN\", \"SLE\", \"LBR\", \"CIV\"],\n \"color\": \"#edc949\"\n },\n {\n \"region\": \"Southeast Africa and Indian Ocean islands\",\n \"countries\": [\"MOZ\", \"MDG\"],\n \"color\": \"#af7aa1\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"countriesColors = new Map ([\n //region A\n [\"AGO\", \"#4e79a7\"],\n [\"GAB\", \"#4e79a7\"],\n [\"COG\", \"#4e79a7\"],\n [\"GNQ\", \"#4e79a7\"],\n // [\"COD\", \"#4e79a7\"],\n //region B\n [\"NGA\", \"#f28e2c\"],\n //region C\n [\"CMR\", \"#e15759\"],\n // region Gold Coast\n [\"GHA\", \"#76b7b2\"],\n [\"TGO\", \"#76b7b2\"],\n [\"BEN\", \"#76b7b2\"],\n //region Senegambia and offshore Atlantic\n [\"SEN\", \"#59a14f\"],\n [\"GMB\", \"#59a14f\"],\n [\"GNB\", \"#59a14f\"],\n // region Sierra Leone + Windward Coast\n [\"GIN\", \"#edc949\"],\n [\"SLE\", \"#edc949\"],\n [\"LBR\", \"#edc949\"],\n [\"CIV\", \"#edc949\"],\n //Southeast Africa and Indian Ocean islands\n [\"MOZ\", \"#af7aa1\"],\n [\"MDG\", \"#af7aa1\"]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1498,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"heatmap_rectwidth = {\n let m = d3.group(data,d=>d.year)\n return (width\n -margin.left\n -margin.right\n -yAxisD_width\n -yAxisO_width\n -barChartD_width\n -barChartO_width)/([...m.keys()].length)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"heatmap_rectheight = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"heatmap_width = {\n var m = d3.group(data,d=>d.year)\n return ([...m.keys()].length) * heatmap_rectwidth\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"heatmap_height = {\n var m = d3.group(data,d=>d.source)\n var k = [...m.keys()].length \n var n = d3.group(data,d=>d.target)\n var l = [...n.keys()].length\n return k*l*heatmap_rectheight\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"height = heatmap_height + margin.bottom + margin.top","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2448,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"barChartO_width = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1237,"value":"barChartD_width = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1352,"value":"yAxisO_width = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1353,"value":"yAxisD_width = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1544,"value":"legendHeatmap = {\n let attributes = {\n tickSize: 4, \n width: 200, \n height: 20, \n marginTop: 0, \n marginRight: 0, \n marginBottom: 0, \n marginLeft: 0, \n tickFormat: \".1s\",\n ticks : 10\n };\n attributes.width = legend_width - legend_margin\n attributes.height = attributes.height + attributes.tickSize;\n attributes.marginBottom = attributes.marginBottom + attributes.tickSize;\n attributes.height = heatmap_rectheight;\n \n return attributes;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1663,"value":"legend_width = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1726,"value":"legend_margin = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"