2c:null 2d:["$","title",null,{"children":"German POW Distribution | Yotam Rubin | Observable"}] 32:T18a7,chart2 = { // Set chart dimensions. const width = 960; const height = 600; const path = d3.geoPath(); const formatNumber = d3.format(",.0f"); // Set minimum and maximum values. const minVal = 0; const maxVal = 100; // Set color gradient. const lowColor = '#e6e6e6'; const highColor = '#22c8a3'; // Calculate continuous gradient value. const gradient = d3.scaleLinear().domain([0, 100]).range([lowColor, highColor]); // Calculate binned color value. function binLookup(applicants) { if (applicants == 0) { return "#E6E6E6"; } else if (applicants > 0 && applicants < 10000) { return "#72DCC4"; } else if (applicants >= 5 && applicants < 20000) { return "#22C8A3"; } else if (applicants >= 10 && applicants < 30000) { return "#199277"; } else if (applicants >= 20 && applicants < 40000) { return "#147661"; } else if (applicants >= 50000) { return "#105B4B"; } } // Applicant data is stored in this array. Line breaks indicate the absence of applications from one or more states (missing states can be added if represented in a new dataset). const stateData = [ // AZ { id: '04', state: 'az', applicants: Math.floor((Math.random() * 50000) + 10000)}, // CA { id: '06', state: 'ca', applicants: Math.floor((Math.random() * 50000) + 10000)}, // CO { id: '08', state: 'co', applicants: Math.floor((Math.random() * 50000) + 10000)}, // CT { id: '09', state: 'ct', applicants: Math.floor((Math.random() * 50000) + 10000)}, // DE { id: '10', state: 'de', applicants: Math.floor((Math.random() * 50000) + 10000)}, // DC { id: '11', state: 'dc', applicants: Math.floor((Math.random() * 50000) + 10000)}, // FL { id: '12', state: 'fl', applicants: Math.floor((Math.random() * 50000) + 10000)}, // GA { id: '13', state: 'ga', applicants: Math.floor((Math.random() * 50000) + 10000)}, // HI { id: '15', state: 'hi', applicants: Math.floor((Math.random() * 50000) + 10000)}, // IL { id: '17', state: 'il', applicants: Math.floor((Math.random() * 50000) + 10000)}, // IN { id: '18', state: 'in', applicants: Math.floor((Math.random() * 50000) + 10000)}, // IA { id: '19', state: 'ia', applicants: Math.floor((Math.random() * 50000) + 10000)}, // KS { id: '20', state: 'ks', applicants: Math.floor((Math.random() * 50000) + 10000)}, // LA { id: '21', state: 'la', applicants: Math.floor((Math.random() * 50000) + 10000)}, // MD { id: '24', state: 'md', applicants: Math.floor((Math.random() * 50000) + 10000)}, // MA { id: '25', state: 'ma', applicants: Math.floor((Math.random() * 50000) + 10000)}, // MI { id: '26', state: 'mi', applicants: Math.floor((Math.random() * 50000) + 10000)}, // MN { id: '27', state: 'mn', applicants: Math.floor((Math.random() * 50000) + 10000)}, // MO { id: '29', state: 'mo', applicants: Math.floor((Math.random() * 50000) + 10000)}, // MT { id: '30', state: 'mt', applicants: Math.floor((Math.random() * 50000) + 10000)}, // NE { id: '31', state: 'ne', applicants: Math.floor((Math.random() * 50000) + 10000)}, // NJ { id: '34', state: 'nj', applicants: Math.floor((Math.random() * 50000) + 10000)}, // NM { id: '35', state: 'nm', applicants: Math.floor((Math.random() * 50000) + 10000)}, // NY { id: '36', state: 'ny', applicants: Math.floor((Math.random() * 50000) + 10000)}, // NC { id: '37', state: 'nc', applicants: Math.floor((Math.random() * 50000) + 10000)}, // ND { id: '38', state: 'nd', applicants: Math.floor((Math.random() * 50000) + 10000)}, // OH { id: '39', state: 'oh', applicants: Math.floor((Math.random() * 50000) + 10000)}, // OR { id: '41', state: 'or', applicants: Math.floor((Math.random() * 50000) + 10000)}, // PA { id: '42', state: 'pa', applicants: Math.floor((Math.random() * 50000) + 10000)}, // RI { id: '44', state: 'ri', applicants: Math.floor((Math.random() * 50000) + 10000)}, // TN { id: '47', state: 'tn', applicants: Math.floor((Math.random() * 50000) + 10000)}, // TX { id: '48', state: 'tx', applicants: Math.floor((Math.random() * 50000) + 10000)}, // UT { id: '49', state: 'ut', applicants: Math.floor((Math.random() * 50000) + 10000)}, // VT { id: '50', state: 'vt', applicants: Math.floor((Math.random() * 50000) + 10000)}, // VA { id: '51', state: 'va', applicants: Math.floor((Math.random() * 50000) + 10000)}, // WA { id: '53', state: 'wa', applicants: Math.floor((Math.random() * 50000) + 10000)}, // WI { id: '55', state: 'wi', applicants: Math.floor((Math.random() * 50000) + 10000)} ] // Return the number of applicants associated with a given state ID. function applicantLookup(stateID) { for (var i = 0; i < stateData.length; i++) { if (stateData[i].id == stateID) { return stateData[i].applicants; } } return 0; } // Return the state name associated with a given state ID. function stateLookup(stateID) { for (var i = 0; i < stateData.length; i++) { if (stateData[i].id == stateID) { return stateData[i].state; } } return false; } // Create base svg element. const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); // Bind data to map. svg.selectAll(".state") .data(topojson.feature(us, us.objects.states).features) .enter() .append("path") .attr('class', 'state') .attr('d', path) .attr("stroke", "white") // continuous gradient lookup // .attr("fill", function(d) { return gradient(applicantLookup(d.id)); }) .attr("fill", function(d) { return binLookup(applicantLookup(d.id)); }) .on('mouseover', function(d){ if (stateLookup(d.id)) { let name = stateLookup(d.id).toUpperCase() + " #POWs: " + applicantLookup(d.id); return document.getElementById('map').innerHTML = name; } else { return document.getElementById('map').innerHTML = "No Data"; } }); return svg.node(); }33:[] 30:{"id":"e4ce0252c4501e2b","slug":"german-pow-distribution","title":"German POW Distribution","thumbnail":"d34efb0bdf39b51b57db59d65ba1a114c12de977be13eab9297c0842d248b362","access_level":"public","create_time":"$D2018-10-24T08:36:56.630Z","update_time":"$D2018-10-24T08:46:08.647Z","view_time":null,"first_public_time":"$D2018-10-24T08:46:01.937Z","has_unpublished_edits":null,"fork":{"id":"14be65a467f8d382","slug":"2019-nafp-applicants-choropleth","title":"2019 NAFP Applicants (Choropleth)","owner":{"id":"3675d480a310dd27","login":"audreymgu","name":"Audrey Gu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f51bfbb1cdfad36e","login":"yotamr","name":"Yotam Rubin","avatar_url":"https://avatars-next.observableusercontent.com/45d7abac906ce5d31e676811ab5d11df369415551a0a28058fa0e8b44c0f96c0","tier":"starter_2024","bio":""},"version":462,"publish_version":462,"role":null,"authored":false,"authors":[{"type":"individual","id":"cbba93cae7a7a1b5","login":"yotamr","name":"Yotam Rubin","avatar_url":"https://avatars-next.observableusercontent.com/45d7abac906ce5d31e676811ab5d11df369415551a0a28058fa0e8b44c0f96c0","tier":null,"bio":""}],"members":[{"type":"individual","id":"cbba93cae7a7a1b5","login":"yotamr","name":"Yotam Rubin","avatar_url":"https://avatars-next.observableusercontent.com/45d7abac906ce5d31e676811ab5d11df369415551a0a28058fa0e8b44c0f96c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"German POW Distribution","cells":[{"id":459,"value":"md`# German POW Distribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"html\n`\n\n\n

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"html`\n${DOM.download(await rasterize(chart), null, \"Download as PNG\")}\n${DOM.download(await serialize(chart), null, \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"