2c:null 2d:["$","title",null,{"children":"2019 NAFP Applicants (Bubble) | Audrey Gu | Observable"}] 32:T1167,chart = { // Set chart dimensions. const width = 960; const height = 600; const path = d3.geoPath(); const formatNumber = d3.format(",.0f"); // Circle radius calculation. In order to proportionally display linear differences in a quadratic space (area), scaleSqrt() is used. const radius = d3.scaleSqrt().domain([0, 100]).range([0, 40]); // 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: 21}, // 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: 5}, // NY { id: '36', state: 'ny', applicants: 94}, // NC { id: '37', state: 'nc', applicants: 5}, // ND { id: '38', state: 'nd', applicants: 1}, // OH { id: '39', state: 'oh', applicants: 6}, // 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 "Not found"; } const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); // Style and append the base TOPOJSON map. svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#e6e6e6") .attr("d", path); // Style and append state lines. svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "1.25") .attr("stroke-linejoin", "round") .attr("d", path); // Style and append bubble marks. svg.append("g") .attr("class", "bubble") .selectAll("circle") .data(topojson.feature(us, us.objects.states).features .sort((a,b) => b.r - a.r)) .enter().append("circle") .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("r", function(d) { return radius(applicantLookup(d.id)); }) .attr("fill", "#22C8A3") .attr("opacity", "0.80") .attr("stroke", "#199277") .attr("stroke-width", "1.5") .attr("stroke-opacity", "1") .on('mouseover', function(d){ var name = stateLookup(d.id).toUpperCase() + " ID: " + d.id; return document.getElementById('map').innerHTML = name; }); return svg.node(); }33:[] 30:{"id":"98c30b563fe5eddf","slug":"d3-bubble-map","title":"2019 NAFP Applicants (Bubble)","thumbnail":"bad0777f7898c64465dfc329f59ee970f5a67bc13edf23683ccbbd2e5f2060bc","access_level":"public","create_time":"$D2018-07-09T19:28:08.838Z","update_time":"$D2018-07-16T14:47:58.653Z","view_time":null,"first_public_time":"$D2018-07-10T19:14:37.124Z","has_unpublished_edits":null,"fork":true,"stars":0,"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":341,"publish_version":341,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2019 NAFP Applicants (Bubble)","cells":[{"id":0,"value":"md\n`# 2019 NAFP Applicants (Bubble)\n\nApplicants for New America's Fellows Program in 2019, visualized 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

Unique numerical identifiers are assigned to each state, sorted in alphabetical order. Hovering over a bubble will display the associated state 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":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"