34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Steven Luo | Observable"}] 3c:Ta99,

[NOTE]

Please make sure to Read ALL instructions carefully for each part of this assignment!

1. Please **fork this notebook** for this mini-project. Ensure that the notebook is made either _public_ or _unlisted_ in the settings. 2. Complete each question to the best of your ability, clearly marking which visualization and/or written answer corresponds to which question asked. 3. Your coded solutions **must use D3**. Other visualization libraries (.e.g Vega-Lite) or other code languages (e.g. Python) are not allowed. - You are allowed to use functions and modules created by other creators. For example, you can use Mike Bostock's Color Legend notebook to create your legends. 4. You are free to modify any datasets mentioned in this project, or introduce new datasets if it helps you with any explanations or visualizations. For datasets originating from this dataset, you are free to modify them in any way as long as 1) the preprocessing is performed here in JavaScript, or 2) you preprocessed the dataset elsewhere (e.g. a Python notebook or Google Colab notebook via Python). - If you modified the dataset elsewhere, **please make sure to explicitly mention in your write-up where and how to access the code; preprocessing the dataset without a way for us to verify will lead to penalties on your score**. - If you are introducing a new dataset from elsewhere, **please make sure to explicitly mention how to access the dataset**. 5. Please adhere to our AI policy for the class, which is provided on our course syllabus: > _... you can use generative AI tools to do the assignments in this class. If you use an AI to guide you in completing an assignment, you must **disclose which parts were generated by the AI**. Remember that you are responsible for any errors or inaccuracies in AI-generated content, and you must be able to explain all submitted work._ 6. Submit the URL of this notebook on Brightspace by the listed due date. ### Submission Details This assignment is due **Nov. 12th @ 11:59pm**. This submission expects a URL to your notebook that is either public or unlisted. Please be aware that we will grade notebooks based on the version of the notebook we receive at the submission deadline. This means that if you decide to modify your notebooks after the deadline, your changes may not be considered while grading. This policy also applies to late submissions as well.3d:Tb68,Your goal is to create **3 independent visualizations of the same datasets**, each one with the intent of answering the questions stated below. For each numbered question, you should be able to 1) create a data visualization that answers **all** of the questions specified, 2) provide a written analysis that extrapolates from your visualization and answers **all** of the questions specified, and 3) provide a written description of your thought process and why you think your solution is *appropriate* and *effective*. These are the 3 visualizations you should create: - **Visualization #1 [25pts]:** 1. How does the amount donated vs. amount received change over time for each country? 2. Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? 3. Are there countries that change their role over time? That is, they used to mostly send donations and turn into mostly receiving donations and vice-versa? 4. Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? - **Visualization #2 [25pts]:** Focus on the top 10 "Coalesced Purposes" of donations (in terms of amount of disbursement across all countries and all time). What are the top 10 purposes of disbursements (in terms of total amount of disbursement) and how does their relative amount compare over time? E.g., are there purposes that tend to be prominent for a period of time and others that become more prominent during other periods? - **[Hint]**: looking at the graph one should be able to observe: “Ah! During these years donations were mostly about X but then there were way more donations about Y”. - **[Note]**: if the purpose is “UNSPECIFIED” it should be removed. - **Visualization #3 [25pts]:** Focusing exclusively on countries that receive donations, how do donations shift geographically over time? Do donations tend to be always in the same regions of the world over the years or they have been shifting over time? Can you build a visualization that shows the "history of donations" so that one can get a sense of which regions of the world have had more need for donations over the years? - **[Note 1]**: for this visualization you can, if you wish, use interaction (but you don’t have to). - **[Note 2]**: For this exercise you may want to review the lecture on geographical visualization in which we explain how you can visualize geographical data over time. - **[Note 3]**: if you want, you can aggregate data over a few years (say, group together data at 5 year intervals).

[NOTE]

It is okay to submit more than one solution for a given visualization problem if you think there are some competing solutions that work well. When you do that, make sure to compare the solutions by commenting on their advantages and disadvantages.

