3f:null 40:["$","title",null,{"children":"Software Developer Salaries & Populations Choropleth | Chris Sabb | Observable"}] 46:T1c8c,{ // ************************************************************ // Declaration of SVG and Geographic Projection // ************************************************************ let width = 975; let height = 610; let svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .on("click", reset); // ======== Geographic projection of the United States ======== let proj = d3.geoAlbersUsa().fitSize([width, height], stateShapes); let path = d3.geoPath().projection(proj); // stateShapes specific pathing // ************************************************************ // Create Color Scale // ************************************************************ let color_scale = d3 .scaleQuantile() .domain( Array.from( swe_state_incomes, ([key, value]) => value[selected_income_stat] ) ) .range(d3.schemeGreens[8]); // ************************************************************ // Map Creation and Styling // ************************************************************ let map = svg.append("g"); let axes_labels = svg.append("g").style("font-size", "12px"); let states = map.append("g"); states .selectAll("path.state") .data(united_states) .join("path") .attr("d", path) .attr("fill", (o) => color_scale( swe_state_incomes.get(o.properties.name)[selected_income_stat] ) ) .attr("stroke-width", "1") .attr("stroke", "lightgray") .attr("id", (o) => state_abbrev.get(o.properties.name)) // ======== State Pointer Events ======== .on("pointerenter", function (event, d) { d3.select(this).raise().attr("stroke-width", 1); d3.select(this).attr("stroke", "black"); axes_labels.text(""); displayStats(event, d); }) .on("pointerleave", function () { d3.select(this).attr("stroke", "lightgray"); d3.select(this).attr("stroke-width", 1); }) // ======== State Tippy ======== .each(function (d) { tippy(this, { content: `

${d.properties.name}

`, allowHTML: true, theme: "light-border" }); }) // ======== State onClick Events ======== .on("click", clicked); // ************************************************************ // City Markers // ************************************************************ let cities = cityData .filter((o) => o.population > 140000 /* City population of Asheville, NC */) .filter((o) => proj([o.longitude, o.latitude])); cities.forEach(function (o) { let [x, y] = proj([o.longitude, o.latitude]); o.x = x; o.y = y; }); let max = d3.max(cities.map((o) => o.population)); let circle_group = map.append("g"); circle_group .selectAll("circle.city") .data(cities) .join("circle") .attr("cx", (o) => o.x) .attr("cy", (o) => o.y) .attr("r", (o) => 12 * (o.population / max) ** 0.5) // ======== Circle Colors ======== .attr("fill", "gold") .attr("fill-opacity", 0.5) .attr("stroke-width", 0.5) .attr("stroke", "black") // ======== City Pointer Events ======== .on("pointerenter", function (event, d) { // highlight this city d3.select(this).raise().attr("stroke", "black"); d3.select(this).attr("stroke-width", 1); // highlight its state const state = abbrev_state.get(d.name.split(", ")[1]); const abbrev = state_abbrev.get(state); d3.select("#" + abbrev) .raise() .attr("stroke", "black"); d3.select("#" + abbrev) .attr("stroke-width", 1) .attr("stroke", "black"); }) .on("pointerleave", function (event, d) { const state = abbrev_state.get(d.name.split(", ")[1]); const abbrev = state_abbrev.get(state); d3.select(this).attr("stroke", "black"); d3.select(this).attr("stroke-width", 0.5); d3.select("#" + abbrev) .attr("stroke-width", 1) .attr("stroke", "lightgray"); }) // ======== City Tippy ======== .each(function (d) { const stat = swe_metro_incomes.has(d.name) ? swe_metro_incomes.get(d.name)[selected_income_stat] : "no data"; const symbol = selected_income_stat != "employment" ? stat == "no data" ? "" : "$" : ""; tippy(this, { content: `

City: ${d.name}

Population: ${d.population.toLocaleString( "en-US" )}

${new Map( Array.from(labels, ([k, v]) => [v, k]) ).get(selected_income_stat)}: ${symbol}${stat.toLocaleString( "en-US" )}

`, allowHTML: true, theme: "light-border" }); }); // ************************************************************ // Display Statistics Function // ************************************************************ function displayStats(event, d) { axes_labels .append("foreignObject") .attr("width", 200) .attr("height", 200) .append("xhtml:body").html(`
State: ${d.properties.name}
Employment: ${swe_state_incomes .get(d.properties.name) ["employment"].toLocaleString("en-US")}
Median: $${swe_state_incomes .get(d.properties.name) ["median"].toLocaleString("en-US")}
10th Percentile: $${swe_state_incomes .get(d.properties.name) ["tenth_percentile"].toLocaleString("en-US")}
90th Percentile: $${swe_state_incomes .get(d.properties.name) ["ninetieth_percentile"].toLocaleString("en-US")} `); } // ************************************************************ // Mike Bostock's "Zoom to Bounding Box" code. Bostock's // notebook and this code can be found at: // https://observablehq.com/@d3/zoom-to-bounding-box // ************************************************************ function clicked(event, d) { const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); states.transition().style("fill", null); d3.select(this).transition(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); } const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); function zoomed(event) { const { transform } = event; map.attr("transform", transform); map.attr("stroke-width", 1 / transform.k); } function reset() { axes_labels.text(""); states.transition().style("fill", null); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } svg.call(zoom); // end of Mike Bostock's code svg.node().scale = color_scale; return svg.node(); }47:T50c,state_abbrev = { const abbrevs = new Map([ ["Alabama", "AL"], ["Alaska", "AK"], ["Arizona", "AZ"], ["Arkansas", "AR"], ["California", "CA"], ["Colorado", "CO"], ["Connecticut", "CT"], ["Delaware", "DE"], ["Florida", "FL"], ["Georgia", "GA"], ["Hawaii", "HI"], ["Idaho", "ID"], ["Illinois", "IL"], ["Indiana", "IN"], ["Iowa", "IA"], ["Kansas", "KS"], ["Kentucky", "KY"], ["Louisiana", "LA"], ["Maine", "ME"], ["Maryland", "MD"], ["Massachusetts", "MA"], ["Michigan", "MI"], ["Minnesota", "MN"], ["Mississippi", "MS"], ["Missouri", "MO"], ["Montana", "MT"], ["Nebraska", "NE"], ["Nevada", "NV"], ["New Hampshire", "NH"], ["New Jersey", "NJ"], ["New Mexico", "NM"], ["New York", "NY"], ["North Carolina", "NC"], ["North Dakota", "ND"], ["Ohio", "OH"], ["Oklahoma", "OK"], ["Oregon", "OR"], ["Pennsylvania", "PA"], ["Rhode Island", "RI"], ["South Carolina", "SC"], ["South Dakota", "SD"], ["Tennessee", "TN"], ["Texas", "TX"], ["Utah", "UT"], ["Vermont", "VT"], ["Virginia", "VA"], ["Washington", "WA"], ["West Virginia", "WV"], ["Wisconsin", "WI"], ["Wyoming", "WY"] ]); return abbrevs; }48:[{"id":"a3487fb6c29475282893bdd264a8155d60fea40c9f248acb74abd735fda5d3fc1e2fe1f828c6c6792a996b712a225fa4e19179b1ecf3da325db3f6cc714035cb","href":"https://static.observableusercontent.com/files/a3487fb6c29475282893bdd264a8155d60fea40c9f248acb74abd735fda5d3fc1e2fe1f828c6c6792a996b712a225fa4e19179b1ecf3da325db3f6cc714035cb","name":"swe_state_incomes.csv","type":"text/csv","lastModified":1688791163254.293,"size":14382},{"id":"c3f113ca58ae9717e40fa0aed5da7413bbfee62ebe822e841a30c0894d158569e814eeff424da9e0bd9f4325e83fe326088efec56b371c6d01b17cf10df0fd85","href":"https://static.observableusercontent.com/files/c3f113ca58ae9717e40fa0aed5da7413bbfee62ebe822e841a30c0894d158569e814eeff424da9e0bd9f4325e83fe326088efec56b371c6d01b17cf10df0fd85","name":"swe_metro_incomes-2.csv","type":"text/csv","lastModified":1688791312413.497,"size":71954}] 44:{"id":"3eec4cd79ab059d9","slug":"swe-salaries","title":"Software Developer Salaries & Populations Choropleth","thumbnail":"e19368fc811a948cfb39a54da9b9726d36ca312228f6981bfd1a5b191d03bab4","access_level":"public","create_time":"$D2023-07-08T04:37:33.581Z","update_time":"$D2023-07-08T19:10:57.976Z","view_time":null,"first_public_time":"$D2023-07-08T04:37:33.581Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d3b145490e6bde7c","login":"real-csabb","name":"Chris Sabb","avatar_url":"https://avatars-next.observableusercontent.com/12a6cc7102572f5a4ead1fba23d54d2ae89f9cabc8a5b1c7154fead63e01d287","tier":"starter_2024","bio":"CS & Stats student at UNC Asheville. Graduating May 2024 & pursuing data or machine learning engineering. I like big data viz.","following":false},"version":60,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2264c79b680a4ed7","login":"real-csabb","name":"Chris Sabb","avatar_url":"https://avatars-next.observableusercontent.com/12a6cc7102572f5a4ead1fba23d54d2ae89f9cabc8a5b1c7154fead63e01d287","tier":null,"bio":"CS & Stats student at UNC Asheville. Graduating May 2024 & pursuing data or machine learning engineering. I like big data viz.","following":false}],"members":[{"type":"individual","id":"2264c79b680a4ed7","login":"real-csabb","name":"Chris Sabb","avatar_url":"https://avatars-next.observableusercontent.com/12a6cc7102572f5a4ead1fba23d54d2ae89f9cabc8a5b1c7154fead63e01d287","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5c59c479c09e9442","slug":"notable-ddv-assignments","title":"Notable DDV Visualizations","owner":{"id":"d3b145490e6bde7c","login":"real-csabb","name":"Chris Sabb"}},"type":"notebook","body":{"titling":"auto","title":"Software Developer Salaries & Populations Choropleth","cells":[{"id":0,"value":"# Software Developer Salaries & Populations Choropleth\n## Created by Chris Sabb","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"## Introduction\n\nThis data is sourced from the U.S. Bureau of Labor Statistics and has been preprocessed to include employment, median salary, 10th percentile salary, and 90th percentile salary per state for all occupations relating to software development and mathematics.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"viewof selected_income_stat = Inputs.radio(labels, {\n label: \"Income Statistic\",\n value: \"median\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"swe_metro_incomes = {\n const data = await FileAttachment(\"swe_metro_incomes-2.csv\").csv({\n typed: true,\n array: true\n });\n\n return new Map(\n data\n .filter((o) => {\n return o[1] !== \"Employment(1)\" && o[2] !== null;\n })\n .map((row) => {\n return [\n row[0].replace(/\$.*\$/, \"\"),\n {\n employment: row[1],\n median: row[13],\n tenth_percentile: row[11],\n ninetieth_percentile: row[15]\n }\n ];\n })\n );\n}\n\n// .filter((o) => Array.from(swe_metro_incomes.keys()).includes(o.name));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"abbrev_state = new Map(Array.from(state_abbrev, ([k, v]) => [v, k]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"cityData = {\n return Array.from(\n await usCities.map((row) => ({\n name: row[\"name\"] + \", \" + state_abbrev.get(row[\"state\"]),\n population: row[\"population\"],\n latitude: row[\"latitude\"],\n longitude: row[\"longitude\"]\n }))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import { usCities } from \"@observablehq/us-county-datasets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"united_states = {\n return await stateShapes.features.filter((o) =>\n Array.from(swe_state_incomes.keys()).includes(o.properties.name)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"labels = new Map([\n [\"Employment\", \"employment\"],\n [\"Median\", \"median\"],\n [\"10th Percentile\", \"tenth_percentile\"],\n [\"90th Percentile\", \"ninetieth_percentile\"]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"swe_state_incomes = {\n let data = await FileAttachment(\"swe_state_incomes.csv\").csv({\n typed: true,\n array: true\n });\n\n return new Map(\n data\n .filter((o) => {\n return o[1] !== \"Employment(1)\" && o[2] !== null;\n })\n .map((row) => {\n return [\n row[0].replace(/\$.*\$/, \"\"),\n {\n employment: row[1],\n median: row[13],\n tenth_percentile: row[11],\n ninetieth_percentile: row[15]\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":12,"value":"import { stateShapes } from \"@observablehq/us-county-datasets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"tippy = require(\"tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"