2c:null 2d:["$","title",null,{"children":"2019 NAFP Applicants (Choropleth) | Audrey Gu | Observable"}] 32:T127a,chart = { // 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 < 5) { return "#72DCC4"; } else if (applicants >= 5 && applicants < 10) { return "#22C8A3"; } else if (applicants >= 10 && applicants < 20) { return "#199277"; } else if (applicants >= 20 && applicants < 30) { return "#147661"; } else if (applicants >= 30) { 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: 2}, // CA { id: '06', state: 'ca', applicants: 44}, // CO { id: '08', state: 'co', applicants: 8}, // CT { id: '09', state: 'ct', applicants: 5}, // DE { id: '10', state: 'de', applicants: 1}, // DC { id: '11', state: 'dc', applicants: 68}, // FL { id: '12', state: 'fl', applicants: 4}, // GA { id: '13', state: 'ga', applicants: 3}, // HI { id: '15', state: 'hi', applicants: 1}, // IL { id: '17', state: 'il', applicants: 21}, // IN { id: '18', state: 'in', applicants: 3}, // IA { id: '19', state: 'ia', applicants: 2}, // KS { id: '20', state: 'ks', applicants: 1}, // LA { id: '21', state: 'la', applicants: 2}, // MD { id: '24', state: 'md', applicants: 25}, // MA { id: '25', state: 'ma', applicants: 22}, // MI { id: '26', state: 'mi', applicants: 6}, // MN { id: '27', state: 'mn', applicants: 1}, // MO { id: '29', state: 'mo', applicants: 1}, // MT { id: '30', state: 'mt', applicants: 2}, // NE { id: '31', state: 'ne', applicants: 1}, // NJ { id: '34', state: 'nj', applicants: 8}, // NM { id: '35', state: 'nm', applicants: 2}, // NY { id: '36', state: 'ny', applicants: 105}, // NC { id: '37', state: 'nc', applicants: 5}, // ND { id: '38', state: 'nd', applicants: 1}, // OH { id: '39', state: 'oh', applicants: 7}, // OR { id: '41', state: 'or', applicants: 4}, // PA { id: '42', state: 'pa', applicants: 11}, // RI { id: '44', state: 'ri', applicants: 2}, // TN { id: '47', state: 'tn', applicants: 3}, // TX { id: '48', state: 'tx', applicants: 9}, // UT { id: '49', state: 'ut', applicants: 1}, // VT { id: '50', state: 'vt', applicants: 2}, // VA { id: '51', state: 'va', applicants: 21}, // WA { id: '53', state: 'wa', applicants: 14}, // WI { id: '55', state: 'wi', applicants: 2} ] // 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() + " ID: " + d.id; return document.getElementById('map').innerHTML = name; } else { return document.getElementById('map').innerHTML = "No Data"; } }); return svg.node(); }33:[] 30:{"id":"14be65a467f8d382","slug":"2019-nafp-applicants-choropleth","title":"2019 NAFP Applicants (Choropleth)","thumbnail":"18903b3a286e61360aa8fa54c16ce9d216be29fec7e700cfee5e16b872eb46a3","access_level":"public","create_time":"$D2018-07-12T15:59:11.342Z","update_time":"$D2018-08-01T15:20:08.444Z","view_time":null,"first_public_time":"$D2018-07-13T19:05:50.857Z","has_unpublished_edits":null,"fork":{"id":"98c30b563fe5eddf","slug":"d3-bubble-map","title":"2019 NAFP Applicants (Bubble)","owner":{"id":"3675d480a310dd27","login":"audreymgu","name":"Audrey Gu"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3675d480a310dd27","login":"audreymgu","name":"Audrey Gu","avatar_url":"https://avatars-next.observableusercontent.com/d9cb91417359ba49773c7b3e024995312bf954a543e97ac5019c4164d5769ef4","tier":"starter_2024","bio":"Multi-disciplinary designer presently located in DC."},"version":448,"publish_version":448,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd483890aaeb1b0e","login":"audreymgu","name":"Audrey Gu","avatar_url":"https://avatars-next.observableusercontent.com/d9cb91417359ba49773c7b3e024995312bf954a543e97ac5019c4164d5769ef4","tier":null,"bio":"Multi-disciplinary designer presently located in DC."}],"members":[{"type":"individual","id":"bd483890aaeb1b0e","login":"audreymgu","name":"Audrey Gu","avatar_url":"https://avatars-next.observableusercontent.com/d9cb91417359ba49773c7b3e024995312bf954a543e97ac5019c4164d5769ef4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2019 NAFP Applicants (Choropleth)","cells":[{"id":0,"value":"md\n`# 2019 NAFP Applicants (Choropleth)\n\nA chloropeth map visualizing applicants for New America's Fellows Program in 2019 by state. Based on @mbostock's county population visualization.`","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

TOPOJSON assigns unique numerical identifiers to each state, sorted in alphabetical order. Hovering over a state populated with data will display its associated identifier in this code block.\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"