31:T481,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); const circle = svg.append("g") .attr("stroke", "black") .selectAll("circle") .data(dataAt(1800), d => d.name) .join("circle") .sort((a, b) => d3.descending(a.population, b.population)) .attr("cx", d => x(d.income)) .attr("cy", d => y(d.lifeExpectancy)) .attr("r",3) .attr("r", d => radius(d.population)) .attr("fill", d => color(d.region)) .call(circle => circle.append("title") .text(d => [d.name, d.region].join("\n"))); return Object.assign(svg.node(), { update(data) { circle.data(data, d => d.name) .sort((a, b) => d3.descending(a.population, b.population)) .attr("cx", d => x(d.income)) .attr("cy", d => y(d.lifeExpectancy)) .attr("r",3) // .call(circle => circle.append("title") // .text(d => [d.name, d.region, '('+d.lifeExpectancy+')'].join("\n"))); .attr("r", d => radius(d.population)); } }); }32:T896,chart2 = { const path = d3.geoPath(); const ticks = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; let life = humanDevelopmentIndex path.projection(projection); const x = d3 .scaleLinear() .domain(d3.extent(color2.domain())) .range([width / 2 - 120, width / 2 + 120]); // Changed this const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const defs = svg.append("defs"); const g = svg.append("g").attr("transform", `translate(0,${height - 30})`); const linearGradient = defs .append("linearGradient") .attr("id", "linear-gradient"); linearGradient .selectAll("stop") .data( ticks.map((t, i, n) => ({ offset: `${(100) * i / n.length}%`, //Changed this color: color2(t) })) ) .enter() .append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); g.append("rect") .attr("height", 8) .attr("x", x(0)) .attr("width", x(100) - x(0)) .style("fill", `url(${location}#linear-gradient)`); g.append("text") .attr("class", "caption") .attr("x", x.range()[0] + 40) .attr("y", -6) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(`Human Development Index`); g.call( d3 .axisBottom(x) .tickSize(13) .tickValues(ticks) ) .select(".domain") .remove(); svg .append("g") .selectAll("path") .data(topojson.feature(world, world.objects.countries).features) .enter() .append("path") .attr("fill", d => life.has(d.id) && life.get(d.id)['HDI'] && life.get(d.id)['HDI'] !== ".." ? color2((life.get(d.id)['HDI'])*100) : "#e7e7e7" ) .attr("d", path) .append("title") .text(d => life.has(d.id) && life.get(d.id)['HDI'] ? format(life.get(d.id)) : "No data available for this country" ); svg .append("path") .datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }33:T8ae,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, alternate = false } = {}) { values = Array.from(values); const form = html``; let timer = null; let direction = 1; function start() { form.b.textContent = "Pause"; timer = delay === null ? requestAnimationFrame(tick) : setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (delay === null) cancelAnimationFrame(timer); else clearInterval(timer); timer = null; } function tick() { if (delay === null) timer = requestAnimationFrame(tick); if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; } form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && timer) form.b.onclick(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (timer) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); disposal(form).then(stop); return form; }34:[{"id":"f59824800f969ed7d57f38d1aac08a7e8f291268c07626d708c2a7e2dec6188cc9f234d0a6ceb91ea190f2f37be0f5575804284de806c6b12441eba768f8c7f4","href":"https://static.observableusercontent.com/files/f59824800f969ed7d57f38d1aac08a7e8f291268c07626d708c2a7e2dec6188cc9f234d0a6ceb91ea190f2f37be0f5575804284de806c6b12441eba768f8c7f4","name":"higest growth.png","type":"image/png","lastModified":1620611884421.251,"size":98504},{"id":"2f8c3be121ac4c48cad5cc5adbee1f232bf68b5085d807b901505e695aa5c5bbc5db465aa2fe587ba0eb77b63d3537748e538876f97becc53089ca2580b60f47","href":"https://static.observableusercontent.com/files/2f8c3be121ac4c48cad5cc5adbee1f232bf68b5085d807b901505e695aa5c5bbc5db465aa2fe587ba0eb77b63d3537748e538876f97becc53089ca2580b60f47","name":"life-expect.json","type":"application/json","lastModified":1620615329676.361,"size":702731}] 2f:{"title":"CSC 173 - Final Project","cells":[{"id":0,"value":"md`# CSC 173 - Final Project`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md `# How different is the life of a person in a developed high income nation vs a developing one?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## By Mikhael Oreiz & Moises Pantoja`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md `# What is the relationship between income per capita and life expectancy?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"viewof year = Scrubber(d3.range(1950, 2010, 0.05), {format: Math.floor, loop: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"legend = {\n const id = DOM.uid().id;\n return html`

${color.domain().map(region => html`${document.createTextNode(region)}`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md ` The positive correlation in income on life expectancy is clear. There are no countries on the high-income portion of the mapping with a life expectancy under 74. With the low-income nations there are no countries with a life expectancy above 64. With the middle-income nations there is a much broader range in life expectancy from 55 years to 75 depending on the nation’s priorities. In the middle income nations, the difference between nations with higher incomes makes a smaller difference in the total life expectancy and the nation's priorities play a larger role. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"FileAttachment(\"higest growth.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md ` A likely explanation for the large disparity for income per capita in developing nations vs. those that are developed is the massive difference in growth rates between the two. With this chart we see that the high growth nations are those that are impoverished and must procreate more to compensate. With the developed nations there is less reliance on the need of family labor to thrive so there is less growth in those nations. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md `The Human Development Index is used to determine how well a country will develop, based on three dimensions of criteria. Those three being life expectancy, income and knowledge. A country with a high human development index are the countries where people live a long and healthy life, have decent or high standard of living and higher education. In regards to the previous data, we can see from this map that that statements holds to be true as the countries who have a high index have the longer life expectancy, higher income and more enrollment in higher education.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"image = fetchImage(\"https://raw.githubusercontent.com/Mikoreiz/world-bank-gender-data/main/enrollment2.jpg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"md `No matter what income the region is, the primary school (ages 4-12) enrollments are high across the board. It is only when kids transition to the next levels of education can you start to see the gap widening. With this bar graph, we can see that regions with higher (tertiary) education enrollment tend to be the high income regions. High income regions have more institutions that provide higher education, and more people that can afford to pay for them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"data = FileAttachment(\"life-expect.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"color2 = d3.scaleSequential(d3.interpolateSpectral).domain([0, 120]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"humanDevelopmentIndex = {\n let [data, codes] = await Promise.all([\n d3.csv(\n \"https://raw.githubusercontent.com/Mikoreiz/world-bank-gender-data/main/human-development-index.csv\"\n ),\n d3.csv( \n \"https://gist.githubusercontent.com/jashkenas/59c7c820265537b941251dabe33a8413/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/country-codes.csv\"\n )\n ]);\n const lookup = new Map(codes.map(d => [d[\"alpha-3\"], d[\"country-code\"]]));\n \n return new Map(\n data\n .filter(d => lookup.has(d[\"Country Code\"]))\n .map(d => [lookup.get(d[\"Country Code\"]), d])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"function format(d) {\n if (d['HDI'] !== \"..\") {\n return `${d[\"Entity\"]}: ${(d['HDI']) * 100}`;\n } else {\n return `${d[\"Entity\"]}: No data available`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"function valueAt(values, year) {\n const i = bisectYear(values, year, 0, values.length - 1);\n const a = values[i];\n if (i > 0) {\n const b = values[i - 1];\n const t = (year - a[0]) / (b[0] - a[0]);\n return a[1] * (1 - t) + b[1] * t;\n }\n return a[1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"function dataAt(year) {\n return data.map(d => ({\n name: d.name,\n region: d.region,\n income: valueAt(d.income, year),\n population: valueAt(d.population, year),\n lifeExpectancy: valueAt(d.lifeExpectancy, year)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"bisectYear = d3.bisector(([year]) => year).left","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"height = 560","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"margin = ({top: 20, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"x = d3.scaleLog([200, 1e5], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"y = d3.scaleLinear([14, 86], [height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80, \",\"))\n // .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Income per capita (dollars) →\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n//.call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(\"↑ Life expectancy (years)\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"radius = d3.scaleSqrt([0, 5e8], [0, width / 24])","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"color = d3.scaleOrdinal(data.map(d => d.region), d3.schemeCategory10).unknown(\"black\").range([ \"orange\", \"red\",\"yellow\",\"green\", \"blue\",\"violet\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"chart.update(currentData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"options=[\"Region\",\"Income Level\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"currentData = dataAt(year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"height2 = width / 2 + 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"world = fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\").then(\n response => response.json()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"projection = d3\n .geoNaturalEarth1()\n .rotate([-10, 0])\n .fitExtent([[1, 1], [width - 1, height - 51]], { type: \"Sphere\" })\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"function fetchImage(src) {\n return new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.src = src;\n image.onload = () => resolve(image);\n image.onerror = reject;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}