2b:null 2c:["$","title",null,{"children":"Streamgraph horiz. zoomable w. transition | luiztheodoro | Observable"}] 31:Teb9,streamgraph = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .on("mousemove", hover) .call(zoom); const chart = svg .append("g"); // .attr("transform", `translate(${margin.left} ${margin.top})`) chart .append("g") .attr("class", "axis") .call(xAxis) .call(g => g.selectAll(".tick line").attr("stroke", "lightgray")); chart .append("g") .selectAll("path") .data(dataSeries) .join("path") .attr("d", area) .attr("fill", d => color(d["key"])) .attr("class", d => "stream stream" + d["key"].split(" ").join("")); const annotation = chart.append("g") .attr("class", "annotation") .append("path").attr("pointer-events", "none"); const legend = svg.append("g") .attr("class", "legend"); legend .append("rect") .attr("class", "rect__big") .attr("y", 1) .attr("x", 2) .attr("height",93) .attr("width",60) .attr("fill", "white") .attr("opacity", 0.5); legend .append("rect") .attr("class", "rect__brazil") .attr("y", 5) .attr("x", 10) .attr("height",10) .attr("width",10) .attr("fill", d => color("Brazil")) .attr("visibility","hidden"); legend .append("rect") .attr("class", "rect__caribbean") .attr("y", 20) .attr("x", 10) .attr("height",10) .attr("width",10) .attr("fill", d => color("Caribbean")) .attr("visibility","hidden"); legend .append("rect") .attr("class", "rect__mna") .attr("y", 35) .attr("x", 10) .attr("height",10) .attr("width",10) .attr("fill", d => color("Mainland North America")) .attr("visibility","hidden"); legend .append("rect") .attr("class", "rect__others") .attr("y", 50) .attr("x", 10) .attr("height",10) .attr("width",10) .attr("fill", d => color("Others Arr")) .attr("visibility","hidden"); legend .append("rect") .attr("class", "rect__sam") .attr("y", 65) .attr("x", 10) .attr("height",10) .attr("width",10) .attr("fill", d => color("Spanish American Mainland")) .attr("visibility","hidden"); legend .append("text") .attr("class", "legend__brazil") .attr("y", 13) .attr("x", 55) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif"); legend .append("text") .attr("class", "legend__caribbean") .attr("y", 28) .attr("x", 55) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif"); legend .append("text") .attr("class", "legend__mna") .attr("y", 43) .attr("x", 55) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif"); legend .append("text") .attr("class", "legend__others") .attr("y", 58) .attr("x", 55) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif"); legend .append("text") .attr("class", "legend__sam") .attr("y", 73) .attr("x", 55) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif"); legend .append("text") .attr("class", "legend__all") .attr("y", 88) .attr("x", 55) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif") .attr("font-weight", "bold"); return svg.node(); }32:T50b,dataTrafficRolling = { const byRegion = d3.groups(data, d => d["region"]); const byRegionWithAverages = byRegion.map(elem => { const allYears = elem[1]; const allYearsWithDaily = []; for (let i = 0; i < allYears.length; i++) { if (i > 0) { allYears[i].trafficYearly = allYears[i]["nslaves"] - allYears[i - 1]["nslaves"]; allYearsWithDaily.push(allYears[i]); } else { allYears[i].trafficYearly = allYears[i]["nslaves"]; allYearsWithDaily.push(allYears[i]); } } const years = 2; const allYearsWithAverage = []; for (let i = 0; i < allYears.length; i++) { let yearsTemp; if (i < years) { yearsTemp = i; } else { yearsTemp = years; } let numbersForAverage = []; for (let j = 0; j <= yearsTemp; j++) { numbersForAverage.push(d3.max([allYears[i - j]["trafficYearly"], 0])); } allYears[i].trafficAvg = d3.sum(numbersForAverage) / numbersForAverage.length; allYearsWithAverage.push(allYears[i]); } return allYearsWithAverage; }); return d3 .merge(byRegionWithAverages) .sort( (a, b) => d3.ascending(a["year"], b["year"]) || d3.ascending(a["region"], b["region"]) ); }33:Tb52,dataSeries = { const stack = d3 .stack() .keys(regions) .order(d3.stackOrderNone) .offset(d3.stackOffsetSilhouette); var series; if (selection == "All") series = stack( [...dataTrafficYearly.values()].map((d, i) => { const obj = Object.fromEntries(d.entries()); obj.year = [...dataTrafficYearly.keys()][i]; return obj; }) ) else if (selection == "Brazil") series = stack( [...dataTrafficYearly.values()].map((d, i) => { const obj = Object.fromEntries(d.entries()); delete obj["Caribbean"]; delete obj["Mainland North America"]; delete obj["Others Arr"]; delete obj["Spanish American Mainland"]; obj.year = [...dataTrafficYearly.keys()][i]; return obj; }) ) else if (selection == "Caribbean") series = stack( [...dataTrafficYearly.values()].map((d, i) => { const obj = Object.fromEntries(d.entries()); delete obj["Brazil"]; delete obj["Mainland North America"]; delete obj["Others Arr"]; delete obj["Spanish American Mainland"]; obj.year = [...dataTrafficYearly.keys()][i]; return obj; }) ) else if (selection == "Mainland North America") series = stack( [...dataTrafficYearly.values()].map((d, i) => { const obj = Object.fromEntries(d.entries()); delete obj["Caribbean"]; delete obj["Brazil"]; delete obj["Others Arr"]; delete obj["Spanish American Mainland"]; obj.year = [...dataTrafficYearly.keys()][i]; return obj; }) ) else if (selection == "Others Arr") series = stack( [...dataTrafficYearly.values()].map((d, i) => { const obj = Object.fromEntries(d.entries()); delete obj["Caribbean"]; delete obj["Brazil"]; delete obj["Mainland North America"]; delete obj["Spanish American Mainland"]; obj.year = [...dataTrafficYearly.keys()][i]; return obj; }) ) else if (selection == "Spanish American Mainland") series = stack( [...dataTrafficYearly.values()].map((d, i) => { const obj = Object.fromEntries(d.entries()); delete obj["Caribbean"]; delete obj["Brazil"]; delete obj["Others Arr"]; delete obj["Mainland North America"]; obj.year = [...dataTrafficYearly.keys()][i]; return obj; }) ) return series; }34:Tbd6,function hover(event, d) { var turn = 65; const [posX, posY] = d3.pointer(event); d3.select(".annotation") .selectAll("path") .attr("transform", `translate(${posX}, 0)`) .attr("d", `M 0 0 V ${height}`) .attr("visibility", "visible") .attr("stroke-width", 1) .attr("fill","none") .attr("stroke", "black"); d3.selectAll(".legend").attr("visibility","hidden"); d3.selectAll(".legend").attr("transform", `translate(${posX}, 0)`); if (posX > width - turn) d3.selectAll(".legend").attr("transform", `translate(${posX-turn}, 0)`); if (selection == "All") { d3.selectAll(".legend").attr("visibility","visible"); d3.select(".rect__brazil").attr("visibility","visible"); d3.select(".rect__caribbean").attr("visibility","visible"); d3.select(".rect__mna").attr("visibility","visible"); d3.select(".rect__others").attr("visibility","visible"); d3.select(".rect__sam").attr("visibility","visible"); } else if (selection == "Brazil"){ d3.select(".rect__brazil").attr("visibility","visible"); d3.select(".legend__brazil").attr("visibility","visible"); } else if (selection == "Caribbean"){ d3.select(".rect__caribbean") .attr("visibility","visible") .attr("y",5); d3.select(".legend__caribbean") .attr("visibility","visible") .attr("y",13); } else if (selection == "Mainland North America"){ d3.select(".rect__mna") .attr("visibility","visible") .attr("y",5); d3.select(".legend__mna") .attr("visibility","visible") .attr("y",13); } else if (selection == "Others Arr"){ d3.select(".rect__others") .attr("visibility","visible") .attr("y",5); d3.select(".legend__others") .attr("visibility","visible") .attr("y",13); } else if (selection == "Spanish American Mainland"){ d3.select(".rect__sam") .attr("visibility","visible") .attr("y",5); d3.select(".legend__sam") .attr("visibility","visible") .attr("y",13); } d3.select(".legend__all") .text(`${formatNumber( dataTrafficYearlyGeneral.get(+formatNumber(x.invert(posX))) )}`); d3.select(".legend__brazil") .text(`${formatNumber( dataTrafficYearly.get(+formatNumber(x.invert(posX))).get("Brazil") )}`); d3.select(".legend__caribbean") .text(`${formatNumber( dataTrafficYearly.get(+formatNumber(x.invert(posX))).get("Caribbean") )}`); d3.select(".legend__mna") .text(`${formatNumber( dataTrafficYearly.get(+formatNumber(x.invert(posX))).get("Mainland North America") )}`); d3.select(".legend__others") .text(`${formatNumber( dataTrafficYearly.get(+formatNumber(x.invert(posX))).get("Others Arr") )}`); d3.select(".legend__sam") .text(`${formatNumber( dataTrafficYearly.get(+formatNumber(x.invert(posX))).get("Spanish American Mainland") )}`); }35:[{"id":"4bfc9bb958a46d63e44dd75d59117a5a0d005b7c8bc28a9cd1688fc61786f6bb1638f49298e7bad78416162e988f012050dc0a6a037a2f911fe909705f2021a3","href":"https://static.observableusercontent.com/files/4bfc9bb958a46d63e44dd75d59117a5a0d005b7c8bc28a9cd1688fc61786f6bb1638f49298e7bad78416162e988f012050dc0a6a037a2f911fe909705f2021a3","name":"historic_fates.csv","type":"text/csv","lastModified":1605884109247.007,"size":29},{"id":"cd2a7408f1040bcb8d3c38b920d614b0fbb4733afe59553f39f69131aae31d0422cb7c04b9444bfff21f586438bbe177e1f9c3c1ba0e25335cd25f6478f02b86","href":"https://static.observableusercontent.com/files/cd2a7408f1040bcb8d3c38b920d614b0fbb4733afe59553f39f69131aae31d0422cb7c04b9444bfff21f586438bbe177e1f9c3c1ba0e25335cd25f6478f02b86","name":"streamgraph@3.csv","type":"text/csv","lastModified":1605884109247.007,"size":46300}] 2f:{"id":"1731794e57ceba42","slug":"streamgraph-horiz-zoomable-w-transition","title":"Streamgraph horiz. zoomable w. transition","thumbnail":"f36e274b8f5be7e64fe714d1bcbeb3693cae0f746775bd1e40dcf9cba196ac24","access_level":"public","create_time":"$D2020-11-20T14:55:09.247Z","update_time":"$D2020-11-21T14:17:52.080Z","view_time":null,"first_public_time":"$D2020-11-20T17:02:12.624Z","fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"267a089e2110e8f7","login":"luiztheodoro","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed653b2fced6ee434b91de55c5bd18c1ca42d2b3d75d146905ce8a43086a0650","tier":"starter_2024"},"version":1272,"publish_version":1272,"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":7,"collection":null,"type":"notebook","body":{"title":"Streamgraph horiz. zoomable w. transition","cells":[{"id":0,"value":"md`# Streamgraph horiz. zoomable w. transition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":937,"value":"viewof selection = Object.assign(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"key = swatches({color, marginLeft: margin.left, columns: \"180px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":781,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"margin = ({top: 100, right: 30, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"formatNumber = d3.format(\".0f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"regions = [\n \"Brazil\",\n \"Spanish American Mainland\",\n \"Others Arr\",\n \"Caribbean\",\n \"Mainland North America\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"data = {\n const data = await FileAttachment(\"streamgraph@3.csv\").csv({typed: true});\n const dataProcessed = data.map((d, i, arr) => {\n let { region, nslaves, year } = d;\n return {\n region: region,\n year: +year,\n nslaves: +nslaves\n };\n });\n return dataProcessed.sort(\n (a, b) =>\n d3.ascending(a[\"year\"], b[\"year\"]) ||\n d3.ascending(a[\"region\"], b[\"region\"])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"data2 = {\n const data = await FileAttachment(\"historic_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":280,"value":"dataHistoricFate = {\n return d3.index(data2, d => d.year);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"dataTrafficCumulative = {\n return d3.rollup(\n dataTrafficRolling,\n v => d3.sum(v, d => d.nslaves),\n d => d.year,\n d => d[\"region\"]\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"dataTrafficYearly = {\n return d3.rollup(\n data,\n v => d3.sum(v, d => d[\"nslaves\"]),\n d => d[\"year\"],\n d => d[\"region\"]\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"dataTrafficTotalCumulative = {\n const total = d3.rollup(\n dataTrafficRolling,\n v => d3.sum(v, d => d[\"nslaves\"] / 1000),\n d => d[\"year\"]\n );\n return [[\"year\", \"slaves (in thousands)\"]].concat(Array.from(total));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"dataTrafficYearlyGeneral = {\n return d3.rollup(\n data,\n v => d3.sum(v, d => d[\"nslaves\"]),\n d => d[\"year\"]\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"y = d3\n .scaleLinear()\n // .domain(d3.extent(dataSeries))\n .domain([-40000, 40000])\n .range([margin.top, height-margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"x = {\n let dates = [...dataTrafficYearly.keys()].map(d => d);\n\n return d3\n .scaleLinear()\n .domain([dates[0], dates[dates.length - 1]])\n .range([margin.left, width - margin.right]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"color = d3\n .scaleOrdinal()\n .domain(regions)\n .range(colorsTableau)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"colorsNavioNegreiro = [\n \"#A05833\",\n \"#3C4C50\",\n \"#6D5A44\",\n \"#675037\",\n \"#8B6642\"\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"colorsTableau = [\n \"#4e79a7\",\n \"#f28e2c\",\n \"#e15759\",\n \"#76b7b2\",\n \"#59a14f\",\n \"#edc949\",\n \"#af7aa1\",\n \"#ff9da7\",\n \"#9c755f\",\n \"#bab0ab\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"area = d3\n .area()\n .curve(d3.curveBasis)\n .x((d, i) => x(d.data.year))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())\n // // .call(g => g.selectAll(\".tick text\")\n // // .attr(\"x\", -4)\n // // .attr(\"dy\", -4)\n // // .attr(\"text-anchor\", \"end\")\n // )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":712,"value":"function zoom(svg) {\n const extent = [[margin.left, margin.top], [width - margin.right - margin.left, height - margin.top - margin.bottom]];\n\n svg.call(d3.zoom()\n .scaleExtent([1, 8])\n .translateExtent(extent)\n .extent(extent)\n .on(\"zoom\", zoomed));\n\n function zoomed(event) {\n \n x.range([margin.left, width - margin.right].map(d => event.transform.applyX(d)));\n svg.select(\".axis\").call(xAxis);\n svg.selectAll(\".stream\").attr(\"d\", area);\n \n \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"