34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Simone Wang | 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:T1b49,**Takeaway:** 1. How does the amount donated vs. amount received change over time for each country? - **Australia:** donations have been stable and consistent throughout the years, while received amount has a few peaks and very inconsistent. - **Austria:** donations have been consistent except for 1973, 1975 and 1984. Received aids up to 100M and inconsistent. - **Belgium:** donations have been consistent except for a period between 1980 and 1992, while it has received only twice in 1980 and 1981. - **Brazil:** donated up to 1M thrice in 2007, 2008 and 2010, while receiving consistent amounts around 1B every year. - **Canada:** donations consistent around 100M through all years, while receiving amounts very few and inconsistent. - **Chile:** donated very small amounts up to 100K only between 2002 and 2010, while receiving consistent amounts around 100M every year. - **Colombia:** donated up to 100K thrice in 2007, 2008 and 2010, while receiving consistent amounts growing from 100M to around 1B every year. - **Cyprus:** donated only once in 2005 around 1K, while receiving consistent amounts around 10M up to 2004. - **Czech Republic:** received up to 100M in the 90s and decreasing until stopping in 2005, while donating small amounts up to 1M from 1996. - **Denmark:** donations consistent around 100M and decreasing to around 10M in the last years, while it has received only twice in 1980 and 1984. - **Estonia:** received consistent amounts around 10M from 1991 to 2004, while donating only twice in 2001 and 2002 up to 100K. - **Finland:** received up to 100M only in its first years (1983, 1984 and 1986), then donations consistent around 10M. - **France:** donations consistent around 100M with a peak up to 1B in 2012 and 2013, while it has received only twice in 1980 and 1981. - **Germany:** donations consistent around 1B with peaks up to 10B in 1989, 1990, 1992 and 1995, while basically never receiving. - **Greece:** received up to 100M only in a few years between 1980 and 1991, then donations consistent around 1M from 2002. - **Hungary:** received consistent amounts around 100M from 1990 to 2004, while donating very few times up to 100K after 2005. - **Iceland:** received only once in 1980 around 10M, while donating only in 2012 and 2013 up to 100K. - **India:** never donated, while receiving consistent amounts around 1B every year. - **Ireland:** received up to 100M in a few years up to 2002, then donations consistent around 10M from 2000. - **Italy:** donations consistent around 100M with a peak up to 1B in 1995, while receiving very few and inconsistent amounts up to 1B. - **Japan:** donations consistent around 1B with peaks up to 10B in 1997 and 1999, while receiving up to 100M only in a few years in the 80s. - **Korea:** received inconsistent amounts around 1B every year until 2004, then donations up to 100M from 2006. - **Kuwait:** donations around 100M until 1989 and then very few, while receiving very little except for a huge peak up to 10B in 1992. - **Latvia:** never donated, while receiving consistent amounts around 10M from 1990 to 2004. - **Liechtenstein:** donations consistent around 100K, while it has received only once meaningfully in 1981 around 10M. - **Lithuania:** never donated, while receiving consistent amounts around 10M from 1991 to 2004. - **Luxembourg:** received only twice in 1993 and 2002 up to 100M, while donations consistent around 10M from 2001. - **Monaco:** donated only between 2006 and 2008 up to 1M, while never receiving. - **Netherlands:** donations consistent around 100M and decreasing to around 10M in the last years, while never receiving. - **New Zealand:** received only twice in 1980 and 1982 up to 100M, while donations small and consistent around 1M. - **Norway:** donations consistent around 100M through all years, while receiving only in a few years around 1980 and 1992 up to 100M. - **Poland:** never really donated, while receiving very inconsistent amounts with peaks up to 10B in 1985, 1989, 1990, 1992 and 1995. - **Portugal:** received up to 100M only in a few years in the 80s, then donations consistent around 1M from 1996. - **Qatar:** received small amounts around 1M with a peak up to 1B in 1997, while donating only once in 2007 around 100M. - **Romania:** never donated, while receiving consistent amounts around 100M from 1992 to 2004. - **Saudi Arabia:** donations around 100M from 1977 to 1987 then stopped, while receiving inconsistent amounts with a peak up to 1B in 1999. - **Slovak Republic:** received consistent amounts around 100M from 1993 to 2004, while donating very few times up to 100K after 2005. - **Slovenia:** received consistent amounts around 10M from 1992 to 2004, while donating only twice in 2010 and 2013 up to 100K. - **South Africa:** never donated, while receiving consistent amounts growing up to around 1B from 1987. - **Spain:** received up to 100M only between 1980 and 1982, then donations consistent around 100M from 1989. - **Sweden:** donations consistent around 100M with a peak up to 1B in 1989, while it has received only twice in 1980 and 1981. - **Switzerland:** donations consistent around 100M through all years, while basically never receiving. - **Taiwan:** received inconsistent amounts up to 1B mostly in the 80s and around 2000, while donating small amounts up to 10M from 2006. - **Thailand:** never really donated, while receiving consistent amounts around 1B every year with a peak up to 10B in 1997. - **United Arab Emirates:** donated only in 1976 up to 100M and in 2010-2012 around 1M, while receiving inconsistent amounts up to 100M. - **United Kingdom:** donations consistent around 1B with a few valleys in 1979, 1981 and 1985, while it has received only twice in 1980 and 1981. - **United States:** donations consistent around 1B with peaks up to 10B in 1980, 1981, 1992, 1994 and 1999, while receiving only once in 2007 around 100M. 2. Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? - **Mostly send:** United States, Japan, Germany, United Kingdom, France, Netherlands, Sweden, Norway, Denmark, Switzerland, Belgium, Spain, Finland, Monaco. - **Mostly receive:** India, Thailand, Brazil, Colombia, Korea, Poland, South Africa, Chile, Romania, Hungary, Czech Republic, Taiwan, Cyprus, Slovak Republic, Lithuania, Latvia, Estonia, Slovenia, Qatar, United Arab Emirates, Kuwait, Saudi Arabia. - **Similar amount:** Australia, Austria, Italy, Canada. 4. 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? 5. Are there countries in which you can find a sudden increase (“peak”) or a sudden decrease (“valley”)?40:T124c,var dims = { width: 700, height: 400, margin: 60 } var chartSvg = d3.create("svg") .attr("width", dims.width + 3 * dims.margin) .attr("height", dims.height + 2 * dims.margin); var chart = chartSvg.append("g") .attr("transform", `translate(${dims.margin}, ${dims.margin - 20})`) .attr("width", dims.width) .attr("height", dims.height); var x = d3.scaleLinear() .domain([minYear, maxYear]) .range([0, dims.width]); const yMax = d3.max(countriesByYear, c => d3.max(c.years, y => Math.max(y.donated, y.received)) ); const formatMoney = v => { const units = [[1e12, "T"], [1e9, "B"], [1e6, "M"], [1e3, "K"]]; for (const [size, suffix] of units) { if (Math.abs(v) >= size) return d3.format("~g")(v / size) + suffix; } return d3.format("~g")(v); }; const yTicks = [0, ...d3.range(0, Math.ceil(Math.log10(yMax)) + 1) .map(p => 10 ** p) .filter(v => v <= yMax)]; const y = d3.scaleSymlog() .domain([0, yMax]) .range([dims.height, 0]); chart.append("g") .attr("transform", `translate(0, ${dims.height})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); chart.append("g") .call(d3.axisLeft(y).tickValues(yTicks).tickFormat(formatMoney)); const country = countriesByYear.find(c => c.name === selectedCountry); const series = [ { key: "donated", color: "steelblue", values: country.years.map(d => ({ year: d.year, value: d.donated })) }, { key: "received", color: "orange", values: country.years.map(d => ({ year: d.year, value: d.received })) } ]; const line = d3.line() .x(d => x(d.year)) .y(d => y(d.value)); chart.selectAll(".series") .data(series) .join("path") .attr("class", "series") .attr("fill", "none") .attr("stroke", d => d.color) .attr("stroke-width", 2) .attr("d", d => line(d.values)); chart.append("text") .attr("x", dims.width / 2) .attr("y", dims.height + dims.margin - 20) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Year"); chart.append("text") .attr("x", -dims.height / 2) .attr("y", -40) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Amount (USD)"); chart.append("text") .attr("x", dims.width / 2) .attr("y", -20) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Aid Donated vs. Received by " + selectedCountry); const legend = chart.append("g") .attr("transform", `translate(${dims.width + 10}, 0)`); const legendItem = legend.selectAll(".legend-item") .data(series) .join("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 20})`); legendItem.append("line") .attr("x1", 0) .attr("x2", 20) .attr("y1", 0) .attr("y2", 0) .attr("stroke", d => d.color) .attr("stroke-width", 2); legendItem.append("text") .attr("x", 28) .attr("y", 0) .attr("dy", "0.35em") .attr("font-size", 12) .text(d => d.key === "donated" ? "Donated" : "Received"); // Tooltip const focus = chart.append("g") .style("display", "none") .style("pointer-events", "none"); focus.append("line") .attr("class", "guide") .attr("y1", 0) .attr("y2", dims.height) .attr("stroke", "#999") .attr("stroke-dasharray", "3,3"); const dots = focus.selectAll(".dot") .data(series) .join("circle") .attr("class", "dot") .attr("r", 4) .attr("fill", d => d.color); const tip = focus.append("g"); const tipBox = tip.append("rect") .attr("width", 150) .attr("height", 58) .attr("rx", 4) .attr("fill", "white") .attr("stroke", "#ccc"); const tipText = tip.append("text") .attr("x", 8) .attr("y", 18) .attr("font-size", 12); chart.append("rect") .attr("width", dims.width) .attr("height", dims.height) .attr("fill", "transparent") .on("pointerenter", () => focus.style("display", null)) .on("pointerleave", () => focus.style("display", "none")) .on("pointermove", event => { const [mx] = d3.pointer(event); const year = Math.max(minYear, Math.min(maxYear, Math.round(x.invert(mx)))); const d = country.years.find(v => v.year === year); const px = x(year); focus.select(".guide").attr("x1", px).attr("x2", px); dots .attr("cx", px) .attr("cy", s => y(d[s.key])); tipText.selectAll("tspan") .data([ `${year}`, `Donated: ${formatMoney(d.donated)}`, `Received: ${formatMoney(d.received)}` ]) .join("tspan") .attr("x", 8) .attr("dy", (t, i) => i === 0 ? 0 : 16) .attr("font-weight", (t, i) => i === 0 ? "bold" : null) .text(t => t); const boxX = px + 160 > dims.width ? px - 160 : px + 10; tip.attr("transform", `translate(${boxX}, 10)`); });41:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1793983627867,"size":4177662},{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata.csv","type":"text/csv","lastModified":1793983618197,"size":8760387}] 38:{"id":"e217359c78dcaf0c","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-06T05:39:00.493Z","update_time":"$D2026-11-12T20:40:15.269Z","view_time":null,"first_public_time":"$D2026-11-12T18:38:45.628Z","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":1,"starred":false,"owner":{"type":"team","id":"f69902d3b40eb164","login":"simone-wang-nyu","name":"Simone Wang","avatar_url":"https://avatars-next.observableusercontent.com/b6eff45e5e70c638ea72ba770b415bbe9c83d07de24b0c626be5df9c9e823393","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":491,"publish_version":491,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b9bfe1236286fab","login":"simone-wang-nyu","name":"Simone Wang","avatar_url":"https://avatars-next.observableusercontent.com/b6eff45e5e70c638ea72ba770b415bbe9c83d07de24b0c626be5df9c9e823393","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f69902d3b40eb164","login":"simone-wang-nyu","name":"Simone Wang","avatar_url":"https://avatars-next.observableusercontent.com/b6eff45e5e70c638ea72ba770b415bbe9c83d07de24b0c626be5df9c9e823393","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":188,"value":"## Dataset EDA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"const aidData = FileAttachment(\"aiddata.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"display(Inputs.table(aidData.slice(0, 5), {layout: \"auto\"}))","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"const countriesData = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"display(countriesData)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"### How many distinct countries in `aidData`?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"const distinctAidCountries = new Set([\n ...aidData.map(d => d.donor),\n ...aidData.map(d => d.recipient)\n])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"display(distinctAidCountries)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"## Visualization #1\n\n1. How does the amount donated vs. amount received change over time for each country?\n2. Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send?\n3. 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?\n4. Are there countries in which you can find a sudden increase (“peak”) or a sudden decrease (“valley”)?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"**Main Idea:** Use a multi-line chart (https://observablehq.com/@d3/multi-line-chart/2) with 2 lines to be exact, where one describes the amount donated and the other the amount received. Display one country at a time and use a select field to pick which country to visualize. The x-axis channels the year variable while the y-axis is a scaleLog displaying the 2 amounts (the last tick of the domain is the max amount either donated or received across all countries, so the y-scale is consistent when switching country via select). To make the 2 lines more intuitive, make sure to pick 2 distinct colors to style them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"**Previous Idea:** Use a multi-line chart (https://observablehq.com/@d3/multi-line-chart/2) where each country is represented by a line. Use year as x-axis and a balance variable as y-axis, derived from (donated - received). I thought of using a color channel but having 47 distinct colors matching the countries on the chart is too much, therefore a single color is fine. I also thought of putting all 47 in a multi-select with checkboxes (https://medium.com/geekculture/creating-multi-select-dropdown-with-checkbox-in-react-792ff2464ef3) to let users decide which noise to keep and what goes away. That’s because my first concern when ideating the chart is having lines overlapping with others, especially when many countries throughout the years have balance equal to zero.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"### Data Transformation\n\n1. For each country, group by year and sum all donations and amount received per year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"const [minYear, maxYear] = d3.extent(aidData, d => +d.year);\nconst years = d3.range(minYear, maxYear + 1);\n\nconst donatedBy = d3.rollup(aidData, v => d3.sum(v, d => +d.commitment_amount_usd_constant), d => d.donor, d => +d.year);\nconst receivedBy = d3.rollup(aidData, v => d3.sum(v, d => +d.commitment_amount_usd_constant), d => d.recipient, d => +d.year);\n\nconst countriesByYear = [...distinctAidCountries].sort().map(name => ({\n name,\n years: years.map(year => ({\n year,\n donated: donatedBy.get(name)?.get(year) ?? 0,\n received: receivedBy.get(name)?.get(year) ?? 0,\n }))\n}));\n\ndisplay(countriesByYear)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"### Data Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"const selectedCountry = view(Inputs.select(countriesByYear.map(d => d.name), {\n label: \"Country\",\n value: \"Italy\"\n}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"display(chartSvg.node())","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"

AI Disclosure

Used Claude for formatMoney, yTicks and the tooltip

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"2"}} 33:null