3e:T450,Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**: - **[10pts]**: Does the visualization answer the questions posed in the exercise? - **[10pts]**: Does the written answer & discussion the questions posed in the exercise? - **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference. The questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an evaluation tool in two main ways: 1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems. 2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.3f:Tdc6,// Net (received − donated) per country per year: net_by_year.get("India").get(1977) const net_by_year = d3.rollup( aid.flatMap(d => [ {country: d.recipient, year: d.year, amount: d.commitment_amount_usd_constant}, {country: d.donor, year: d.year, amount: -d.commitment_amount_usd_constant} ]), v => d3.sum(v, d => d.amount), d => d.country, d => d.year ); const years = d3.range(d3.min(aid, d => d.year), d3.max(aid, d => d.year) + 1); // Rank countries by total net (from net_donation) and split into 8 equal groups: 1 = biggest donors, 8 = biggest receivers const ranked = d3.sort(net_donation, d => d.net).map(d => d.country); const groups = d3.range(8).map(i => ranked.filter((c, j) => Math.floor(j * 8 / ranked.length) === i)); const x_scale = d3.scaleLinear() .domain(d3.extent(years)) .range([0, 650]); const container = d3.create("svg") .attr("width", 1000) .attr("height", 600); const chart = container.append("g") .attr("transform", "translate(100, 50)"); const fmt = (x) => d3.format("$~s")(x); chart.append("g") .attr("transform", "translate(0, 500)") .call(d3.axisBottom(x_scale).tickFormat(d3.format("d"))); chart.append("text") .attr("transform", "translate(325, 535)") .attr("text-anchor", "middle") .text("Year"); chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -250) .attr("y", -65) .attr("text-anchor", "middle") .text("Net Donation, Received − Donated ($)"); // Everything that changes with the slider goes in this group const plot = chart.append("g"); function draw(group) { const data = groups[group - 1].map(country => ({ country, values: years.map(year => ({year, net: net_by_year.get(country)?.get(year) ?? 0})) })); const y_scale = d3.scaleLinear() .domain(d3.extent([0, ...data.flatMap(d => d.values.map(v => v.net))])) .range([500, 0]) .nice(); const c_scale = d3.scaleOrdinal(data.map(d => d.country), d3.schemeTableau10); const line = d3.line() .x(d => x_scale(d.year)) .y(d => y_scale(d.net)); plot.selectAll("*").remove(); plot.append("text") .attr("text-anchor", "middle") .attr("font-weight", 700) .attr("transform", "translate(325, -25)") .text(`Net Donation Over Time (Group ${group} of 8)`); plot.append("g").call(d3.axisLeft(y_scale).tickFormat(fmt)); // Net-zero line plot.append("line") .attr("x1", 0).attr("x2", 650) .attr("y1", y_scale(0)).attr("y2", y_scale(0)) .attr("stroke", "black") .attr("stroke-dasharray", "4,3"); plot.append("text") .attr("x", 645).attr("y", y_scale(0) - 5) .attr("text-anchor", "end") .attr("font-size", 11) .text("net zero"); plot.selectAll("path.line") .data(data) .join("path") .attr("class", "line") .attr("fill", "none") .attr("stroke", d => c_scale(d.country)) .attr("stroke-width", 2) .attr("d", d => line(d.values)); // Legend const legend = plot.append("g") .attr("transform", "translate(665, 20)") .selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(0, ${i * 20})`); legend.append("rect").attr("width", 12).attr("height", 12).attr("fill", d => c_scale(d.country)); legend.append("text").attr("x", 18).attr("y", 10).attr("font-size", 12).text(d => d.country); } const slider = Inputs.range([1, 8], {label: "Net donation group", step: 1, value: 1}); slider.addEventListener("input", () => draw(slider.value)); draw(slider.value); display(slider); display(container.node());40:Tb92,1) provide a written analysis that extrapolates from your visualization and answers all of the questions specified, and - By grouping the countries by their net donation amount in 8 groups, sorted from the most negative to the most positive net donation amount, we can clearly see which countries mostly receive/donate and which countries have similar receive/donate amounts. In particular, groups 1 and 2 are countries that mostly donate, groups 3-6 are countries that have similar receive/donate amounts, and groups 7 and 8 are countries that mostly receive. - All countries in group 1 and 2 almost always donate, with only Canada who received huge amounts of donation in 1981 and 2022. Similarly, all countries in group 5-8 almost always receive, with only some minor exceptions such as Qatar, Saudi Arabia, Kuwait, and Korea who has select years where they donated. On the other hand, countries in group 3 and 4 are more dynamic. For instance, in group 3, Spain used to be a net receiver up to 1987 until it began to become a net donator ever since. Similarly, Finland used to be a net receiver up to 1990, and then it became a net donator. There are also two countries that generally had very inconsistent donation/receive behaviors: Italy and Australia. As seen in group 3 and 4, they have large spikes in either donations or receiving donations in select years without obvious trends. - A lot of countries have sudden increases or sudden decreases. Besides Italy and Australia mentioned before, net donator countries like the United States and Japan also had sudden but sustained periods in history where their donation amounts spiked (e.g. United States: between 1978 to 1983 and 1989 to 2003; Japan: between 1996 and 2000). We can also see numerous countries that have very sharp, mostly single year, spikes in either donation or receiving donations across the groups such as Luxembourg/Qatar in group 5, Saudi Arabia in group 6, and Kuwait in group 7. 2) provide a written description of your thought process and why you think your solution is appropriate and effective. - All four questions have the notion of change of time and hence either the x-axis of the figure has to be time or time has to be an interactive slider for users to control. Considering that the only metric that is needed in all four question is the net donation amount, I opted for using a simple line plot of net donation against time. However, since there are 47 unique countries that have either donated or received donation at least once, it would be too crowded to plot all 47 curves at the same time. Thus, I decided to create interactive buttons that filter the countries by 8 intervals of net donation amounts so we could limit each figure to only show at most 6 curves at each time. Each curve is encoded with a visually distinct color to make them clearly differentiable and a horizontal line is added to indicate a reference point for net zero donation.41:Tfad,// Focus on the top 10 “Coalesced Purposes” of donations (in terms of amount of disbursement across all countries and all time). What are the top 10 purposes of disbursements (in terms of total amount of disbursement) and how does their relative amount compare over time? E.g., are there purposes that tend to be prominent for a period of time and others that become more prominent during other periods? // [Hint]: looking at the graph one should be able to observe: “Ah! During these years donations were mostly about X but then there were way more donations about Y”. // [Note]: if the purpose is “UNSPECIFIED” it should be removed. const amount = (v) => d3.sum(v, d => d.commitment_amount_usd_constant); // Top 10 purposes by total amount over all years, leaving out "Sectors not specified" const purpose_totals = d3.rollup(aid, amount, d => d.coalesced_purpose_name); const top_purposes = d3.sort(purpose_totals, ([, total]) => -total) .filter(([purpose]) => purpose !== "Sectors not specified") .slice(0, 10).map(([purpose]) => purpose); // Each purpose's amount in a year divided by everything donated that year (all purposes) const year_totals = d3.rollup(aid, amount, d => d.year); const purpose_by_year = d3.rollup(aid, amount, d => d.coalesced_purpose_name, d => d.year); const years = d3.range(d3.min(aid, d => d.year), d3.max(aid, d => d.year) + 1); const data = top_purposes.map(purpose => ({ purpose, values: years.map(year => ({year, ratio: (purpose_by_year.get(purpose).get(year) ?? 0) / year_totals.get(year)})) })); const x_scale = d3.scaleLinear() .domain(d3.extent(years)) .range([0, 650]); const y_scale = d3.scaleLinear() .domain([0, d3.max(data, d => d3.max(d.values, v => v.ratio))]) .range([500, 0]) .nice(); const c_scale = d3.scaleOrdinal(top_purposes, d3.schemeTableau10); const line = d3.line() .x(d => x_scale(d.year)) .y(d => y_scale(d.ratio)); const container = d3.create("svg") .attr("width", 1050) .attr("height", 600); const chart = container.append("g") .attr("transform", "translate(100, 50)"); chart.append("g") .attr("transform", "translate(0, 500)") .call(d3.axisBottom(x_scale).tickFormat(d3.format("d"))); chart.append("text") .attr("text-anchor", "middle") .attr("font-weight", 700) .attr("transform", "translate(325, -25)") .text("Share of Each Year's Donations, Top 10 Purposes"); chart.append("text") .attr("transform", "translate(325, 535)") .attr("text-anchor", "middle") .text("Year"); chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -250) .attr("y", -55) .attr("text-anchor", "middle") .text("Share of Total Donations That Year"); chart.append("g") .call(d3.axisLeft(y_scale).tickFormat(d3.format(".0%"))); const lines = chart.selectAll("path.line") .data(data) .join("path") .attr("class", "line") .attr("fill", "none") .attr("stroke", d => c_scale(d.purpose)) .attr("stroke-width", 2) .attr("d", d => line(d.values)); // Legend: click a purpose to highlight it and fade the rest; click it again to show all equally let selected = null; const legend = chart.append("g") .attr("transform", "translate(665, 20)"); legend.append("text") .attr("y", -8) .attr("font-size", 12) .attr("font-weight", 700) .text("Purposes (click to highlight)"); const items = legend.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(0, ${i * 20})`) .style("cursor", "pointer") .on("click", (event, d) => { selected = selected === d.purpose ? null : d.purpose; const opacity = (e) => selected === null || selected === e.purpose ? 1 : 0.15; lines.attr("opacity", opacity); items.attr("opacity", opacity); lines.filter(e => e.purpose === selected).raise(); }); items.append("rect").attr("width", 12).attr("height", 12).attr("fill", d => c_scale(d.purpose)); items.append("text").attr("x", 18).attr("y", 10).attr("font-size", 12).text(d => d.purpose); display(container.node());42:Tad3,1) provide a written analysis that extrapolates from your visualization and answers all of the questions specified, and - The top 10 purposes of disbursements are: - Air transport - Rail transport - Industrial development - Power generation/non-renewable sources - RESCHEDULING AND REFINANCING - Import support (capital goods) - Social/ welfare services - Telecommunications - Power generation/renewable sources - Mineral/Metal prospection and exploration - First thing we can tell from the figure, without using the interactive select tool, is that there are very large spikes of certain purposes in select years. For instance, "Air transport" is a very dominant purpose of donation in the periods of 1980-1981, 1993-1994, and 1998-2002. Similarly, "Rescheduling and refinancing" had dominant peaks in 1989-1990 and 1992; "Import support" has a single peak in 1992; "Rail transport" has peaks in 2008-2010 and 2013. - Secondly, by using the interactive select tool to visualize particular purposes and the trends of their donation amount ratios over the years, we can identify couple of purposes that exhibited very clear trends of decrease or increase in donation ratio. For instance, both "Mineral/Metal prospection and exploration" and "Industrial development" contributed significant amounts of donation (approx. 10-15%) up to around 2000, then almost completed died off. On the other hand, "Social/welfare services" contributed very minimal amounts of donation up to around 2000 then became a relatively dominant purpose of donation since then and up to 2010. 2) provide a written description of your thought process and why you think your solution is appropriate and effective. - This question asks also for trends over time, hence either the x-axis should be time or there should be an interactive slider that controls the time. In terms of the metric, this question focused on the "ratio" among the top 10 purposes of disbursement. Given this, I was considering either an interactive pie chart with a slider that controls the year or another line plot that plots the ratio of a donation purpose against time. I decided to do the latter to keep things simple and to be able give users an immediate glance of the trend of ratios, instead of relying on a manual slider. Considering that showing 10 curves at the same time could make the figure hard to read as it is over clustered, i added a functionality where selecting a particular purpose in the legend will be able to highlight the curve and make all the other curves faded. This way, users can study the trend of a particular purpose while having all the other purposes in the background as comparative reference.43:T1736,// Focusing exclusively on countries that receive donations, how do donations shift geographically over time? Do donations tend to be always in the same regions of the world over the years or they have been shifting over time? Can you build a visualization that shows the “history of donations” so that one can get a sense of which regions of the world have had more need for donations over the years? // [Note 1]: for this visualization you can, if you wish, use interaction (but you don’t have to). // [Note 2]: For this exercise you may want to review the lecture on geographical visualization in which we explain how you can visualize geographical data over time. // [Note 3]: if you want, you can aggregate data over a few years (say, group together data at 5 year intervals). // Amount each country received in each year: received_by_year.get(1977).get("India") const received_by_year = d3.rollup(aid, v => d3.sum(v, d => d.commitment_amount_usd_constant), d => d.year, d => d.recipient); const max_received = d3.max(received_by_year.values(), m => d3.max(m.values())); const fmt = (x) => d3.format("$~s")(x); // Total donated, received and net (received − donated) per country over all years const donated_total = d3.rollup(aid, v => d3.sum(v, d => d.commitment_amount_usd_constant), d => d.donor); const received_total = d3.rollup(aid, v => d3.sum(v, d => d.commitment_amount_usd_constant), d => d.recipient); // World map; d3 expects clockwise exterior rings, so reverse rings of any feature that covers more than a hemisphere const world_map = await FileAttachment("countries-50m-geojson.json").json(); const reverseRings = (geom) => { if (geom.type === "Polygon") return {...geom, coordinates: geom.coordinates.map(r => r.slice().reverse())}; if (geom.type === "MultiPolygon") return {...geom, coordinates: geom.coordinates.map(p => p.map(r => r.slice().reverse()))}; return geom; }; const fixed_map = { ...world_map, features: world_map.features.map(f => d3.geoArea(f) > 2 * Math.PI ? {...f, geometry: reverseRings(f.geometry)} : f) }; // Match a map feature to its row in net_donation (aliases cover names that differ between the CSV and the map) const name_alias = {"Slovak Republic": "Slovakia", "Korea": "South Korea"}; const net_by_name = new Map(net_donation.map(d => [name_alias[d.country] ?? d.country, d])); const find_country = (f) => [f.properties.NAME, f.properties.ADMIN, f.properties.NAME_LONG] .map(n => net_by_name.get(n)).find(Boolean); const container3 = d3.create("svg") .attr("width", 1000) .attr("height", 600); const projection = d3.geoEquirectangular().fitSize([1000, 600], fixed_map); const path = d3.geoPath(projection); container3.append("g") .selectAll("path") .data(fixed_map.features) .join("path") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "#333") .attr("stroke-width", 0.5) .append("title") .text(f => { const d = find_country(f); return d ? `${d.country}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}\nNet (received − donated): ${fmt(d.net)}` : `${f.properties.NAME}\nNo data`; }); // One size scale for every year, so bubble sizes can be compared as the slider moves const r_scale = d3.scaleSqrt() .domain([0, max_received]) .range([0, 30]) const country_pos = new Map(fixed_map.features .map(f => [ find_country(f)?.country, f.properties.LABEL_X != null ? projection([f.properties.LABEL_X, f.properties.LABEL_Y]) : path.centroid(f) ]) .filter(([name]) => name)) const circle_layer = container3.append("g") .attr("fill", "steelblue") .attr("fill-opacity", 0.6) .attr("stroke", "white") .attr("stroke-width", 0.5); // --- Size legend (nested circles) --- const legend_values = [max_received / 4, max_received / 2, max_received].map(v => +v.toPrecision(2)); const size_legend = container3.append("g") .attr("transform", "translate(70, 480)") .attr("font-size", 10); size_legend.append("text") .attr("x", -r_scale(max_received)) .attr("y", -2 * r_scale(max_received) - 12) .attr("font-weight", 700) .text("Amount received"); size_legend.selectAll("g") .data(legend_values) .join("g") .call(g => g.append("circle") .attr("cy", v => -r_scale(v)) .attr("r", v => r_scale(v)) .attr("fill", "none") .attr("stroke", "#555")) .call(g => g.append("line") .attr("x2", r_scale(max_received) + 10) .attr("y1", v => -2 * r_scale(v)) .attr("y2", v => -2 * r_scale(v)) .attr("stroke", "#555") .attr("stroke-dasharray", "2,2")) .call(g => g.append("text") .attr("x", r_scale(max_received) + 14) .attr("y", v => -2 * r_scale(v)) .attr("dy", "0.35em") .text(v => fmt(v))); // --- Year slider above the map --- const map3 = d3.create("div"); const year_slider = Inputs.range(d3.extent(received_by_year.keys()), {label: "Year", step: 1, width: 880}); year_slider.querySelector("input[type=number]").style.flex = "0 0 60px"; // keep the year box small so the slider gets the width year_slider.addEventListener("input", () => update_circles(year_slider.value)); map3.append(() => year_slider); map3.append(() => container3.node()); // --- Draw circles for the selected year --- function update_circles(year) { const rows = Array.from(received_by_year.get(year) ?? [], ([country, amount]) => ( {country, amount, pos: country_pos.get(country)} )) .filter(d => d.pos && d.amount > 0) .sort((a, b) => b.amount - a.amount); circle_layer.selectAll("circle") .data(rows, d => d.country) .join(enter => enter.append("circle").call(c => c.append("title"))) .attr("cx", d => d.pos[0]) .attr("cy", d => d.pos[1]) .attr("r", d => r_scale(d.amount)) .call(c => c.select("title").text(d => `${d.country}\nReceived in ${year}: ${fmt(d.amount)}`)); } update_circles(year_slider.value); display(map3.node());44:T958,1) provide a written analysis that extrapolates from your visualization and answers all of the questions specified, and - History of donations from 1973 to 2013: - From 1973 to 1979, most donations were made to India, Thailand, and South Korea, with some proportions going to countries in South America such as Brazil, Columbia, and Chile. These few countries would also go on to consistently receive donations by a considerable amount in every year since then. - 1980-1981 had donations spread out also across Europe, Asia, and began to include Canada - 1981-1988 had most of the donations cluster around the South American and Asian countries mentioned in the 1973-1979 periods again. - 1989-1991 had a couple of European countries join in the mix, led by Poland and followed by countries like Hungary and Greece - 1992 saw significant amounts of donation sent to Poland, Kuwait, and India - 1993-2004 generally saw a the donations distributed across the Europe, South America, and Asia. - 2005-2013 the donations converged to only the three countries in South America, India and Thailand in Asia, and South Africa. - Generally speaking, Brazil, Columbia, and Chile from South America, South Korean, Thailand, and India from Asia are the 6 countries that consistently received donations throughout the years. Europe received donations within the period from approximately 1980 to 2004, while South Africa also became a consistent receiver since 1987. 2) provide a written description of your thought process and why you think your solution is appropriate and effective. - This questions asks for a visualization that can demonstrate the spatial distribution of donations over time. To demonstrate spatial distribution of donations, we must use the world map as choropleth map to show the geographical locations of the donations while displaying the absolute value of donations agnostic to the countries' sizes. To demonstrate the trend over time, I decided to use an interactive slider for the user to visualize the snapshot of the distribution at a given year. This way, the user can slowly slide across the years to get a quick sense of how the distribution of donations change of time, and if he/she wishes to, can look further into select periods of times to study closer how the donations distribute across the globe.45:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only-2.csv","type":"text/csv","lastModified":1794436165373,"size":8760387},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794536474524,"size":4177662},{"id":"9ddee0ecf695da84e1ddfca9817ae144e13503d3242f5552a584f8bae6e9245221f50bf066f6270e5d6e2ef554f1e17ca25a319757aa30851aee74b5c19cfbf5","href":"https://static.observableusercontent.com/files/9ddee0ecf695da84e1ddfca9817ae144e13503d3242f5552a584f8bae6e9245221f50bf066f6270e5d6e2ef554f1e17ca25a319757aa30851aee74b5c19cfbf5","name":"countries-50m-geojson.json","type":"application/json","lastModified":1794536558327,"size":4177843}] 38:{"id":"f25bad01d523b8cb","slug":"mini-project-2-temporal-data-visualization-due-nov-12th","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","thumbnail":"535487e70b84e6b1de0a613cd117fc773c1af07b09ab42dd979558cea83f61c8","access_level":"public","create_time":"$D2026-11-13T02:11:49.619Z","update_time":"$D2026-11-13T04:37:09.277Z","view_time":null,"first_public_time":"$D2026-11-13T04:37:21.930Z","has_unpublished_edits":null,"fork":{"id":"25807f4e14142959","slug":"2026-infovis-cse_project-2","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f488e406f6567848","login":"steven-luo","name":"Steven Luo","avatar_url":"https://avatars-next.observableusercontent.com/859fe95dafa1762ca0233e4d89fa3d3f8b9477d4279853023223d48d1429be4e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":376,"publish_version":376,"role":null,"authored":false,"authors":[{"type":"individual","id":"0dba273891387ea1","login":"steven-luo","name":"Steven Luo","avatar_url":"https://avatars-next.observableusercontent.com/859fe95dafa1762ca0233e4d89fa3d3f8b9477d4279853023223d48d1429be4e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f488e406f6567848","login":"steven-luo","name":"Steven Luo","avatar_url":"https://avatars-next.observableusercontent.com/859fe95dafa1762ca0233e4d89fa3d3f8b9477d4279853023223d48d1429be4e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","cells":[{"id":155,"value":"# Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"import { css } from \"@rk2546/infovis-cse-backend\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"---\n## Submission Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"---\n## About the Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"We have **2** datasets that you must use for this project:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"### Aid Data, Revisited\n\nThis spreadsheet is a simplified and reduced version of the AidData dataset. This dataset describes commitment information for over 1.5 million development finance activities funded between 1947 and 2013. The simplified dataset contains the following columns:\n\n- **`aiddata_id`**: unique ID of the commitment\n- **`aiddata_2_id`**: secondary unique ID\n- **`year`**: year of the commitment\n- **`donor`**: country providing the financial resource\n- **`recipient`**: country receiving the financial resource\n- **`commitment_amount_usd_constant`**: the total amount of financial resources provided\n- **`coalesced_purpose_code`**: categorization ID for the stated purpose of the commitment\n- **`coalesced_purpose_name`**: the purpose of the commitment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"### Country GeoData\n\nWe also have the GeoJSON data for countries, derived from data from Natural Earth. This GeoJSON is actually a TopoJSON that covers country boundaries at 1:50,000,000 scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"---\n## Grading Criteria","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"## Students' Workspace\n\n_From this point onward, you are free to modify the notebook in any way you see fit._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"const aid = FileAttachment(\"aiddata-countries-only - aiddata-countries-only-2.csv\").csv({typed:true});\ndisplay(Inputs.table(aid));\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"const donors = d3.rollup(aid, v => d3.sum(v, d => d.commitment_amount_usd_constant), d => d.donor);\nconst recipients = d3.rollup(aid, v => d3.sum(v, d => d.commitment_amount_usd_constant), d => d.recipient);\n\nconst net_donation = [];\nfor (const country of new Set([...donors.keys(), ...recipients.keys()])) {\n const donated = donors.get(country) ?? 0;\n const received = recipients.get(country) ?? 0;\n net_donation.push({country, donated, received, net: received - donated});\n};\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$40","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$42","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$44","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"## AI Usage Disclosure\n\nAll analysis and thought process responses are written entirely by hand. All three figures borrow significant amount of code from Milestone 1. All design choices of the figures are selected without AI assistant, this includes the figure type, the interactive elements, the grouping of elements, the color scheme, and the general structure of the figure. The code references from Milestone 1 and the design choices are then fed into Claude to generate the sketch of the code implementation. A manual review is done one the Claude generated code before pasting into this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"2"}} 33:null