2b:null 2c:["$","title",null,{"children":"Animated Sankey | Anne-Laure Razat | Observable"}] 31:T2bc1,async function drawChart() { // Data const dataset = await d3.json("https://raw.githubusercontent.com/ar3607/missingmigrants/master/csvjson(1).json") // Accessors const deathAccessor = d => d.Cause_of_Death const deathCause = [ "Drowning", "Sickness and Lack of Access to Medicines", "Vehicle Accident", "Unknown", "Starvation" ] const deathIds = d3.range(deathCause.length) const locationAccessor = d => d.Region_of_Incident const locationNames = ["Horn of Africa", "Mediterranean", "North America", "Sub-Saharan Africa", "US-Mexico Border" ] const locationIds = d3.range(locationNames.length) // probabilities const stackedProbabilities = {} dataset.forEach(startingPoint => { const key = getStatusKey(startingPoint) let stackedProbability = 0 stackedProbabilities[key] = locationNames.map((location, i) => { stackedProbability += (startingPoint[location] / 100) if (i == locationNames.length - 1) { // account for rounding return 1 } else { return stackedProbability } }) }) // persons let currentPersonId = 0 function generatePerson(elapsed) { currentPersonId++ const location = getRandomValue(locationIds) const statusKey = getStatusKey({ location: locationNames[location], }) const probabilities = stackedProbabilities[statusKey] const education = d3.bisect(probabilities, Math.random()) return { id: currentPersonId, location, deathCause, startTime: elapsed + getRandomNumberInRange(-0.1, 0.1), yJitter: getRandomNumberInRange(-15, 15) } } // dimensions let dimensions = { width: d3.min([width, 1200]), height: 500, margin: { top: 10, right: 200, bottom: 10, left: 120, }, pathHeight: 50, endsBarsWidth: 15, endingBarPadding: 3, } dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom // canvas const wrapper = d3.select("#wrapper") .append("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) const bounds = wrapper.append("g") .style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`) // scales const xScale = d3.scaleLinear() .domain([0, 1]) .range([0, dimensions.boundedWidth]) .clamp(true) const startYScale = d3.scaleLinear() .domain([locationIds.length, -1]) .range([0, dimensions.boundedHeight]) const endYScale = d3.scaleLinear() .domain([deathIds.length, -1]) .range([0, dimensions.boundedHeight]) const linkLineGenerator = d3.line() .x((d, i) => i * (dimensions.boundedWidth / 5)) .y((d, i) => i <= 2 ? startYScale(d[0]) : endYScale(d[1]) ) .curve(d3.curveMonotoneX) const yTransitionProgressScale = d3.scaleLinear() .domain([0.45, 0.55]) .range([0, 1]) .clamp(true) const colorScale = d3.scaleLinear() .domain(d3.extent(locationIds)) .range(["#12CBC4", "#B53471"]) .interpolate(d3.interpolateHcl) // draw data const linkOptions = d3.merge( locationIds.map(startId => ( deathIds.map(endId => ( new Array(6).fill([startId, endId]) )) )) ) const linksGroup = bounds.append("g") const links = linksGroup.selectAll(".category-path") .data(linkOptions) .enter().append("path") .attr("class", "category-path") .attr("d", linkLineGenerator) .attr("stroke-width", dimensions.pathHeight) // draw peripherals const trianglePoints = [ "-7, 6", " 0, -6", " 7, 6", ].join(" ") const startingLabelsGroup = bounds.append("g") .style("transform", "translateX(-20px)") const startingLabels = startingLabelsGroup.selectAll(".start-label") .data(locationIds) .enter().append("text") .attr("class", "label start-label") .attr("y", (d, i) => startYScale(i)) .text((d, i) => sentenceCase(locationNames[i])) const startLabel = startingLabelsGroup.append("text") .attr("class", "start-title") .attr("y", startYScale(locationIds[locationIds.length - 1]) - 65) .text("Origin") const startLabelLineTwo = startingLabelsGroup.append("text") .attr("class", "start-title") .attr("y", startYScale(locationIds[locationIds.length - 1]) - 50) .text("Region") const startingBars = startingLabelsGroup.selectAll(".start-bar") .data(locationIds) .enter().append("rect") .attr("x", 20) .attr("y", d => startYScale(d) - (dimensions.pathHeight / 2)) .attr("width", dimensions.endsBarsWidth) .attr("height", dimensions.pathHeight) .attr("fill", colorScale) const endingLabelsGroup = bounds.append("g") .style("transform", `translateX(${dimensions.boundedWidth + 20}px)`) const endingLabels = endingLabelsGroup.selectAll(".end-label") .data(deathCause) .enter().append("text") .attr("class", "label end-label") .attr("y", (d, i) => endYScale(i) - 15) .text(d => d) const legendGroup = bounds.append("g") .attr("class", "legend") .attr("transform", `translate(${dimensions.boundedWidth}, 5)`) const femaleLegend = legendGroup.append("g") .attr("transform", `translate(${-dimensions.endsBarsWidth * 1.5 + dimensions.endingBarPadding + 1}, 0)`) femaleLegend.append("polygon") .attr("points", trianglePoints) .attr("transform", "translate(-7, 0)") femaleLegend.append("text") .attr("class", "legend-text-left") .text("Female") .attr("x", -20) .attr("y", 4) femaleLegend.append("line") .attr("class", "legend-line") .attr("x1", -dimensions.endsBarsWidth / 2 + 19) .attr("x2", -dimensions.endsBarsWidth / 2 + 19) .attr("y1", 12) .attr("y2", 37) const maleLegend = legendGroup.append("g") .attr("transform", `translate(${-dimensions.endsBarsWidth / 2 - 4}, 0)`) maleLegend.append("circle") .attr("r", 5.5) .attr("transform", "translate(5, 0)") maleLegend.append("text") .attr("class", "legend-text-right") .text("Male") .attr("x", 15) .attr("y", 4) maleLegend.append("line") .attr("class", "legend-line") .attr("x1", -dimensions.endsBarsWidth / 2 - 6) .attr("x2", -dimensions.endsBarsWidth / 2 - 6) .attr("y1", 12) .attr("y2", 37) // draw data const maleMarkers = endingLabelsGroup.selectAll(".male-marker") .data(deathIds) .enter().append("circle") .attr("class", "ending-marker male-marker") .attr("r", 5.5) .attr("cx", 5) .attr("cy", d => endYScale(d) + 5) const femaleMarkers = endingLabelsGroup.selectAll(".female-marker") .data(deathIds) .enter().append("polygon") .attr("class", "ending-marker female-marker") .attr("points", trianglePoints) .attr("transform", d => `translate(5, ${endYScale(d) + 20})`) const maxPeople = 10000 let people = [] const markersGroup = bounds.append("g") .attr("class", "markers-group") const endingBarGroup = bounds.append("g") .attr("transform", `translate(${dimensions.boundedWidth}, 0)`) function updateMarkers(elapsed) { const xProgressAccessor = d => (elapsed - d.startTime) / 5000 if (people.length < maxPeople) { people = [ ...people, ...d3.range(2).map(() => generatePerson(elapsed)), ] } const females = markersGroup.selectAll(".marker-circle") .data(people.filter(d => ( xProgressAccessor(d) < 1 )), d => d.id) females.enter().append("circle") .attr("class", "marker marker-circle") .attr("r", 5.5) .style("opacity", 0) females.exit().remove() /* const males = markersGroup.selectAll(".marker-triangle") .data(people.filter(d => ( xProgressAccessor(d) < 1 && sexAccessor(d) == 1 )), d => d.id) males.enter().append("polygon") .attr("class", "marker marker-triangle") .attr("points", trianglePoints) .style("opacity", 0) males.exit().remove() */ const markers = d3.selectAll(".marker") markers.style("transform", d => { const x = xScale(xProgressAccessor(d)) const yStart = startYScale(locationAccessor(d)) const yEnd = endYScale(deathAccessor(d)) const yChange = yEnd - yStart const yProgress = yTransitionProgressScale(xProgressAccessor(d)) const y = yStart + (yChange * yProgress) + d.yJitter return `translate(${x}px, ${y}px)` }) .attr("fill", d => colorScale(locationAccessor(d))) .transition().duration(100) .style("opacity", d => xScale(xProgressAccessor(d)) < 10 ? 0 : 1) const endingGroups = deathIds.map((endId, i) => ( people.filter(d => ( xProgressAccessor(d) >= 1 && deathAccessor(d) == endId )) )) const endingPercentages = d3.merge( endingGroups.map((peopleWithSameEnding, endingId) => ( d3.merge( sexIds.map(sexId=> ( locationIds.map(locationId => { const peopleInBar = peopleWithSameEnding.filter(d => ( sexAccessor(d) == sexId )) const countInBar = peopleInBar.length const peopleInBarWithSameStart = peopleInBar.filter(d => ( locationAccessor(d) == locationId )) const count = peopleInBarWithSameStart.length const numberOfPeopleAbove = peopleInBar.filter(d => ( locationAccessor(d) > locationId )).length return { endingId, locationId, sexId, count, countInBar, percentAbove: numberOfPeopleAbove / (peopleInBar.length || 1), percent: count / (countInBar || 1), } }) )) ) )) ) endingBarGroup.selectAll(".ending-bar") .data(endingPercentages) .join("rect") .attr("class", "ending-bar") .attr("x", d => -dimensions.endsBarsWidth * (d.sexId + 1) - (d.sexId * dimensions.endingBarPadding)) .attr("width", dimensions.endsBarsWidth) .attr("y", d => endYScale(d.endingId) - dimensions.pathHeight / 2 + dimensions.pathHeight * d.percentAbove) .attr("height", d => d.countInBar ? dimensions.pathHeight * d.percent : dimensions.pathHeight) .attr("fill", d => d.countInBar ? colorScale(d.locationId) : "#DADADD") endingLabelsGroup.selectAll(".ending-value") .data(endingPercentages) .join("text") .attr("class", "ending-value") .attr("x", d => (d.locationId) * 33 + 47) .attr("y", d => endYScale(d.endingId) - dimensions.pathHeight / 2 + 14 * d.sexId + 35) .attr("fill", d => d.countInBar ? colorScale(d.locationId) : "#DADADD") .text(d => d.count) } d3.timer(updateMarkers) }32:T656,html` `33:[] 2f:{"id":"c0d540c64f603f4a","slug":"animated-sankey","title":"Animated Sankey","thumbnail":"98d099d90dc3ec0d958172a5d241ea3a355f37b1335745868f070e7cd4c853a4","access_level":"public","create_time":"$D2019-11-30T01:20:49.535Z","update_time":"$D2019-12-04T16:31:11.264Z","view_time":null,"first_public_time":"$D2019-11-30T02:17:36.817Z","fork":{"id":"da0d18686d1f0d86","slug":"animated-sankey","title":"Animated Sankey","owner":{"id":"9b939657e9657184","login":"chekos","name":"chekos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"965c0c3c524a1179","login":"ar3607","name":"Anne-Laure Razat","avatar_url":"https://avatars-next.observableusercontent.com/55a75ae08387f568447dbda65b261c0fffb76f059af12be5122086fbaf65d9fe","tier":"starter_2024"},"version":172,"publish_version":172,"role":null,"authored":false,"authors":[{"type":"individual","id":"420f288112d2c7fc","login":"ar3607","name":"Anne-Laure Razat","avatar_url":"https://avatars-next.observableusercontent.com/55a75ae08387f568447dbda65b261c0fffb76f059af12be5122086fbaf65d9fe","tier":null}],"members":[{"type":"individual","id":"420f288112d2c7fc","login":"ar3607","name":"Anne-Laure Razat","avatar_url":"https://avatars-next.observableusercontent.com/55a75ae08387f568447dbda65b261c0fffb76f059af12be5122086fbaf65d9fe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Animated Sankey","cells":[{"id":0,"value":"md`# Animated Sankey\n\nfrom [Observable User Chekos](https://observablehq.com/@chekos/animated-sankey)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"{\n yield html`

\n Understanding Trends in Missing Migrants\n

Data from the U.S. Department of Education, National Center for Education Statistics, Education Longitudinal Study of 2002

`;\n drawChart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"getRandomNumberInRange = (min, max) => Math.random() * (max - min) + min","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"getRandomValue = arr => arr[Math.floor(getRandomNumberInRange(0, arr.length))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"sentenceCase = str => [\n str.slice(0, 1).toUpperCase(),\n str.slice(1),\n].join(\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"getStatusKey = ({sex, ses}) => [sex, ses].join(\"--\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"