28:null 29:["$","title",null,{"children":"USAID over the Decades | Marjolein Oostrom | Observable"}] 2f:T2b12,map = { // a "projection" lets us visualize the 3d Earth surface in 2d (going from latitude/longitutde to x/y pixel positions) const image_orig = 10 var current_country = "" const projectionTranslator = d3.geoNaturalEarth1() .fitSize([width, height], countries); // and try to fit it into the space nicely // setup our project to be able to draw our geographic state outlines (aka paths - a series of points connected by lines) const pathRenderer = d3.geoPath().projection(projectionTranslator); // setup a wrapper node to hold our map (with SVG, which knows how to draw paths) const svg = d3 .select(DOM.element('svg')) .attr('width', width) .attr('height', height) .attr('style', "font-family: 'Lato';") // define the clipPath svg.selectAll("clipPath") // define a clip path .data(countries.features) .join("clipPath") .attr("id", d => d.properties.NAME.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s+/g, '')) .attr("test", d=> console.log(d.properties.NAME.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s+/g, ''))) .append("circle") // shape it as an ellipse .attr('cx', d => pathRenderer.centroid(d)[0]) .attr('cy', d => pathRenderer.centroid(d)[1]) .attr("r", (width/image_orig)/2) // set the x radius const relevant_countries = countries.features.filter(function(d) { return d.properties.NAME in countryLookup; }) // draw each state const map = svg.append("g").attr("id", "map") // setup a container node to hold each state map.selectAll("path") .data(countries.features) // the features contain the name of the state and the path to draw its outline .join('path') // we'll draw an SVG node for each state in the dataset .attr("d", d => pathRenderer(d)) // this will call the projection function with each state's path .attr("fill", d=> d.properties.NAME == current_country? "blue": "#eee") .attr("stroke", "black") .attr("stroke-width", 1) .on("mouseover", (event, d) => (leafMouseOverCountry(event, d), event.stopPropagation())) .on("mouseout", (event, d) => (leafMouseOutCountry(event, d), event.stopPropagation())) .on("touchstart", (event, d) => leafMouseOver(event, d)) .on("touchend", (event, d) => (leafMouseOutCountry(event, d), event.stopPropagation())) // and now draw a label for each state too map .selectAll("image") .data(relevant_countries) // we're still working with the same geographic data .join("image") .attr("xlink:href", function(d) { return d.properties.NAME in countryLookup? countryLookup[d.properties.NAME].scr: ""}) // .attr("width", function(d) { return d.properties.NAME in countryLookup? width/10: 0}) .attr("height", function(d) { return d.properties.NAME in countryLookup? 1.2 *(width/image_orig): 0}) // the path.centroid function is a built in helper where d3 will give you the x/y coordinates for the // center of a path - this does well in most cases (but not all) .attr('x', d => pathRenderer.centroid(d)[0] -(width/image_orig)/2 ) .attr('y', d => pathRenderer.centroid(d)[1] - (width/image_orig)/2) .attr("clip-path", d => `url(#${d.properties.NAME.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s+/g, '')})`) .on("mouseover", (event, d) => (leafMouseOver(event, d), event.stopPropagation())) .on("mouseout", (event, d) => (leafMouseOut(event, d), event.stopPropagation())) .on("touchstart", (event, d) => leafMouseOver(event, d)) .on("touchend", (event, d) => (leafMouseOut(event, d), event.stopPropagation())) map.selectAll("text") .data(relevant_countries) // we're still working with the same geographic data .join("text") .attr('x', d => pathRenderer.centroid(d)[0]) .attr('y', d => pathRenderer.centroid(d)[1] + (width/image_orig)/2) .text("Hover here") .on("mouseover", (event, d) => (leafMouseOver(event, d), event.stopPropagation())) .on("mouseout", (event, d) => (leafMouseOutText(event, d), event.stopPropagation())) .on("touchstart", (event, d) => leafMouseOver(event, d)) .on("touchend", (event, d) => (leafMouseOutText(event, d), event.stopPropagation())) // tooltip + styling const toolTip = d3.select("body") .append("div") .attr('class', 'hover-info') .style("position", "absolute") .style("display", "none") .style("border-radius", "1px") .style("width", width) .style("height", "auto") // tooltip + styling const toolTip_country = d3.select("body") .append("div") .attr('class', 'name-info') .style("position", "absolute") .style("display", "none") .style("border-radius", "1px") .style("width", "auto") .style("height", "auto") function leafMouseOver(event, d){ d3.selectAll(".current").remove() current_country = d.properties.NAME const current_countries_data = countries.features.filter(function(d) { return d.properties.NAME== current_country; }) map.selectAll("path") // this will call the projection function with each state's path .attr("fill", d=> d.properties.NAME == current_country? "darkblue": "#eee") d3.selectAll('.hover-info') .style("display", "none" ) d3.selectAll("image") .transition() .duration(500) .style('opacity', .2) d3.selectAll('.triangle') .style("display", "none" ) var full_text = countryLookup[d.properties.NAME].long_text d3.select(event.target) .attr("fill", "darkred") map .selectAll(".current") .data(current_countries_data) // we're still working with the same geographic data .join("image") .attr("class", "current") .attr("xlink:href", function(d) { return d.properties.NAME in countryLookup? countryLookup[d.properties.NAME].scr: ""}) // .attr("width", function(d) { return d.properties.NAME in countryLookup? width/10: 0}) .attr("height", 150) .style("display", "block" ) // the path.centroid function is a built in helper where d3 will give you the x/y coordinates for the // center of a path - this does well in most cases (but not all) .attr('x', 0) .attr('y', 0) toolTip .style('top', `${event.pageY + 5}px`) .style('left', `0px`) .style('z-index', 100) .style("background-color", "white") .html( `${full_text}`, ) .style("display", "block") .append('div') .attr('class', 'triangle') .style("background-color", "white") //https://observablehq.com/@kthieb/interactive-map-to-visualize-world-population-data-tutori for triangle arrow d3.selectAll('.triangle') .style('top', `${-Math.sqrt(20) - 3}px`) .style('left', `${event.pageX }px `) // d3.select(`#${d.properties.NAME.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s+/g, '')}`) // .select('circle') // .attr("r", (width)) d3.select(event.target) // .attr("height", width/image_orig) // .attr('x', d => pathRenderer.centroid(d)[0] - (width/image_orig) ) // .attr('y', d => pathRenderer.centroid(d)[1] - (width/image_orig) -10) .style('opacity', .9) } function leafMouseOut(event, d){ d3.select(event.target) .attr("fill", "#eee") d3.selectAll("image") .style('opacity', 1) d3.selectAll(".current").remove() // d3.select(`#${d.properties.NAME.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s+/g, '')}`) // .select('circle') // .attr("r", (width/image_orig)/2) // d3.select(event.target) // .attr("height", 1.5 *width/image_orig) // // the path.centroid function is a built in helper where d3 will give you the x/y coordinates for the // // center of a path - this does well in most cases (but not all) // .attr('x', d => pathRenderer.centroid(d)[0] -(width/image_orig)/2 ) // .attr('y', d => pathRenderer.centroid(d)[1] - (width/image_orig)/2) // .style('opacity', 1) } function leafMouseOutText(event, d){ d3.selectAll("text") .attr("fill", "black") d3.selectAll("image") .style('opacity', 1) // d3.select(`#${d.properties.NAME.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s+/g, '')}`) // .select('circle') // .attr("r", (width/image_orig)/2) // d3.select(event.target) // .attr("height", 1.5 *width/image_orig) // // the path.centroid function is a built in helper where d3 will give you the x/y coordinates for the // // center of a path - this does well in most cases (but not all) // .attr('x', d => pathRenderer.centroid(d)[0] -(width/image_orig)/2 ) // .attr('y', d => pathRenderer.centroid(d)[1] - (width/image_orig)/2) // .style('opacity', 1) d3.selectAll(".current").remove() } function leafMouseOverCountry(event, d){ d3.select(event.target) .attr("fill", "#eee") d3.selectAll("image") .style('opacity', 1) var full_text = d.properties.NAME toolTip .style("display", "none" ) d3.select(event.target) .attr("fill", "darkblue") toolTip_country .style('top', `${event.pageY + 20}px`) .style('left', `${event.pageX + 20}px`) .html( `${full_text}`, ) .style("display", "block") .append('div') .attr('class', 'triangle') //https://observablehq.com/@kthieb/interactive-map-to-visualize-world-population-data-tutori for triangle arrow d3.selectAll('.triangle') .style('top', `${-Math.sqrt(20) - 3}px`) .style('left', `${event.pageX - 20}px `) d3.selectAll(".current").remove() } function leafMouseOutCountry(event, d){ d3.selectAll("image") .style('opacity', 1) toolTip .style("display", "none" ) d3.selectAll('.hover-info') .style("display", "none" ) d3.selectAll('.name-info') .style("display", "none" ) d3.selectAll('.triangle') .style("display", "none" ) d3.select(event.target) .attr("fill", "#eee") d3.selectAll(".current").remove() } return svg.node(); }30:T5db, // build a lookup table so we can go from state name to state abbreviation (for the labels on our map) countryLookup = { const lookup = {} for (const item of countryData_filtered) { if (item.country in lookup){ lookup[item.country].long_text = lookup[item.country].long_text + "" + item.year + "
" + item.short + ": " + item.long + "

Resources: The Enduring Struggle by John Norris, page " + item.page + " and Additional Resourcess" + "
Picture text: " + item.wiki_text + "
" + "Wikipedia Image Attribution" + "

" } else { lookup[item.country] = {'short': item.short, 'attribution': item.attribution, 'scr': item.wiki_src, 'long_text': "" + item.real_name +": " + item.year + "
" + item.short + ": " + item.long + "

Resources: The Enduring Struggle by John Norris, page " + item.page + " and Additional Resourcess" + "
Picture text: " + item.wiki_text + "
" + "Wikipedia Image Attribution" + "

" } } } return lookup }31:T42b, // setup a wrapper node to hold our map (with SVG, which knows how to draw paths) var svg = d3 .select(DOM.element('svg')) .attr('width', width) .attr('height', height) .attr('style', "font-family: 'Lato';") // define the clipPath svg.append("clipPath") // define a clip path .attr("id", "ellipse-clip") // give the clipPath an ID .append("ellipse") // shape it as an ellipse .attr("cx", 175) // position the x-centre .attr("cy", 100) // position the y-centre .attr("rx", 100) // set the x radius .attr("ry", 50); // set the y radius // draw clipped path on the screen svg.append("rect") // attach a rectangle .attr("x", 125) // position the left of the rectangle .attr("y", 75) // position the top of the rectangle .attr("clip-path", "url(#ellipse-clip)") // clip the rectangle .style("fill", "lightgrey") // fill the clipped path with grey .attr("height", 100) // set the height .attr("width", 200); // set the width 32:[{"id":"2b1ef77a8c2b28fb091d3cb4bf9827b742919502347db6aea3c69ac85138fd9b03ccd23d796b0d9d8c1caec39daa963dbfd26d5abeb39073897660834e0b971d","href":"https://static.observableusercontent.com/files/2b1ef77a8c2b28fb091d3cb4bf9827b742919502347db6aea3c69ac85138fd9b03ccd23d796b0d9d8c1caec39daa963dbfd26d5abeb39073897660834e0b971d","name":"state-data.csv","type":"text/csv","lastModified":1665356113893.476,"size":1247},{"id":"ce762fcf499712b62ee368d0ba2d1706c3423fc28d5156b84d1996287195d46f7274ac0e68cc22db4779b85aa8197bfb9e32ee77abf0e84f6cb923093bc1e8aa","href":"https://static.observableusercontent.com/files/ce762fcf499712b62ee368d0ba2d1706c3423fc28d5156b84d1996287195d46f7274ac0e68cc22db4779b85aa8197bfb9e32ee77abf0e84f6cb923093bc1e8aa","name":"us_foreignaid_greenbook.parquet","type":"application/octet-stream","lastModified":1666197015951.839,"size":1260874},{"id":"9af7102e76d99b084c9413ef7e21cfc616652ce287d1f4c971691306864ddf9d6bd891e16be31e46559dc0a009b43b7e2a2eb5ef65ef9094b41d93e6482f5294","href":"https://static.observableusercontent.com/files/9af7102e76d99b084c9413ef7e21cfc616652ce287d1f4c971691306864ddf9d6bd891e16be31e46559dc0a009b43b7e2a2eb5ef65ef9094b41d93e6482f5294","name":"significant_events_usaid@5.csv","type":"text/csv","lastModified":1666639146140.345,"size":53807}] 2c:{"id":"088639e54dd03d19","slug":null,"title":"USAID over the Decades","thumbnail":"a95752794c08d968e01c85ad316a0762a51e6e0bb7e798845363b74f89d2df95","access_level":"public","create_time":"$D2022-10-09T22:55:13.893Z","update_time":"$D2022-10-24T20:52:08.927Z","view_time":null,"first_public_time":"$D2022-10-24T19:27:20.765Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"83499e9a58cbfdf8","login":"marjolein","name":"Marjolein Oostrom","avatar_url":"https://avatars-next.observableusercontent.com/5d583caf7e4d9b8af7462b6fadfb421624df1b34eaff2afa0d301bfc15578c89","tier":"starter_2024"},"version":912,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c98da6526bcb1390","login":"marjolein","name":"Marjolein Oostrom","avatar_url":"https://avatars-next.observableusercontent.com/5d583caf7e4d9b8af7462b6fadfb421624df1b34eaff2afa0d301bfc15578c89","tier":null}],"members":[{"type":"individual","id":"c98da6526bcb1390","login":"marjolein","name":"Marjolein Oostrom","avatar_url":"https://avatars-next.observableusercontent.com/5d583caf7e4d9b8af7462b6fadfb421624df1b34eaff2afa0d301bfc15578c89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"USAID over the Decades","cells":[{"id":0,"value":"# USAID over the Decades\n \n The Enduring Struggle by John Norris is a fascinating look at the history of the U.S. Agency for International Development. All events depicted here are described in more depth at the page number as indicated by the tooltip. Any mistakes are, of course, my own, and I'm happy to update the visualization if anyone find errors. ","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"viewof date = Inputs.select(new Map([[\"Before 1950\", 1940], [\"1950's\", 1950], [\"1960's\", 1960], [\"1970's\", 1970], [\"1980's\", 1980], [\"1990's\", 1990], [\"2000's\", 2000], [\"2010's\", 2010]]), {value: 1960, label: \"Decade\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"Hover over images for more information. Change decade with above dropdown","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"First let's load up our map. We'll grab a topojson file - a special format of text file that encodes the outlines of the states as \"paths\". A \"path\" is simply a series of x/y coordinates in a specific order - think of it kind of like a connect-the-dots drawing from when you were a kid.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"// this is a topojson file which encodes the outline of each state, along with its name\n// we *could* attach this an load it via the Observable `FileAttachment` helper, but we happen to know it's URL online so we can\n// load it directly\npathsForMap = d3.json(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-states.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"You'll notice that if you open up this loaded it and click around that the information for each state is in an `Array` under `pathsForMap.features`. In additon, inside each the name is available under `properties.NAME`. However, that is kind of too long to draw on top of each state on a map. Wouldn't it be better to use the standard two-letter abbreviations?","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"## Build a table to lookup state abbreviations from their names","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"So let's take a small detour: we want to be able to go from the name of a state to its abbreviation. To do this we load a new CSV that includes columns for both these things.","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"countryData2 = FileAttachment(\"state-data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"dates = Array.from({length: 8}, (x, i) => i*10 + 1940 )","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"// function transform_imported data(date) {\n// return data.map(d => ({\n// name: d.name,\n// region: d.region,\n// x_axis_value: Date(Date.UTC(d.y_axis_value, 0, 1)),\n// y_axis_value: valueAt(d.y_axis_value, date),\n// radius_axis_value: valueAt(d.radius_axis_value, date)\n// }));\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"us_foreignaid_greenbook = FileAttachment(\"us_foreignaid_greenbook.parquet\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"countryData_filtered = significant_events_usaid.filter(d=> (d.year >= date & d.year <= date + 9) | (date == 1940 & d.year <1950))","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"significant_events_usaid = FileAttachment(\"significant_events_usaid@5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"Now we turn this into a dictionary - a list of key/value pairs - so we can lookup the abbreviation based on the state name.","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"data2 = {\n\n let recs = [] // used to store the reorganized records\n\n for (let record of countries.features){\n recs.push(record.properties)\n }\n \n return recs.sort()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"With this `countryLookup` lookup table we can now check the abbreviation for a state like this:","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"countryLookup['Haiti']","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"## Draw a Map\n\nNow we've got the data we need - a list of outlines of the states, and another dataset that lets us figure out the abbreviations for each state.","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"//https://observablehq.com/@kthieb/interactive-map-to-visualize-world-population-data-tutori\nstyles = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof toggle = Inputs.toggle({label: \"Active\", value: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"countries = topojson.feature(map_data, map_data.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"import {map_data} from \"@mcmcclur/world-population-bubble-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"import {wrap} from \"b747cf57f652b537\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"// setup a height for the map (remember Observable provides a `width` variable for you based on the browser size)\nheight = .8 *width","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"