25:["$","title",null,{"children":"Prototype World Population | Larissa Schäfer | Observable"}] 49:T734,{ //Larissa const marginLeft = 150 const colorScale = { domain: ["Africa", "Asia", "Europe", "Latin America and the Caribbean", "Northern America", "Oceania"], range: ["#1F77B4", "#FF7F0E", "#2CA02C", "#D62728", "#9467BD", "#8C564B"] }; const selectLocation = vl.selectSingle('Select') // name the selection 'Select' .fields('Location') // limit selection to the Major_Genre field .init({Location: continents[0]}) // use first entry from continents array as initial value .bind(vl.menu(continents)); return vl.layer( vl.markLine({strokeWidth: 3}, {interpolate: 'monotone'}) .data(continentsData.filter(d => d.Time <= 2020 && d.Time % 10 === 0)) .params(selectLocation, vl.selectInterval().bind('scales')) .encode( vl.x().fieldO('Time').title('Year'), vl.y().fieldQ(vl.repeat("repeat")), vl.color().fieldN('Location').scale(colorScale), vl.tooltip().fieldN('Location'), vl.opacity().if(selectLocation, vl.value(1)).value(0.2) ) .width(width/2-marginLeft), // Projected Data (2024-2100) vl.markLine({ strokeWidth: 3, strokeDash: [5, 5] }, { interpolate: 'monotone' }) // Dashed line .data(continentsData.filter(d => d.Time >= 2020 && d.Time % 10 === 0)) .encode( vl.x().fieldO('Time').title('Year'), vl.y().fieldQ(vl.repeat("repeat")), vl.color().fieldN('Location').scale(colorScale), vl.tooltip().fieldN('Location'), vl.opacity().if(selectLocation, vl.value(1)).value(0.2) ) .width(width/2-marginLeft) ) .height(300) .repeat(["TotalFertilityRate", "TPopulation"]) .render() }4a:T6ee,//Rawan chart5 = { // Function to create a markLine specification function createMarkLine(dataFilter, strokeDash, color) { return vl.markLine({ strokeWidth: 3, strokeDash: strokeDash }, { interpolate: 'monotone' }) .data(justCountries.filter(dataFilter)) .encode( vl.x().fieldO('Time').title('Year'), vl.y().fieldQ(vl.repeat("repeat")), vl.color().value(color) ) .width(400); } // Filters for the data const pre2020Filter = d => d.Location == 'China' && d.Time <= 2020 && d.Time % 10 === 0; const post2020Filter = d => d.Location == 'China' && d.Time >= 2020 && d.Time % 10 === 0; const annotations = [ { year: 1980, label: 'One-child policy starts' }, { year: 2015, label: 'Two-child policy starts' }, { year: 2021, label: 'Three-child policy starts' } ]; const markLines = annotations.map(a => vl.markRule({ strokeDash: [5, 5], color: '#000000' }) .data([{ Time: a.year }]) .encode( vl.x().fieldO('Time').title('Year') ) ); const texts = annotations.map(a => vl.markText({ dy: -10, dx: -15, angle: 270, fontSize: 14, color: '#000000' }) .data([{ Time: a.year, label: a.label }]) .encode( vl.x().fieldO('Time'), vl.text().fieldN('label') ) ); return vl.layer( createMarkLine(pre2020Filter, null, '#ee1c25'), createMarkLine(post2020Filter, [5, 5], '#ee1c25'), ...markLines, ...texts ) .repeat(["TotalFertilityRate", "TPopulation"]) .title({ text: 'Fertility rate and population of China from 1950 to 2100', anchor: 'start', offset: 16 }) .render(); } 4b:Teb4,//Rawan chart7 = { // Declare the chart dimensions and margins. const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; // Declare the x (horizontal position) scale. const x = d3.scaleUtc() .domain(d3.extent(data, d => new Date(d.Year, 0, 1))) .range([marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.MedianAge)]) .range([height - marginBottom, marginTop]); // Declare the line generator. const line = d3.line() .x(d => x(new Date(d.Year, 0, 1))) .y(d => y(d.MedianAge)); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;") .style("-webkit-tap-highlight-color", "transparent") .style("overflow", "visible") .on("pointerenter pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); // Add the x-axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); // Add the y-axis, remove the domain line, add grid lines and a label. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Median Age (Years)")); // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#ee1c25") .attr("stroke-width", 3) // Increase the stroke width .attr("d", line(data)); // Create the tooltip container. const tooltip = svg.append("g"); function formatValue(value) { return value.toFixed(1); } function formatDate(date) { return date.getUTCFullYear(); } // Add the event listeners that show or hide the tooltip. const bisect = d3.bisector(d => new Date(d.Year, 0, 1)).center; function pointermoved(event) { const i = bisect(data, x.invert(d3.pointer(event)[0])); tooltip.style("display", null); tooltip.attr("transform", `translate(${x(new Date(data[i].Year, 0, 1))},${y(data[i].MedianAge)})`); const path = tooltip.selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip.selectAll("text") .data([,]) .join("text") .call(text => text .selectAll("tspan") .data([formatDate(new Date(data[i].Year, 0, 1)), formatValue(data[i].MedianAge)]) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d)); size(text, path); } function pointerleft() { tooltip.style("display", "none"); } // Wraps the text with a callout path of the correct size, as measured in the page. function size(text, path) { const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } return svg.node(); } 4c:Tc40,//Rawan chart8 = { const group = "Age"; const maleKey = "M"; const femaleKey = "F"; const genders = [maleKey, femaleKey]; const facet = undefined; let facetDirection = "x"; const width = 960; const height = 900; const colorScheme = d3.schemeCategory10; const gap = 20; const domain = dataChina.map((d) => d[group]); const maxValue = d3.max(dataChina, (d) => Math.max(d[maleKey], d[femaleKey])); const ticks = d3.ticks(0, maxValue, 5); const tickFormat = d3.format(".2s"); const xAxis = [ Plot.ruleX(ticks, { x: (d) => d, dx: gap, stroke: "currentColor", strokeOpacity: 0.1, insetBottom: -7.5 }), Plot.text(ticks, { x: (d) => -d, dx: -gap, frameAnchor: "bottom", dy: 10, text: tickFormat }), Plot.ruleX(ticks, { x: (d) => -d, insetBottom: -5, dx: -gap, stroke: "currentColor", strokeOpacity: 0.1 }), Plot.text(ticks, { x: (d) => d, frameAnchor: "bottom", dx: gap, dy: 10, text: tickFormat }), Plot.text( dataChina, Plot.selectFirst({ x: 0, y: group, dx: -gap, dy: 40, text: () => maleKey, textAnchor: "end", fontWeight: "bold" }) ), Plot.text( dataChina, Plot.selectFirst({ x: 0, y: group, dx: gap, dy: 40, text: () => femaleKey, textAnchor: "start", fontWeight: "bold" }) ) ]; const yAxis = [Plot.text(domain, { x: 0, text: (d) => d, y: (d) => d })]; const plot = Plot.plot({ width, height, marginBottom: 40, marginLeft: 30, marginRight: 30, ...(facet && { facet: { label: null, data: dataChina, [facetDirection]: facet } }), fx: { axis: "top", padding: 0.2, label: "" }, color: { type: "categorical", legend: true, domain: genders, range: colorScheme }, x: { label: null, tickFormat: Math.abs, // Only absolute value (without sign) is shown on ticks. axis: null }, y: { label: null, domain, reverse: true, axis: null, padding: 1 / 15, align: 1 }, marks: [ xAxis, yAxis, Plot.barX(dataChina, { y: group, x: (d) => -d[maleKey], dx: -gap, fill: () => maleKey, title: (d) => `${maleKey} (${d[group]}): ${d[maleKey].toLocaleString()}` }), Plot.barX(dataChina, { y: group, x: (d) => d[femaleKey], dx: gap, fill: () => femaleKey, title: (d) => `${femaleKey} (${d[group]}): ${d[femaleKey].toLocaleString()}` }) ] }); d3.selectAll("[aria-label=fx-axis] .tick text") .style("font-weight", "bold") .style("font-size", "0.75rem"); return plot; }4d:Tb15,chartFR = { // Declare the chart dimensions and margins. const width = 900 const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 30; // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([1950, 2100]) .range([marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear([0, d3.max(finalData, d => d.TotalFertilityRate)], [height - marginBottom, marginTop]); const color = d3.scaleOrdinal(['Africa', 'Asia', 'Europe', 'South America', 'North America', 'Oceania'], ["#1F77B4", "#FF7F0E", "#2CA02C", "#D62728", "#9467BD", "#8C564B"]) // Declare the line generator. const line = d3.line() .x(d => x(d.Time)) .y(d => y(d.TotalFertilityRate)) .curve(d3.curveBasis); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Add the x-axis with label svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .style("font", "bold 12px var(--sans-serif)") .call(d3.axisBottom(x).ticks(width / 80).tickFormat(d3.format("d"))) .call(g => g.append("text") .attr("x", width-marginRight) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Year")); // Add the y-axis, remove the domain line, add grid lines and a label. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .style("font", "bold 12px var(--sans-serif)") .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.2)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Fertility Rate")); // Increase stroke-opacity for the tick line with value 2 svg.selectAll(".tick") .filter(d => d === 2) .each(function() { d3.select(this).select("line:nth-of-type(2)") .attr("stroke-opacity", 0.6); // Set desired opacity }); // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("d", line(historicalData)); svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,4") // Dash pattern: 5 pixels dash, 5 pixels gap .attr("d", line(futureData)); return svg.node(); }4e:Tad7,pieChart = { // Specify the chart’s dimensions. const width = 400; const height = 220; const marginTop = 40 const marginBottom = 10 // Create the color scale. const color = d3.scaleOrdinal() .domain(pieData) .range(["LightGrey", "Plum"]) // Create the pie layout and arc generator. const pie = d3.pie() const radius = (height - marginTop - marginBottom) / 2 const arc = d3.arc() .innerRadius(0) .outerRadius(radius); const labelRadius = arc.outerRadius()() * 0.8; // A separate arc generator for labels. const arcLabel = d3.arc() .innerRadius(labelRadius) .outerRadius(labelRadius); const arcs = pie(pieData); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); svg.append("g") .attr("transform", `translate(10, 20)`) .style("font", "bold 16px var(--sans-serif)") .append("text") .attr("text-anchor", "start") .attr("x", 0) .attr("y", 0) .text(`Percentage of World Population - Year ${date}`) const legendRow1 = svg.append("g") .attr("transform", `translate(${width-200}, ${height/2})`) .style("font", "bold 12px var(--sans-serif)") legendRow1.append('rect') .attr('width', 10) .attr('height', 10) .attr('fill', 'Plum') legendRow1.append("text") .attr("text-anchor", "start") .attr("x", 12) .attr("y", 10) .text(`${selectLocation}`) const legendRow2 = svg.append("g") .attr("transform", `translate(${width-200}, ${height/2+20})`) .style("font", "bold 12px var(--sans-serif)") legendRow2.append('rect') .attr('width', 10) .attr('height', 10) .attr('fill', 'LightGrey') legendRow2.append("text") .attr("text-anchor", "start") .attr("x", 12) .attr("y", 10) .text("Rest of the World") // Add a sector path for each value. svg.append("g") .attr("transform", `translate(${radius}, ${(height) / 2 + 20})`) .selectAll() .data(arcs) .join("path") .attr("fill", d => color(d)) .attr("d", arc) // Create a new arc generator to place a label close to the edge. // The label shows the value if there is enough room. svg.append("g") .attr("transform", `translate(${radius}, ${(height) / 2 + 20})`) .style("font", "bold 12px var(--sans-serif)") .attr("text-anchor", "middle") .selectAll() .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .text(d => `${d.data}%`)) return svg.node(); }4f:T97a,chart = { // Declare the chart dimensions and margins. const width = 900; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 45; // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([1950, 2100]) .range([marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear([0, d3.max(finalData, d => d.TPopulation)], [height - marginBottom, marginTop]); // Declare the line generator. const line = d3.line() .x(d => x(d.Time)) .y(d => y(d.TPopulation)) .curve(d3.curveBasis); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Add the x-axis with label svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .style("font", "bold 12px var(--sans-serif)") .call(d3.axisBottom(x).ticks(width / 80).tickFormat(d3.format("d"))) .call(g => g.append("text") .attr("x", width-marginRight) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Year")); // Add the y-axis, remove the domain line, add grid lines and a label. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .style("font", "bold 12px var(--sans-serif)") .call(d3.axisLeft(y).ticks(height / 40).tickFormat(d => d3.format(".3s")(d).replace("G", "B"))) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.2)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Population")); // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("d", line(historicalData)); svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,4") // Dash pattern: 5 pixels dash, 5 pixels gap .attr("d", line(futureData)); return svg.node(); }50:T128c,drawSimpleGirl = function(g, x, y) { g.attr("transform", `translate(${x},${y})`) const ellipse = g.append("ellipse") .attr("cx", 17) .attr("cy", 35) .attr("rx", 13) .attr("ry", 5) .attr("fill", "#E19203") g.append("path") .attr("d", "M17 9C24.3499 18.1395 30.6464 34.6022 30 35C29.3536 35.3978 4 35 4 35C7.32198 23.7035 11.0795 18.3745 17 9Z") .attr("stroke", "#E19203" ) .attr("fill", "#E19203") const circle = g.append("circle") .attr("cx", 17) .attr("cy", 10.5) .attr("r", 9.5) .attr("fill", "#E6C71D") g.append("path") .attr("d", "M11 12.5C17.5 19.5 23 12.5 23 12.5") .attr("stroke", "black" ) g.append("line") .attr("x1", "13.5") .attr("y1", "6") .attr("x2", "13.5") .attr("y2", "10") .attr("stroke", "black" ) g.append("line") .attr("x1", "20.5") .attr("y1", "6") .attr("x2", "20.5") .attr("y2", "10") .attr("stroke", "black" ) g.append("path") .attr("d", "M16.9111 1.49203C16.6393 1.44292 16.4589 1.18282 16.508 0.911083C16.5571 0.639342 16.8172 0.458862 17.0889 0.50797L16.9111 1.49203ZM24 4L24.2891 3.59209L24.3769 3.65429L24.4313 3.74709L24 4ZM32.5192 17.3626C32.5951 17.0971 32.8718 16.9434 33.1374 17.0192C33.4029 17.0951 33.5566 17.3718 33.4808 17.6374L32.5192 17.3626ZM17.0889 0.50797C18.5568 0.773241 19.7035 1.0758 20.8171 1.55254C21.9293 2.02869 22.9883 2.66996 24.2891 3.59209L23.7109 4.40791C22.4389 3.50629 21.4447 2.90902 20.4235 2.47184C19.4037 2.03525 18.3368 1.74968 16.9111 1.49203L17.0889 0.50797ZM24.4313 3.74709C25.1658 4.99972 25.8033 6.2733 26.2587 7.43124C26.7093 8.57699 27 9.65467 27 10.5H26C26 9.84533 25.7652 8.90866 25.3281 7.79724C24.8958 6.69801 24.2833 5.47158 23.5687 4.25291L24.4313 3.74709ZM27 10.5C27 10.9154 26.9318 11.4505 26.8547 12.0132C26.7758 12.5897 26.684 13.2167 26.6227 13.8599C26.498 15.1698 26.5167 16.4154 26.9472 17.2764L26.0528 17.7236C25.4833 16.5846 25.502 15.0802 25.6273 13.7651C25.691 13.0958 25.7867 12.4416 25.864 11.8775C25.9432 11.2995 26 10.8346 26 10.5H27ZM26.9472 17.2764C27.4563 18.2946 27.8087 18.9949 28.15 19.45C28.4733 19.8811 28.7171 20 29 20L29 21C28.2829 21 27.7767 20.6189 27.35 20.05C26.9413 19.5051 26.5437 18.7054 26.0528 17.7236L26.9472 17.2764ZM29 20C30 20 30.5 20 31 20L31 21C30.5 21 30 21 29 21L29 20ZM31 20C31.0963 20 31.1922 20.0122 31.242 20.0175C31.3036 20.0242 31.3321 20.0256 31.3535 20.0243C31.3623 20.0238 31.388 20.0299 31.4589 19.9589C31.5508 19.8671 31.6927 19.6671 31.878 19.2445C32.0607 18.8279 32.2724 18.2267 32.5192 17.3626L33.4808 17.6374C33.2276 18.5233 33.0018 19.1721 32.7938 19.6461C32.5886 20.1141 32.3867 20.4454 32.1661 20.6661C31.9245 20.9076 31.669 21.0075 31.4122 21.0226C31.3008 21.0291 31.2003 21.0188 31.1349 21.0118C31.0578 21.0035 31.0287 21 31 21L31 20Z") .attr("stroke", "black" ) g.append("path") .attr("d", "M17.0889 1.49203C17.3607 1.44292 17.5411 1.18282 17.492 0.911083C17.4429 0.639342 17.1828 0.458862 16.9111 0.50797L17.0889 1.49203ZM10 4L9.71085 3.59209L9.62309 3.65429L9.56868 3.74709L10 4ZM1.48076 17.3626C1.4049 17.0971 1.12816 16.9434 0.862639 17.0192C0.597122 17.0951 0.443376 17.3718 0.519238 17.6374L1.48076 17.3626ZM16.9111 0.50797C15.4432 0.773241 14.2965 1.0758 13.1829 1.55254C12.0707 2.02869 11.0117 2.66996 9.71085 3.59209L10.2891 4.40791C11.5611 3.50629 12.5553 2.90902 13.5765 2.47184C14.5963 2.03525 15.6632 1.74968 17.0889 1.49203L16.9111 0.50797ZM9.56868 3.74709C8.8342 4.99972 8.19671 6.2733 7.7413 7.43124C7.29068 8.57699 7 9.65467 7 10.5H8C8 9.84533 8.23479 8.90866 8.67191 7.79724C9.10423 6.69801 9.71675 5.47158 10.4313 4.25291L9.56868 3.74709ZM7 10.5C7 10.9154 7.06817 11.4505 7.14525 12.0132C7.22423 12.5897 7.316 13.2167 7.37725 13.8599C7.50201 15.1698 7.48329 16.4154 7.05279 17.2764L7.94721 17.7236C8.51671 16.5846 8.49799 15.0802 8.37275 13.7651C8.309 13.0958 8.21327 12.4416 8.136 11.8775C8.05683 11.2995 8 10.8346 8 10.5H7ZM7.05279 17.2764C6.54368 18.2946 6.19133 18.9949 5.85 19.45C5.52666 19.8811 5.28288 20 5 20L5 21C5.71712 21 6.22334 20.6189 6.65 20.05C7.05867 19.5051 7.45632 18.7054 7.94721 17.7236L7.05279 17.2764ZM5 20C4 20 3.5 20 3 20L3 21C3.5 21 4 21 5 21L5 20ZM3 20C2.90373 20 2.80777 20.0122 2.75799 20.0175C2.69641 20.0242 2.66794 20.0256 2.64655 20.0243C2.63774 20.0238 2.61197 20.0299 2.54105 19.9589C2.44917 19.8671 2.30733 19.6671 2.12196 19.2445C1.93926 18.8279 1.72763 18.2267 1.48076 17.3626L0.519238 17.6374C0.77237 18.5233 0.998239 19.1721 1.20617 19.6461C1.41142 20.1141 1.61333 20.4454 1.83395 20.6661C2.07553 20.9076 2.33101 21.0075 2.58783 21.0226C2.69925 21.0291 2.79969 21.0188 2.86506 21.0118C2.94223 21.0035 2.97127 21 3 21L3 20Z") .attr("stroke", "black" ) }51:T4dc,drawSimpleBoy = function(g, x, y) { g.attr("transform", `translate(${x},${y})`) const ellipse = g.append("ellipse") .attr("cx", 16) .attr("cy", 35) .attr("rx", 13) .attr("ry", 5) .attr("fill", "#E19203") g.append("path") .attr("d", "M16 9C23.3499 18.1395 29.6464 34.6022 29 35C28.3536 35.3978 3 35 3 35C6.32198 23.7035 10.0795 18.3745 16 9Z") .attr("stroke", "#E19203" ) .attr("fill", "#E19203") const circle = g.append("circle") .attr("cx", 16) .attr("cy", 10.5) .attr("r", 9.5) .attr("fill", "#E6C71D") g.append("path") .attr("d", "M10 12.5C16.5 19.5 22 12.5 22 12.5") .attr("stroke", "black" ) g.append("line") .attr("x1", "12.5") .attr("y1", "6") .attr("x2", "12.5") .attr("y2", "10") .attr("stroke", "black" ) g.append("line") .attr("x1", "19.5") .attr("y1", "6") .attr("x2", "19.5") .attr("y2", "10") .attr("stroke", "black" ) g.append("path") .attr("d", "M16 1C13.1064 1.52292 11.5729 2.17625 9 4L7 7.5") .attr("stroke", "black" ) g.append("path") .attr("d", "M16 1C18.8936 1.52292 20.4271 2.17625 23 4L25 7.5") .attr("stroke", "black" ) }52:T4a2,```python //Rawan import pandas as pd import matplotlib.pyplot as plt data = pd.read_csv('C:/Users/User/Downloads/datasetBig.csv') data['TPopulation'] = data[['TPopulation1Jan', 'TPopulation1July']].mean(axis=1) china_data = data[data['Location'] == 'China'] years = china_data['Time'] population = china_data['TPopulation'] plt.figure(figsize=(10,10)) plt.plot(years, population, marker='o', linestyle='-', color='b') events = { 1950: 'Start of Mao Era, policies that encouraged population growth', 1979: 'Introduction of one-child policy', 2015: 'End of one-child policy, introduction of two-child policy', 2008: 'Beijing Olympics and increased international visibility leading to population growth', 2020: 'COVID-19 pandemic and associated lockdowns leading to temporary population decrease' } for year, event in events.items(): if year in years.values: pop_value = china_data[china_data['Time'] == year]['TPopulation'].values[0] plt.annotate(event, (year, pop_value), textcoords="offset points", xytext=(0,10), ha='center') plt.title('Population Trends in China') plt.xlabel('Year') plt.ylabel('Population') plt.grid(True) plt.show() ```53:Ta4c,data50 = [ { group: "0-4", gender: "male", population: 45000000 }, { group: "0-4", gender: "female", population: 42000000 }, { group: "5-9", gender: "male", population: 43000000 }, { group: "5-9", gender: "female", population: 40000000 }, { group: "10-14", gender: "male", population: 41000000 }, { group: "10-14", gender: "female", population: 39000000 }, { group: "15-19", gender: "male", population: 38000000 }, { group: "15-19", gender: "female", population: 37000000 }, { group: "20-24", gender: "male", population: 35000000 }, { group: "20-24", gender: "female", population: 34000000 }, { group: "25-29", gender: "male", population: 32000000 }, { group: "25-29", gender: "female", population: 31000000 }, { group: "30-34", gender: "male", population: 30000000 }, { group: "30-34", gender: "female", population: 29000000 }, { group: "35-39", gender: "male", population: 28000000 }, { group: "35-39", gender: "female", population: 27000000 }, { group: "40-44", gender: "male", population: 26000000 }, { group: "40-44", gender: "female", population: 25000000 }, { group: "45-49", gender: "male", population: 24000000 }, { group: "45-49", gender: "female", population: 23000000 }, { group: "50-54", gender: "male", population: 22000000 }, { group: "50-54", gender: "female", population: 21000000 }, { group: "55-59", gender: "male", population: 20000000 }, { group: "55-59", gender: "female", population: 19000000 }, { group: "60-64", gender: "male", population: 18000000 }, { group: "60-64", gender: "female", population: 17000000 }, { group: "65-69", gender: "male", population: 16000000 }, { group: "65-69", gender: "female", population: 15000000 }, { group: "70-74", gender: "male", population: 14000000 }, { group: "70-74", gender: "female", population: 13000000 }, { group: "75-79", gender: "male", population: 12000000 }, { group: "75-79", gender: "female", population: 11000000 }, { group: "80-84", gender: "male", population: 9000000 }, { group: "80-84", gender: "female", population: 8000000 }, { group: "85-89", gender: "male", population: 6000000 }, { group: "85-89", gender: "female", population: 5000000 }, { group: "90-94", gender: "male", population: 3000000 }, { group: "90-94", gender: "female", population: 2500000 }, { group: "95-99", gender: "male", population: 1000000 }, { group: "95-99", gender: "female", population: 800000 }, { group: "100+", gender: "male", population: 200000 }, { group: "100+", gender: "female", population: 150000 } ]; 54:[{"id":"bc0032828cfddfc3984474601f80cf5622b241dc2e4506658c76848892f3f6f3b71d0fd4b92cb97b42fd83948260bfa8a34bfe3897d6d363f85a1f0dc3ce1fe2","href":"https://static.observableusercontent.com/files/bc0032828cfddfc3984474601f80cf5622b241dc2e4506658c76848892f3f6f3b71d0fd4b92cb97b42fd83948260bfa8a34bfe3897d6d363f85a1f0dc3ce1fe2","name":"cn.svg","type":"image/svg+xml","lastModified":1780058314281.446,"size":813},{"id":"462fbba07c2dc35212eafd90b9a663be459d213e83b23ea2b7fae0662a0d8647e20141b9a07780e6f05c16c9042c857c8faea5683636fc4ec2ed5f5b5357dfae","href":"https://static.observableusercontent.com/files/462fbba07c2dc35212eafd90b9a663be459d213e83b23ea2b7fae0662a0d8647e20141b9a07780e6f05c16c9042c857c8faea5683636fc4ec2ed5f5b5357dfae","name":"worldPopulation_1950_2100@1.csv","type":"text/csv","lastModified":1780058314281.446,"size":5021415},{"id":"411acf949ed4bef020fdb6ded0be5401f5617a5ba57c51a4b89de87276e06674007942ded12c9996e84e9816c9f3e989758c6ced097e16bb4a149303ece1f26f","href":"https://static.observableusercontent.com/files/411acf949ed4bef020fdb6ded0be5401f5617a5ba57c51a4b89de87276e06674007942ded12c9996e84e9816c9f3e989758c6ced097e16bb4a149303ece1f26f","name":"China_Median_Age_Realistic_Dataset.csv","type":"text/csv","lastModified":1780058314281.446,"size":2375},{"id":"75ed66345859080f768a5e95570b633895813efb32698f6fca6f29ad00c7728ecd0c844152a644eb5fc0b3ac81bbcde22218e6b3c72e965346a28044a0ccf62c","href":"https://static.observableusercontent.com/files/75ed66345859080f768a5e95570b633895813efb32698f6fca6f29ad00c7728ecd0c844152a644eb5fc0b3ac81bbcde22218e6b3c72e965346a28044a0ccf62c","name":"China-2025@1.csv","type":"text/csv","lastModified":1780058314281.446,"size":514}] 29:{"id":"a76ca78f13b15880","slug":null,"title":"Prototype World Population","thumbnail":"c5328473be14e66dbee80fabc9e46437d8e89cd68bb3b85f6a2cd183bc68a03e","access_level":"public","create_time":"$D2026-05-29T12:38:34.281Z","update_time":"$D2026-05-29T12:40:18.442Z","view_time":null,"first_public_time":"$D2026-05-29T12:38:34.281Z","has_unpublished_edits":null,"fork":{"id":"f563b3291d683c34","slug":null,"title":"Prototype World Population","owner":{"id":"100c3a673e61683a","login":"larissa-schafer","name":"Larissa Schäfer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"100c3a673e61683a","login":"larissa-schafer","name":"Larissa Schäfer","avatar_url":"https://avatars-next.observableusercontent.com/64c01431dff5b998a76c2b5c003fe6a9e63e6ef2a389e0da9771df8c30bc36f2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1823,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca5bc48227744cbc","login":"larissa-schafer","name":"Larissa Schäfer","avatar_url":"https://avatars-next.observableusercontent.com/4896a3d38049cf1aaf5dd7ddb2641333195d69940d627c61ddda65fa537c408d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ca5bc48227744cbc","login":"larissa-schafer","name":"Larissa Schäfer","avatar_url":"https://avatars-next.observableusercontent.com/4896a3d38049cf1aaf5dd7ddb2641333195d69940d627c61ddda65fa537c408d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Prototype World Population","cells":[{"id":122,"value":"

Prototype World Population

Introduction to the topic

For Thousand years human population berly grew up due to diseases, famine or war. This situation stayed until the industrial revolution starting at 1760 and ever since, the world population has grown rapidly. In 1950, we were just 2.5 billion people. Now in the year 2024, 74 years later, the world population has more than tripled. By today, 8.1 billion people are living on the world (maybe try to write down this number, it has quite a lot of zeros😉).

Click the \"Restart Animation\" button to see how the population has risen since 1950.

\n We were growing really fast, but this is likely to change in the future. From year to year, people kind of stopped to have babies and the fertility rate decreases.\n

Click the next \"Restart Animation\" button to see how the fertility rate has decreased since 1950 for the world.

\nFor a stable population, every parents should have the number of 2 children. Any number below or above this would lead to decrease or increase in the population, which is called \"Replacement Rate\". Now many countries already have a fertility rate below 2. \n

\nA fertility rate below 2 could lead to population decline. However, this is not the main problem. The problem is the increasing median age of the population which may result in several economic challenges for society.\n

Click the next \"Restart Animation\" button to see how the median age has risen since 1950 for the world.

\nThis notebook visualizes the key properties, total population, fertility rate, and median age of this development from different perspectives. You can explore multiple interactive visualization and learn a lot about world population.
\n

Have fun!

\n😀","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"

Key property - fertility rate

🤰","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"

\nFertility rate is the magic number that shapes our world's future population. When the fertility rate is 2, the population stays steady, as each couple is effectively replacing themselves. When it falls below 2, the population starts to shrink. But when it rises above 2, population is likely to rise too. This delicate balance makes the fertility rate a key player in the grand story of our global population dynamics.\n

Population development simulator (with constant fertility rate)

The following chart \"Population development simulator (with constant fertility rate)\" shows the effect of fertility rate for each country of the world. The values for the future are calculated using the formula:
currentPopulationSize / 2 * fertilityRate.
We start with a common currentPopulationSize of 100 for each country. First, choose whether the fertility rate should be below or above 2. Then, you can choose a country from the dropdown list, which is filterd based on the first selection. You will see that for countries with a fertility rate below 2, the population size shrinks with each generation, while for countries with a fertility rate above 2, the population grows with each generation.

Maybe try the following countries.

Home Country
Republic of Korea (South Korea)- lowest fertility rate
Tunisia - fertility rate of 2
Niger - highest fertility rate

The following chart visualizes the same data like the one above, but shows the data in a slightly different approach. Instead of bars, each person is represented by a human figure, providing a more tangible and relatable representation of the shrinking population. (It just works for countries with a fertility rate below 2.)\n

World map with fertility rate

Relationship between fertility rate and population

- historical data and future projections (1950-2100)

Now that we understand how fertility rate influences population in general, let's have a look at fertility rate and population of the world again, but this time side-by-side. How did they change from 1950 until now, and might change until 2100?

While the global fertility rate has been steadily declining since the 1950s, the world population is projected to continue rising until approximately 2080 This is because the fertlilty rate is expected to remain above 2 until then. It's only when the fertility rate falls below 2 that we expect the population to level off and potentially decline slightly.

Global Fertility Rate and Population (1950-2100)

It is important to note that this is a global trend, and the situation varies significantly across different continents and countries, as the next chart will illustrate. While most continents are projected to experience population decline in the coming decades, Africa stands out as an exception, with forecasts predicting rapid population growth.

Choose a Continent from the dropdown and spot the difference!

Fertility Rate and Population by Continent (1950-2100)

Problem - Median Age

The following visualization illustrates how the median age has risen globally from 1950 to the present, and projections for its continued rise until 2100. The \"World\" selection provides a global overview, while the \"Continent\" selection breaks down the trend by continent. Finally, the \"Country\" selection focuses on the 12 countries with the highest median age each year, showcasing the diversity of aging patterns worldwide.

You can start the animation by clicking the \"Play\" button, which will then change to a \"Pause\" button. You can also use the slider to select a specific year and view the data for that point in time.

Median Age for World / Continents / Top 12 Countries from 1950 to 2100

Relationship of fertility rate and median age

\nThe following animated bubble chart illustrates the relationship between fertility rate and median age across different continents and countries from 1950 to 2100. Each bubble represents a country, with its size indicating the population size.

\n\n

Interaction Possibilities:

\n Play Button: Click the \"Play\" button to animate the chart through time.
\n Slider: Use the slider to manually select a specific year between 1950 and 2100.\n
\n Continent Filter: Choose a specific continent from the dropdown menu to focus the visualization on countries within that region.\n
Hover: Hover over a circle of a country to see the data for country name, median age, fertiliy rate, and population.

By exploring the chart and its interactive features, you can gain insights into how fertility rates and median ages have evolved over time and how they vary across different parts of the world.

Median age and fertility rate from 1950 to 2100

China

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"{// Larissa\n// Function to create a markLine specification\nfunction createMarkLine(dataFilter, strokeDash) {\n return vl.markLine({ strokeWidth: 3, strokeDash: strokeDash }, { interpolate: 'monotone' })\n .data(justCountries.filter(dataFilter))\n .encode(\n vl.x().fieldO('Time').title('Year'),\n vl.y().fieldQ(vl.repeat(\"repeat\")),\n vl.color().value('#ee1c25')\n )\n .width(400);\n}\n\n// Filters for the data\nconst pre2020Filter = d => d.Location == 'China' && d.Time <= 2020 && d.Time % 10 === 0;\nconst post2020Filter = d => d.Location == 'China' && d.Time >= 2020 && d.Time % 10 === 0;\n\nreturn vl.layer(\n createMarkLine(pre2020Filter, null),\n createMarkLine(post2020Filter, [5, 5])\n )\n .repeat([\"TotalFertilityRate\", \"TPopulation\"])\n .title({ text: 'Fertility rate and population of China from 1950 to 2100', anchor: 'start', offset: 16 })\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"### Annotation Graph Fertility rate and population of China from 1950 to 2100'\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1472,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"### Show median age for china ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"The chart clearly shows the upward trajectory of the median age over time, with a noticeable steepening of the curve as we approach the mid-21st century.\nThis visualization and dataset underscore the demographic shifts in China and the associated challenges of an aging population, providing critical insights for policymakers and researchers focusing on China's future demographic and economic planning.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1528,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"### Insights from the Graph\n\n#### Gender Distribution\n- The population pyramid indicates slight differences in population numbers between males and females in different age groups.\n- Generally, there are more males in the younger age groups, while females tend to live longer, leading to higher numbers in the older age groups.\n\n#### Demographic Trends\n- The graph can help identify trends such as an aging population, where the proportion of older adults (Senior category) is growing.\n- It also highlights potential future challenges such as supporting an aging population and maintaining a balanced workforce.\n\n#### Impact of Policies\n- Historical policies like the one-child policy have long-term effects on the population structure, visible in certain age cohorts.\n\n#### Future Projections\n- The shape of the pyramid helps in projecting future demographic changes. For instance, a shrinking base suggests declining birth rates.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1662,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1771,"value":"

Explore population on your own

Choose property for World / Continents / Top 15 Countries from 1950 to 2100

The following bar chart race visualization dynamically displays the either total population, fertility rate or median age from 1950 to 2100.

Interaction Possibilities:

\n Region Selection: Choose between \"World\", \"Continent\" or \"Country\" to view the population changes at the global, continental, or country level\n
\n Property Selection: Choose between \"Population\", \"Fertility Rate\" or \"Median Age\"\n
\n Play/Pause Button: Click the \"Play\" button to start the animation and see how the populations evolve. Click the \"Pause\" button to stop the animation at any point in time.\n
\n Slider: Drag the slider to manually control the year displayed, allowing you to examine the specific population values at any given time.\n

By exploring this visualization, you can easily compare the population trends and identify significant shifts in population dynamics throughout the years.

Dashboard for fertility rate and total population

For the following Dashboard it is recommended to click the \"Fullscreen\" button to see the visualizations side-by-side.

You can choose to view data for the entire world, specific continents, or individual countries using the first selection and the drop-down menu.

Now: Click the \"Fullscreen\" button to begin your exploration!

Prototype World Population

Introduction to the topic

Key property - fertility rate

Population development simulator (with constant fertility rate)

World map with fertility rate

Relationship between fertility rate and population

- historical data and future projections (1950-2100)

Global Fertility Rate and Population (1950-2100)

Fertility Rate and Population by Continent (1950-2100)

Problem - Median Age

Median Age for World / Continents / Top 12 Countries from 1950 to 2100

Relationship of fertility rate and median age

Median age and fertility rate from 1950 to 2100

China

Explore population on your own

Choose property for World / Continents / Top 15 Countries from 1950 to 2100

Dashboard for fertility rate and total population

Fertiliy Rate - Year ${date}
${currentFertilityRate}

\n

Population size - Year ${date}
${currentPopulation} Millions

\n

Data imports

Prototype World Population

Introduction to the topic

Key property - fertility rate

Population development simulator (with constant fertility rate)

World map with fertility rate

Relationship between fertility rate and population

- historical data and future projections (1950-2100)

Global Fertility Rate and Population (1950-2100)

Fertility Rate and Population by Continent (1950-2100)

Problem - Median Age

Median Age for World / Continents / Top 12 Countries from 1950 to 2100

Relationship of fertility rate and median age

Median age and fertility rate from 1950 to 2100

China

Explore population on your own

Choose property for World / Continents / Top 15 Countries from 1950 to 2100

Dashboard for fertility rate and total population

Fertiliy Rate - Year ${date} ${currentFertilityRate}

\n

Population size - Year ${date} ${currentPopulation} Millions

\n

Data imports

Fertiliy Rate - Year ${date}
${currentFertilityRate}

Population size - Year ${date}
${currentPopulation} Millions