2b:null 2c:["$","title",null,{"children":"Missing Migrants | mm5118 | Observable"}] 31:Ta78,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .call(zoom); svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(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(); }32:T27c7,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(["#4288B5", "#008000", " #FBF8B0", "#ff8c00", "#D13C4B"]) // 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) }33:T27b0,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(["#4288B5", "#008000", " #FBF8B0", "#ff8c00", "#D13C4B"]) // 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) } 34:T709,html` `35: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); } } }); }36:[{"id":"a5e66272a0ffe7bc6cb2ad68758ba88b8b20112800f514b65e087273c927f7ad976e5f23b7da512d4273c4a4b58f59c03593aa03b225081316285a052b084462","href":"https://static.observableusercontent.com/files/a5e66272a0ffe7bc6cb2ad68758ba88b8b20112800f514b65e087273c927f7ad976e5f23b7da512d4273c4a4b58f59c03593aa03b225081316285a052b084462","name":"MigrantsFINAL@1.csv","type":"text/csv","lastModified":1575816355476.978,"size":6611}] 2f:{"id":"135550af4c844265","slug":"missing-migrants","title":"Missing Migrants","thumbnail":"53aa82fd6a50feb00d335adab244f0c993e489175b645eaa4781ba1ffb479225","access_level":"public","create_time":"$D2019-12-08T14:45:55.476Z","update_time":"$D2019-12-08T19:08:02.807Z","view_time":null,"first_public_time":"$D2019-12-08T14:46:06.967Z","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":597,"publish_version":597,"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":0,"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":388,"value":"{\n yield html`\n

\n Looking into incidents and deaths over time - click to zoom in and hover over bars to interact\n\n

`;\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\", 300)\n .attr(\"height\", 25)\n .attr(\"fill\", d => color(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":359,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"{\n yield html`\n

\n Consider this dot as a single human being. \n\n

`;\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":9,"value":"{\n yield html`\n\n

\n\n\n

\n What are the main causes of death for migrants in per incident? \n

`;\n drawChart();\n drawChartE(); \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 Incident 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":true,"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":394,"value":"{\n yield html`\n

\n Incidents 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":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([\"#008000\", \"#4288B5\", \" #FBF8B0\", \"#D13C4B\", \"#ff8c00\"])","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":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$33","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":"$34","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([\"#4288B5\", \"#008000\", \" #FBF8B0\", \"#ff8c00\", \"#D13C4B\"])","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))\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":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"