25:null 26:["$","title",null,{"children":"Animated Sankey | mattlawhon | Observable"}] 2b:T2b9e,async function drawChart() { // Data const dataset = await d3.json("https://raw.githubusercontent.com/mattlawhon/Data-viz/master/individual") // Accessors const sexAccessor = d => d.sex const sexes = ["male"] const sexIds = d3.range(sexes.length) const educationAccessor = d => d.education const educationNames = [ "Drowning", "Sickness_med", "Starvation", "Unknown", "Vehicle" ] const educationIds = d3.range(educationNames.length) const sesAccessor = d => d.ses const sesNames = ["Mediterranean", "Horn of Africa", "North Africa", "US-Mexico Border", "Sub-Saharan Africa"] const sesIds = d3.range(sesNames.length) // probabilities const stackedProbabilities = {} dataset.forEach(startingPoint => { const key = getStatusKey(startingPoint) let stackedProbability = 0 stackedProbabilities[key] = educationNames.map((education, i) => { stackedProbability += (startingPoint[education] / 100) if (i == educationNames.length - 1) { // account for rounding return 1 } else { return stackedProbability } }) }) // persons let currentPersonId = 0 function generatePerson(elapsed) { currentPersonId++ const sex = getRandomValue(sexIds) const ses = getRandomValue(sesIds) const statusKey = getStatusKey({ sex: sexes[sex], ses: sesNames[ses], }) const probabilities = stackedProbabilities[statusKey] const education = d3.bisect(probabilities, Math.random()) return { id: currentPersonId, sex, ses, education, 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: 240, bottom: 10, left: 180, }, 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([sesIds.length, -1]) .range([0, dimensions.boundedHeight]) const endYScale = d3.scaleLinear() .domain([educationIds.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(sesIds)) .range(["#12CBC4", "#B53471"]) .interpolate(d3.interpolateHcl) // draw data const linkOptions = d3.merge( sesIds.map(startId => ( educationIds.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 = [ " 0, 0", " 0, 0", " 0, 0", ].join(" ") const startingLabelsGroup = bounds.append("g") .style("transform", "translateX(-20px)") const startingLabels = startingLabelsGroup.selectAll(".start-label") .data(sesIds) .enter().append("text") .attr("class", "label start-label") .attr("y", (d, i) => startYScale(i)) .text((d, i) => sentenceCase(sesNames[i])) const startLabel = startingLabelsGroup.append("text") .attr("class", "start-title") .attr("y", startYScale(sesIds[sesIds.length - 1]) - 65) .text("Origin") const startLabelLineTwo = startingLabelsGroup.append("text") .attr("class", "start-title") .attr("y", startYScale(sesIds[sesIds.length - 1]) - 50) .text("Region") const startingBars = startingLabelsGroup.selectAll(".start-bar") .data(sesIds) .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 endingCountGroup = bounds.append("g") .style("transform", `translateX(${dimensions.boundedWidth + 20}px)`) const endingCountlabelGroup = bounds.append("g") .style("transform", `translateX(${dimensions.boundedWidth + 20}px)`) const countlabel = endingCountlabelGroup.selectAll(".end-label") .data(educationNames) .append("text") .attr("class", "label end-label") .attr("y", (d, i) => endYScale(i) - 15) .attr("x", 15) .text("COUNT") const endingLabels = endingLabelsGroup.selectAll(".end-label") .data(educationNames) .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 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("Individual") .attr("x", 15) .attr("y", 4) // draw data const maleMarkers = endingLabelsGroup.selectAll(".male-marker") .data(educationIds) .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(educationIds) .enter().append("polygon") .attr("class", "ending-marker female-marker") .attr("points", trianglePoints) .attr("transform", d => `translate(5, ${endYScale(d) + 20})`) const maxPeople = 31552 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) / 7000 if (people.length < maxPeople) { people = [ ...people, ...d3.range(10).map(() => generatePerson(elapsed)), ] } 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 females = markersGroup.selectAll(".marker-circle") .data(people.filter(d => ( xProgressAccessor(d) < 1 && sexAccessor(d) == 0 )), d => d.id) females.enter().append("circle") .attr("class", "marker marker-circle") .attr("r", 5.5) .style("opacity", 0) females.exit().remove() const markers = d3.selectAll(".marker") markers.style("transform", d => { const x = xScale(xProgressAccessor(d)) const yStart = startYScale(sesAccessor(d)) const yEnd = endYScale(educationAccessor(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(sesAccessor(d))) .transition().duration(100) .style("opacity", d => xScale(xProgressAccessor(d)) < 10 ? 0 : 1) const endingGroups = educationIds.map((endId, i) => ( people.filter(d => ( xProgressAccessor(d) >= 1 && educationAccessor(d) == endId )) )) const endingPercentages = d3.merge( endingGroups.map((peopleWithSameEnding, endingId) => ( d3.merge( sexIds.map(sexId => ( sesIds.map(sesId => { const peopleInBar = peopleWithSameEnding.filter(d => ( sexAccessor(d) == sexId )) const countInBar = peopleInBar.length const peopleInBarWithSameStart = peopleInBar.filter(d => ( sesAccessor(d) == sesId )) const count = peopleInBarWithSameStart.length const numberOfPeopleAbove = peopleInBar.filter(d => ( sesAccessor(d) > sesId )).length return { endingId, sesId, 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.sesId) : "#DADADD") endingLabelsGroup.selectAll(".ending-value") .data(endingPercentages) .join("text") .attr("class", "ending-value") .attr("x", d => (d.sesId) * 33 + 47) .attr("y", d => endYScale(d.endingId) - dimensions.pathHeight / 2 + 14 * d.sexId + 35 ) .attr("fill", d => d.countInBar ? colorScale(d.sesId) : "#DADADD") .text(d => d.count) endingCountGroup.selectAll(".ending-value") .data(endingPercentages) .join("text") .attr("class", "ending-value") .attr("x", d => 5 * 33 + 47) .attr("y", d => endYScale(d.endingId) - dimensions.pathHeight / 2 + 14 * d.sexId + 35 ) .text(d => d.countInBar) } d3.timer(updateMarkers) } 2c:T286b,async function drawChartE() { // Data const dataset = await d3.json("https://raw.githubusercontent.com/mattlawhon/Data-viz/master/event") // Accessors const sexAccessor = d => d.sex const sexes = ["male"] const sexIds = d3.range(sexes.length) const educationAccessor = d => d.education const educationNames = [ "Drowning", "Sickness_med", "Starvation", "Unknown", "Vehicle" ] const educationIds = d3.range(educationNames.length) const sesAccessor = d => d.ses const sesNames = ["Mediterranean", "Horn of Africa", "North Africa", "US-Mexico Border", "Sub-Saharan Africa"] const sesIds = d3.range(sesNames.length) // probabilities const stackedProbabilities = {} dataset.forEach(startingPoint => { const key = getStatusKey(startingPoint) let stackedProbability = 0 stackedProbabilities[key] = educationNames.map((education, i) => { stackedProbability += (startingPoint[education] / 100) if (i == educationNames.length - 1) { // account for rounding return 1 } else { return stackedProbability } }) }) // persons let currentPersonId = 0 function generatePerson(elapsed) { currentPersonId++ const sex = getRandomValue(sexIds) const ses = getRandomValue(sesIds) const statusKey = getStatusKey({ sex: sexes[sex], ses: sesNames[ses], }) const probabilities = stackedProbabilities[statusKey] const education = d3.bisect(probabilities, Math.random()) return { id: currentPersonId, sex, ses, education, 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: 240, bottom: 10, left: 180, }, 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([sesIds.length, -1]) .range([0, dimensions.boundedHeight]) const endYScale = d3.scaleLinear() .domain([educationIds.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(sesIds)) .range(["#12CBC4", "#B53471"]) .interpolate(d3.interpolateHcl) // draw data const linkOptions = d3.merge( sesIds.map(startId => ( educationIds.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 = [ " 0, 0", " 0, 0", " 0, 0", ].join(" ") const startingLabelsGroup = bounds.append("g") .style("transform", "translateX(-20px)") const startingLabels = startingLabelsGroup.selectAll(".start-label") .data(sesIds) .enter().append("text") .attr("class", "label start-label") .attr("y", (d, i) => startYScale(i)) .text((d, i) => sentenceCase(sesNames[i])) const startLabel = startingLabelsGroup.append("text") .attr("class", "start-title") .attr("y", startYScale(sesIds[sesIds.length - 1]) - 65) .text("Origin") const startLabelLineTwo = startingLabelsGroup.append("text") .attr("class", "start-title") .attr("y", startYScale(sesIds[sesIds.length - 1]) - 50) .text("Region") const startingBars = startingLabelsGroup.selectAll(".start-bar") .data(sesIds) .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(educationNames) .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 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("Event") .attr("x", 15) .attr("y", 4) // draw data const maleMarkers = endingLabelsGroup.selectAll(".male-marker") .data(educationIds) .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(educationIds) .enter().append("polygon") .attr("class", "ending-marker female-marker") .attr("points", trianglePoints) .attr("transform", d => `translate(5, ${endYScale(d) + 20})`) const maxPeople = 5332 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 && sexAccessor(d) == 0 )), 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(sesAccessor(d)) const yEnd = endYScale(educationAccessor(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(sesAccessor(d))) .transition().duration(100) .style("opacity", d => xScale(xProgressAccessor(d)) < 10 ? 0 : 1) const endingGroups = educationIds.map((endId, i) => ( people.filter(d => ( xProgressAccessor(d) >= 1 && educationAccessor(d) == endId )) )) const endingPercentages = d3.merge( endingGroups.map((peopleWithSameEnding, endingId) => ( d3.merge( sexIds.map(sexId => ( sesIds.map(sesId => { const peopleInBar = peopleWithSameEnding.filter(d => ( sexAccessor(d) == sexId )) const countInBar = peopleInBar.length const peopleInBarWithSameStart = peopleInBar.filter(d => ( sesAccessor(d) == sesId )) const count = peopleInBarWithSameStart.length const numberOfPeopleAbove = peopleInBar.filter(d => ( sesAccessor(d) > sesId )).length return { endingId, sesId, 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.sesId) : "#DADADD") endingLabelsGroup.selectAll(".ending-value") .data(endingPercentages) .join("text") .attr("class", "ending-value") .attr("x", d => (d.sesId) * 33 + 47) .attr("y", d => endYScale(d.endingId) - dimensions.pathHeight / 2 + 14 * d.sexId + 35 ) .attr("fill", d => d.countInBar ? colorScale(d.sesId) : "#DADADD") .text(d => d.count) } d3.timer(updateMarkers) } 2d:T702,html` `2e:[] 29:{"id":"4c24a3dd998f37b2","slug":"animated-sankey/2","title":"Animated Sankey","thumbnail":"e2ca92c11e056ba96965f13cf78dbc0b96944206582d1f2607883c6fb44dfcac","access_level":"public","create_time":"$D2019-12-04T22:14:35.157Z","update_time":"$D2019-12-14T01:40:27.229Z","view_time":null,"first_public_time":"$D2019-12-04T22:14:49.084Z","fork":{"id":"fc5ce266964ffd87","slug":"animated-sankey/3","title":"Animated Sankey","owner":{"id":"965c0c3c524a1179","login":"ar3607","name":"Anne-Laure Razat"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1da2bf1134ce1d7e","login":"mattlawhon","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7eaecd5638b5a30d6c3c895b7bdb402a739984d3cea349b73e3829fccddb3407","tier":"starter_2024"},"version":251,"publish_version":251,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcd0a5d0b7d56a9f","login":"mattlawhon","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7eaecd5638b5a30d6c3c895b7bdb402a739984d3cea349b73e3829fccddb3407","tier":null}],"members":[{"type":"individual","id":"dcd0a5d0b7d56a9f","login":"mattlawhon","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7eaecd5638b5a30d6c3c895b7bdb402a739984d3cea349b73e3829fccddb3407","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Animated Sankey","cells":[{"id":0,"value":"md`# Animated Sankey\n\nfrom [Fullstack Dataviz with D3 by Amelia Wattenberger](https://www.fullstack.io/fullstack-d3)`","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\n

\n Consider for one moment that this dot represents a single human being. \n

\n What are the main causes of death for migrants in different regions?\n

Data from the International Organization for Migration's collection of Missing Migrants data set\n

`;\n drawChart();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$2d","pinned":false,"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":"$W2e","stdlib":"1","titling":"auto"}} 2a:"$29:body"