25:null 26:["$","title",null,{"children":"Missing Migrants | mm5118 | Observable"}] 2b:Taa4,colchart = { const svg = d3.select("#main_graph") .attr("viewBox", [0, 0, width, height]) .attr("id", "main_graph") .call(zoom); svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color2(d.key)) .attr("class", "bars") .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(d.data.Date)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .on("mouseover", function(d) { // Get this bar's x/y values, then augment for the tooltip var xpos = parseFloat(d3.select(this).attr("x")); var ypos = parseFloat(d3.select(this).attr("y")); // Create the tooltip label var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "200px") .attr("height", "80px") .attr("fill", "lightgray"); tgrp.append("text") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${d.data.Date} - US-Mexico Border: ${d.data.USMexicoBorder}, North Africa: ${d.data.NorthAfrica}, Sub-Saharan Africa: ${d.data.SubSaharanAfrica}, Mediterranean: ${d.data.Mediterranean}, Horn of Africa: ${d.data.HornofAfrica}`) .call(wrap, 150); }) .on("mouseout", function(d) { //Remove the tooltip d3.select("#tooltip").remove(); }); svg.append("g") .attr("class", "x-axis") .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(90)") .style("text-anchor", "start"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", "translate(0,275)rotate(-90)") .text("Number of Migrants") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "black"); svg.append("text") .attr("text-anchor", "middle") .attr("transform", "translate(460,560)") .text("Date") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "black"); svg.append("g") .call(yAxis); return svg.node(); }2c:T48e,md `Comparing the individual and the event stacked bar charts at the end of each row, one notices a relative likeness between both charts for the bars representing Vehicle and Unknown causes of death. However, with Starvation and Sickness/medicine bar comparisons, one notices North Africa (yellow) takes up proportionally more of the bar for the individual chart compared to the event chart. This suggests that events of Starvation and Sickness in North Africa account for larger groups of people than in the Horn of Africa or Sub-Saharan Africa, the other two regions that take up a predominant amount of space on the Starvation and Sickness bars. Looking at the numbers each chart summarizes at the end of its flow, there is a clear lead in both individual and event counts when looking at rates of drowning compared to any of the other top 5 causes of death. To best understand the impact the difference between looking at individual versus event rates of causes of death can have, let’s focus in on drowning. Impacting the most migrants, how can different perspectives on rates of drowning lead to different outcomes in migrant protections and policy? ` 2d:T27c6,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: 65, endsBarsWidth: 25, endingBarPadding: 4, } 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.40, 0.60]) .range([0, 1]) .clamp(true) const colorScale = d3.scaleOrdinal() .range(["#4E5249", "#E5CAB3", "#B0B0B0", "#ADA48A", "#777F87"]) // 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("Individual") .attr("x", 15) .attr("y", 4) // draw data const maleMarkers = endingLabelsGroup.selectAll(".male-marker") .data(educationIds) 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) / 5000 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 + 20) .attr("y", d => endYScale(d.endingId) - dimensions.pathHeight / 2 + 14 * d.sexId + 45 ) .attr("fill", d => d.countInBar ? colorScale(d.sesId) : "#DADADD") .text(d => d.count) } d3.timer(updateMarkers) }2e:T27af,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: 65, endsBarsWidth: 25, endingBarPadding: 4, } 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.40, 0.60]) .range([0, 1]) .clamp(true) const colorScale = d3.scaleOrdinal() .range(["#4E5249", "#E5CAB3", "#B0B0B0", "#ADA48A", "#777F87"]) // 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) 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 + 20) .attr("y", d => endYScale(d.endingId) - dimensions.pathHeight / 2 + 14 * d.sexId + 45 ) .attr("fill", d => d.countInBar ? colorScale(d.sesId) : "#DADADD") .text(d => d.count) } d3.timer(updateMarkers) } 2f:T709,html` `30:T466,function wrap(text, width) { text.each(function () { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems x = text.attr("x"), y = text.attr("y"), dy = 0, //parseFloat(text.attr("dy")), tspan = text.text(null) .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word); } } }); }31:[{"id":"a5e66272a0ffe7bc6cb2ad68758ba88b8b20112800f514b65e087273c927f7ad976e5f23b7da512d4273c4a4b58f59c03593aa03b225081316285a052b084462","href":"https://static.observableusercontent.com/files/a5e66272a0ffe7bc6cb2ad68758ba88b8b20112800f514b65e087273c927f7ad976e5f23b7da512d4273c4a4b58f59c03593aa03b225081316285a052b084462","name":"MigrantsFINAL@1.csv","type":"text/csv","lastModified":1576552024020.144,"size":6611}] 29:{"id":"aa214a168a791a41","slug":"missing-migrants/2","title":"Missing Migrants","thumbnail":"ec38401677fb666a5b6f093647c9b221ff4b89ffb376c0f4a39051b952fcfb3f","access_level":"public","create_time":"$D2019-12-17T03:07:04.020Z","update_time":"$D2019-12-17T03:08:41.030Z","view_time":null,"first_public_time":"$D2019-12-17T03:07:26.334Z","fork":{"id":"ce41a925a8679c69","slug":"animated-sankey/4","title":"Missing Migrants","owner":{"id":"965c0c3c524a1179","login":"ar3607","name":"Anne-Laure Razat"}},"stars":0,"starred":false,"owner":{"type":"team","id":"27adcc6b5ec3ccb6","login":"mm5118","name":"","avatar_url":"https://avatars-next.observableusercontent.com/91b6a8fad559a8d85e8c285bde8176412bf0bb4b38bdd9da4d66451eddba6e01","tier":"starter_2024"},"version":797,"publish_version":797,"role":null,"authored":false,"authors":[{"type":"individual","id":"965ea393e1e542ca","login":"mm5118","name":"","avatar_url":"https://avatars-next.observableusercontent.com/91b6a8fad559a8d85e8c285bde8176412bf0bb4b38bdd9da4d66451eddba6e01","tier":null}],"members":[{"type":"individual","id":"965ea393e1e542ca","login":"mm5118","name":"","avatar_url":"https://avatars-next.observableusercontent.com/91b6a8fad559a8d85e8c285bde8176412bf0bb4b38bdd9da4d66451eddba6e01","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Missing Migrants","cells":[{"id":0,"value":"md`# Missing Migrants\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"md `Our dataset was collected by the \n[Missing Migrants Project](https://missingmigrants.iom.int/) of the International Organization for Migration. They compiled an international dataset containing information about all reported missing or dead migrants over the past 5 years.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`# Our Motivation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"md `When we were looking through past uses of the dataset, we noticed a divergence. People would base each analysis on either individuals or events. Largely, the analyses we found focused on individuals. In contrast, we typically hear about missing migrants by event because multiple migrants going missing in the same incident will get reported as one event involving multiple migrants.\n\nWe wanted to put ourselves in the place of someone writing policy related to missing migrants. Would we examine the dataset and write policy based on examining trends by individual, or by event? Maybe a mix of the two? How much could the approaches differ? \n\nIn this visualization, we examine how this difference, which can seem largely inconsequential, affects our conclusions via a side by side analytic comparison.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"{\n yield html`\n

\n International Missing Migrant Regions and Rates for 2018\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"md `This timeline shows the number of missing or deceased migrants reported for each day in 2018. To see more information about individual days, zoom in and hover over the bar.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"legend = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", series.length * 100)\n .attr(\"height\", 40)\n .style(\"font\", \"10px sans-serif\")\n .style(\"margin-left\", `${margin.left}px`)\n .style(\"display\", \"block\")\n .attr(\"text-anchor\", \"middle\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 100},0)`);\n\n g.append(\"rect\")\n .attr(\"width\", 110)\n .attr(\"height\", 25)\n .attr(\"fill\", d => color2(d.key));\n\n g.append(\"text\")\n .attr(\"x\", 50)\n .attr(\"y\", 32)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.key);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"html`

\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md `This is a dot. In our following visualizations, this dot is going to represent either an individual or an event. Let’s consider how these two frames of analysis produces different results and understandings of global missing migrants. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"{\n const node = \n svg``;\n \n \n let circle = d3.select(node).select('circle');\n \n pulse(circle);\n\n function pulse(circle) {\n (function repeat() {\n circle\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0)\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0.5)\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 80)\n .attr('stroke-opacity', 0)\n .ease(d3.easeSin)\n .on(\"end\", repeat);\n })();\n }\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"md `To see the impact of the difference between these two frames of analysis, imagine you’re a policy maker assigned to distribute aid to different migrant routes. Let’s consider what conclusions you would arrive at if you examined the most common causes of death by number of individuals versus by number of events. \n\nTo start, let’s visualize the migrants regions and their causes of death by event.` \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"legend2 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", series.length * 100)\n .attr(\"height\", 40)\n .style(\"font\", \"10px sans-serif\")\n .style(\"margin-left\", `${margin.left}px`)\n .style(\"display\", \"block\")\n .attr(\"text-anchor\", \"middle\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 100},0)`);\n\n g.append(\"rect\")\n .attr(\"width\", 110)\n .attr(\"height\", 25)\n .attr(\"fill\", d => color2(d.key));\n\n g.append(\"text\")\n .attr(\"x\", 50)\n .attr(\"y\", 32)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.key);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"{\n yield html`\n\n

\n\n\n

\n Main Causes of Death for Migrants Per Event by Region \n

`;\ndrawChartE();\n drawChart();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md `And then by individual:` \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"{\n yield html`\n\n

\n\n\n

\n Main Causes of Death for Migrants Per Individual by Region \n

`;\n drawChart();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`# Case Study: Drowning`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"{\n yield html`\n

\nNumber of Drowning Deaths by Region\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"chart5 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, heightN]);\n\n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(datadeathnumbers)\n .join(\"rect\")\n .attr(\"x\", d => x5(d.Region))\n .attr(\"y\", d => y5(d.Deaths))\n .attr(\"height\", d => yN(0) - y5(d.Deaths))\n .attr(\"width\", xN.bandwidth())\n .attr(\"fill\", d => color1(d.Region));\n\n \n svg.append(\"g\")\n .call(xAxis5);\n\n svg.append(\"g\")\n .call(yAxis5);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"md `Based on the above graph,a migrant is far more likely to drown in the Mediterranean than any other region. In fact 5,162 drowning deaths were recorded in the Mediterranean. The second most dangerous place, the Horn of Africa, only recorded 481. ` \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"{\n yield html`\n

\n Events of Drowning Per Region \n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"chart1 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, heightN]);\n\n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(datadeathincidents)\n .join(\"rect\")\n .attr(\"x\", d => x1(d.Region))\n .attr(\"y\", d => y1(d.Incidents))\n .attr(\"height\", d => yN(0) - y1(d.Incidents))\n .attr(\"width\", x1.bandwidth())\n .attr(\"fill\", d => color1(d.Region));\n\n\n svg.append(\"g\")\n .call(xAxis1);\n\n svg.append(\"g\")\n .call(yAxis1);\n\n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"md `When analyzing drowning by number of events, the Mediterranean remains the most dangerous region with 763 events. However, the second most dangerous place is now the U.S.-Mexico with 312 events. A policymaker with this analysis may want to prioritize aid to both the Mediterranean and U.S.-Mexico border as high mortality areas, as opposed to a policymaker who used number of deaths as a metric instead. That policymaker would probably only focus on the Mediterranean as the overwhelming problem area in the dataset. ` \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"md `But both of these analyses leaves something out - looking solely at events obscures variations just how lethal drowning incidents are in different regions. To take a different lens to the data, a policymaker may need to examine the average number of deaths per event in a region.\n ` \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"{\n yield html`\n

\nAverage Deaths Per Events by Region\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, heightN]);\n\n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(datadeathavg)\n .join(\"rect\")\n .attr(\"x\", d => x4(d.Region))\n .attr(\"y\", d => y4(d.DeathsPerIncidents))\n .attr(\"height\", d => yN(0) - y4(d.DeathsPerIncidents))\n .attr(\"width\", x4.bandwidth())\n .attr(\"fill\", d => color1(d.Region));\n\n\n svg.append(\"g\")\n .call(xAxis4);\n\n svg.append(\"g\")\n .call(yAxis4);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"md `This graph presents completely different trends than the first two. The most deadly events of drowning occur in Sub-Saharan Africa and the Horn of Africa, with the Mediterranean ranking third. While drowning incidents on the US-Mexico border may occur more frequently, drowning incidents in Sub-Saharan Africa and the Horn of Africa are claiming many lives at once. \n \n\n ` \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"md`# Conclusion`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"md `These distinctions can help policymakers intuit more about the nature of these incidents and how to best prevent them. Are there large boats capsizing in the two African regions? On the US-Mexico border, are people drowning alone at river crossings? How can these journeys be made safer? Depending on the metric of analysis researchers use, they can come to different conclusions about how best they can solve the unique problems of each regions. \n ` \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"xN = d3.scaleBand()\n .domain(datadeathavg.map(d => d.Region))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"xAxis5 = g => g\n .attr(\"transform\", `translate(0,${heightN - marginN.bottom})`)\n .call(d3.axisBottom(x1).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"yAxis5 = g => g\n .attr(\"transform\", `translate(${marginN.left},0)`)\n .call(d3.axisLeft(y5))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"y5 = d3.scaleLinear()\n .domain([0, d3.max(datadeathnumbers, e => e.Deaths)]).nice()\n .range([heightN - marginN.bottom, marginN.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"x5 = d3.scaleBand()\n .domain(datadeathincidents.map(d => d.Region))\n .range([marginN.left, width - marginN.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"color1 = d3.scaleOrdinal()\n .range([ \"#E5CAB3\", \" #4E5249\", \"#B0B0B0\", \"#777F87\", \"#ADA48A\",])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"color2 = d3.scaleOrdinal()\n .range([\"#ADA48A\" , \"#B0B0B0\", \"#777F87\", \" #4E5249\", \"#E5CAB3\" ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"x4 = d3.scaleBand()\n .domain(datadeathavg.map(d => d.Region))\n .range([marginN.left, width - marginN.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"y4 = d3.scaleLinear()\n .domain([0, 17]).nice()\n .range([heightN - marginN.bottom, marginN.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"xAxis4 = g => g\n .attr(\"transform\", `translate(0,${heightN - marginN.bottom})`)\n .call(d3.axisBottom(x4).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"yAxis4 = g => g\n .attr(\"transform\", `translate(${marginN.left},0)`)\n .call(d3.axisLeft(y4))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"yN = d3.scaleLinear()\n .domain([0, d3.max(datadeathavg, d => d.DeathsPerIncidents)]).nice()\n .range([heightN - marginN.bottom, marginN.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"x1 = d3.scaleBand()\n .domain(datadeathincidents.map(d => d.Region))\n .range([marginN.left, width - marginN.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"y1 = d3.scaleLinear()\n .domain([0, d3.max(datadeathincidents, d => d.Incidents)]).nice()\n .range([heightN - marginN.bottom, marginN.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"xAxis1 = g => g\n .attr(\"transform\", `translate(0,${heightN - marginN.bottom})`)\n .call(d3.axisBottom(x1).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"yAxis1 = g => g\n .attr(\"transform\", `translate(${marginN.left},0)`)\n .call(d3.axisLeft(y1))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"heightN = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"marginN = ({top: 20, right: 0, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"datadeathnumbers = d3.csv(\"https://gist.githubusercontent.com/pdeshlab/120e1ef1465fc6d38ad2244db78891dd/raw/8431a0572b9d76c4370cd9b02769e1a881fd65a6/drowningbythenumbers.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"datadeathincidents = d3.csv(\"https://gist.githubusercontent.com/pdeshlab/120e1ef1465fc6d38ad2244db78891dd/raw/8431a0572b9d76c4370cd9b02769e1a881fd65a6/drowningbyincident.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"datadeathavg = d3.csv(\"https://gist.githubusercontent.com/pdeshlab/120e1ef1465fc6d38ad2244db78891dd/raw/8431a0572b9d76c4370cd9b02769e1a881fd65a6/drowningavgdeathsperincidents.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$2e","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":15,"value":"$2f","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"},{"id":362,"value":"data = d3.csvParse(await FileAttachment(\"MigrantsFINAL@1.csv\").text(), (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"series = d3.stack().keys(data.columns.slice(1))(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.Date))\n .range([margin.left, width - margin.right])\n .padding(0.1)\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"color = d3.scaleOrdinal()\n .range([\"#4E5249\", \"#E5CAB3\", \" #4E5249\", \"#ADA48A\", \"#777F87\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat((interval,i) => {\n return i%(9-Math.floor(d3.zoomTransform(d3.select(\"#main_graph\").node()).k)) !== 0 ? \" \": interval;\n }))\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"margin = ({top: 10, right: 10, bottom: 100, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"function zoom(svg) {\n const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];\n\n svg.call(d3.zoom()\n .scaleExtent([1, 8])\n .translateExtent(extent)\n .extent(extent)\n .on(\"zoom\", zoomed));\n\n function zoomed() {\n x.range([margin.left, width - margin.right].map(d => d3.event.transform.applyX(d)));\n svg.selectAll(\".bars rect\").attr(\"x\", d => x(d.data.Date)).attr(\"width\", x.bandwidth());\n svg.selectAll(\".x-axis\").call(xAxis);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2a:"$29:body"