25:["$","title",null,{"children":"Animated Sankey | Jacque Schrag | Observable"}] 4b:T2caa,async function drawChart() { // Data const dataset = await d3.json("https://gist.githubusercontent.com/jnschrag/7eeb3288bb758cbad992e766b26332b0/raw/b6d14c3c3c67964b312d72edbd080f3af870e06e/water-access.json") // Accessors const sexAccessor = d => d.sex const sexes = ["China", "ROW", "India"] const sexIds = d3.range(sexes.length) const educationAccessor = d => d.education const educationNames = [ "At least basic", "Basic service", "Limited service", "Safely managed", "Surface water", "Unimproved" ] const educationIds = d3.range(educationNames.length) const sesAccessor = d => d.ses const sesNames = ["low"] 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: 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([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.scaleOrdinal() .domain(sexes) .range(["#ed392a", "#728c99", "#3b75bb"]) // 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 = [ "-7, 6", " 0, -6", " 7, 6", ].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 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 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("China") .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("Rest of World (except India)") .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(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 indiaMarkers = endingLabelsGroup.selectAll(".india-marker") .data(educationIds) .enter().append("rect") .attr("class", "ending-marker india-marker") .attr("width", 10) .attr("height", 10) .attr("rx", 5) .attr("ry", d => endYScale(d) + 5) 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 && 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 india = markersGroup.selectAll(".marker-rect") .data(people.filter(d => ( xProgressAccessor(d) < 1 && sexAccessor(d) == 2 )), d => d.id) india.enter().append("rect") .attr("class", "marker marker-rect") .attr("width", 10) .attr("height", 10) .style("opacity", 0) india.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(sexAccessor(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.sexId) : "#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.sexId) : "#DADADD") .text(d => d.count) } d3.timer(updateMarkers) }4c:T656,html` `4d:[] 47:{"id":"d77ee4ef8c73ae7c","slug":"animated-sankey","title":"Animated Sankey","thumbnail":"0cf8d720785ba112ff56812ad090edda51c8ed499218171efec3f95bd1e07aa0","access_level":"public","create_time":"$D2020-01-09T19:41:33.387Z","update_time":"$D2020-01-09T20:26:43.564Z","view_time":null,"first_public_time":"$D2020-01-09T20:11:20.203Z","has_unpublished_edits":null,"fork":{"id":"da0d18686d1f0d86","slug":"animated-sankey","title":"Animated Sankey","owner":{"id":"9b939657e9657184","login":"chekos","name":"chekos"}},"stars":3,"starred":false,"owner":{"type":"team","id":"73394682bb41c2e2","login":"jnschrag","name":"Jacque Schrag","avatar_url":"https://avatars-next.observableusercontent.com/736dbe63d7a9f95d8d8042e1f51f6c1d79624b1a5a6a91f308ff532c1527214e","tier":"starter_2024","bio":"Visual Journalist @ Axios","followed_by_you":false,"follows_you":false},"version":172,"publish_version":172,"role":null,"authored":false,"authors":[{"type":"individual","id":"ad40e0b366ebd246","login":"jnschrag","name":"Jacque Schrag","avatar_url":"https://avatars-next.observableusercontent.com/736dbe63d7a9f95d8d8042e1f51f6c1d79624b1a5a6a91f308ff532c1527214e","tier":null,"bio":"Visual Journalist @ Axios","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ad40e0b366ebd246","login":"jnschrag","name":"Jacque Schrag","avatar_url":"https://avatars-next.observableusercontent.com/736dbe63d7a9f95d8d8042e1f51f6c1d79624b1a5a6a91f308ff532c1527214e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"{\n yield html`

`;\n drawChart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"getStatusKey = ({sex, ses}) => [sex, ses].join(\"--\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null