31:Te8d,map = { const root = d3 .select(DOM.element('div')) .attr('class', 'map-root-container'); const tooltipDiv = root.append("div").attr("class", "map-tooltip"); const canvas = root .append('svg') .attr("width", '100%') .attr("viewBox", `0 0 ${width} ${height}`) .append('g') .attr('transform', 'translate(-40, 0)'); // // render mainland states // const states = canvas .selectAll("path") .data(topojson.feature(usJson, usJson.objects.states_20m_2017).features) .enter() .append('g') .attr('class', 'state') .on("mouseover", function(event, d) { mouseover(event, d, this, tooltipDiv); }) .on("mouseout", function(event, d) { mouseout(event, d, this, tooltipDiv); }); states .append("path") .attr("d", path) .attr("class", stateColorClass); // add labels with state abbreviation states .filter(d => !newEngland.includes(d.properties.STATEFP)) .append("text") .text(d => d.properties.STUSPS) .attr( 'class', d => `willhover${d.properties.STATEFP} ${ d.properties.STATEFP === '15' || d.properties.STATEFP === '72' ? 'outside-text' : '' }` ) .attr("transform", d => { if (!d.properties.dx) { return `translate(${path.centroid(d)})`; } else { return `translate(${parseInt(path.centroid(d)[0]) + parseInt(d.properties.dx)}, ${parseInt(path.centroid(d)[1]) + parseInt(d.properties.dy)})`; } }) .attr('dx', d => { if (d.properties.NAME === 'Florida') return -15; if (d.properties.NAME === 'Puerto Rico') return -20; if (d.properties.NAME === 'Louisiana') return -8; if (d.properties.NAME === 'Michigan') return -12; }) .attr("text-anchor", "middle") .attr('font-size', labelSize) .attr('font-weight', 'bold') .attr('fill', labelColor); // // render circles for new england states // const circleContainers = canvas .append('g') .attr('class', 'state-circles') .selectAll("g") .data(topojson.feature(usJson, usJson.objects.states_20m_2017).features) .enter() .filter(d => newEngland.includes(d.properties.STATEFP)) .append('g') .attr('class', 'new-england-circles states-clickable') .attr( "transform", d => `translate(${circlePos[d.properties.STATEFP].x}, ${circlePos[d.properties.STATEFP].y})` ) .on("mouseover", function(event, d) { mouseover(event, d, this, tooltipDiv); }) .on("mouseout", function(event, d) { mouseout(event, d, this, tooltipDiv); }); // circles circleContainers .append('circle') .attr('r', circleRadius) .attr("class", stateColorClass); // circle text labels circleContainers .append("text") .text(d => d.properties.STUSPS) .attr('dy', '5') .attr('class', d => `willhover${d.properties.STATEFP}`) .attr("text-anchor", "middle") .attr('font-size', labelSize) .attr('font-weight', 'bold') .attr('fill', labelColor); // // legend // const legend = canvas .append('g') .attr('class', 'legend') .attr('transform', 'translate(0, 0)'); legendData.forEach((d, i) => { const each = legend.append('g').attr('transform', () => { if (i === 0) return 'translate(90, 10)'; if (i === 1) return 'translate(415, 10)'; if (i === 2) return 'translate(700, 10)'; }); each .append('rect') .attr('class', `${d.colorClass} stroke-color`) .attr('width', 15) .attr('height', 15); each .append('text') .text(d.text) .attr('transform', 'translate(20, 12)'); }); return root.node(); }32:T7fc,mouseover = (event, d, _this, tooltipDiv) => { const fip = parseInt(d.properties.STATEFP); const stateData = data.find((d) => parseInt(d.fip) === fip); const { number_of_interns, State, intern_schools } = stateData; if (number_of_interns === 0) return; const [x, y] = d3.pointer(event); d3.select(_this).classed("hovered-state", true); let xPos, yPos; const isNewEnglandCircle = d3.select(_this).classed("new-england-circles"); const isStateOnRight = stateOnRight.includes(d.properties.STATEFP); const isStateOnLowerRight = stateOnLowerRight.includes(d.properties.STATEFP); const isStateOnLowerLeft = stateOnLowerLeft.includes(d.properties.STATEFP); if (isNewEnglandCircle) { xPos = `${circlePos[d.properties.STATEFP].x - 350}px`; yPos = circlePos[d.properties.STATEFP].y + "px"; } else if (isStateOnRight) { xPos = `${x - 350}px`; yPos = `${y}px`; } else if (isStateOnLowerRight) { xPos = `${x - 350}px`; yPos = `${y - 100}px`; } else if (isStateOnLowerLeft) { xPos = `${x}px`; yPos = `${y - 100}px`; } else { xPos = `${x}px`; yPos = `${y}px`; } tooltipDiv .html(() => { const schoolInternCount = {}; intern_schools.forEach((d) => { schoolInternCount[d] ? (schoolInternCount[d] += 1) : (schoolInternCount[d] = 1); }); const internPerSchoolString = Object.keys(schoolInternCount) .map( (d) => `

${schoolInternCount[d]} from ${d}

` ) .join(""); return `

${State.toUpperCase()}

${naepStar}

${number_of_interns} interns between 2017-2024 ${internPerSchoolString}

`; }) .transition() .duration(50) .style("left", xPos) .style("top", yPos) .style("opacity", 1); }33:T119b,geoAlbersUsaPr = function() { const epsilon = 1e-6; const lower48 = d3.geoAlbers(); // EPSG:3338 const alaska = d3 .geoConicEqualArea() .rotate([154, 0]) .center([-2, 58.5]) .parallels([55, 65]); // ESRI:102007 const hawaii = d3 .geoConicEqualArea() .rotate([157, 0]) .center([-3, 19.9]) .parallels([8, 18]); // XXX? You should check that this is a standard PR projection! const puertoRico = d3 .geoConicEqualArea() .rotate([66, 0]) .center([0, 18]) .parallels([8, 18]); let point, pointStream = { point: function(x, y) { point = [x, y]; } }, lower48Point, alaskaPoint, hawaiiPoint, puertoRicoPoint; function albersUsa(coordinates) { const x = coordinates[0], y = coordinates[1]; point = null; (lower48Point(x, y), point) || (alaskaPoint(x, y), point) || (hawaiiPoint(x, y), point) || (puertoRicoPoint(x, y), point); return point; } albersUsa.invert = function(coordinates) { const k = lower48.scale(), t = lower48.translate(), x = (coordinates[0] - t[0]) / k, y = (coordinates[1] - t[1]) / k; return (y >= .120 && y < .234 && x >= -.425 && x < -.214 ? alaska : y >= .166 && y < .234 && x >= -.214 && x < -.115 ? hawaii : y >= .204 && y < .234 && x >= .320 && x < .380 ? puertoRico : lower48 ).invert(coordinates); }; // A naïve multi-projection stream. // The projections must have mutually exclusive clip regions on the sphere, // as this will avoid emitting interleaving lines and polygons. albersUsa.stream = function(stream) { const lower48Stream = lower48.stream(stream), alaskaStream = alaska.stream(stream), hawaiiStream = hawaii.stream(stream), puertoRicoStream = puertoRico.stream(stream); return { point: function(x, y) { lower48Stream.point(x, y); alaskaStream.point(x, y); hawaiiStream.point(x, y); puertoRicoStream.point(x, y); }, sphere: function() { lower48Stream.sphere(); alaskaStream.sphere(); hawaiiStream.sphere(); puertoRicoStream.sphere(); }, lineStart: function() { lower48Stream.lineStart(); alaskaStream.lineStart(); hawaiiStream.lineStart(); puertoRicoStream.lineStart(); }, lineEnd: function() { lower48Stream.lineEnd(); alaskaStream.lineEnd(); hawaiiStream.lineEnd(); puertoRicoStream.lineEnd(); }, polygonStart: function() { lower48Stream.polygonStart(); alaskaStream.polygonStart(); hawaiiStream.polygonStart(); puertoRicoStream.polygonStart(); }, polygonEnd: function() { lower48Stream.polygonEnd(); alaskaStream.polygonEnd(); hawaiiStream.polygonEnd(); puertoRicoStream.polygonEnd(); } }; }; albersUsa.precision = function(_) { if (!arguments.length) return lower48.precision(); lower48.precision(_); alaska.precision(_); hawaii.precision(_); puertoRico.precision(_); return albersUsa; }; albersUsa.scale = function(_) { if (!arguments.length) return lower48.scale(); lower48.scale(_); alaska.scale(_ * .35); hawaii.scale(_); puertoRico.scale(_); return albersUsa.translate(lower48.translate()); }; albersUsa.translate = function(_) { if (!arguments.length) return lower48.translate(); const k = lower48.scale(), x = +_[0], y = +_[1]; lower48Point = lower48 .translate(_) .clipExtent([[x - .455 * k, y - .238 * k], [x + .455 * k, y + .238 * k]]) .stream(pointStream).point; alaskaPoint = alaska .translate([x - .307 * k, y + .201 * k]) .clipExtent([ [x - .425 * k + epsilon, y + .120 * k + epsilon], [x - .214 * k - epsilon, y + .234 * k - epsilon] ]) .stream(pointStream).point; hawaiiPoint = hawaii .translate([x - .205 * k, y + .212 * k]) .clipExtent([ [x - .214 * k + epsilon, y + .166 * k + epsilon], [x - .115 * k - epsilon, y + .234 * k - epsilon] ]) .stream(pointStream).point; puertoRicoPoint = puertoRico .translate([x + .350 * k, y + .224 * k]) .clipExtent([[x + .320 * k, y + .204 * k], [x + .380 * k, y + .234 * k]]) .stream(pointStream).point; return albersUsa; }; return albersUsa.scale(1070); }34:T892,naepStar = ` `35:[{"id":"1bd9cefa0d41aa8add07e0003f03e5ca411a2ff54ca145c6f750cc25450795b27bd7de831eb5046db4cd9cc14bdfcf2bba247e9af0bc06bc01b722e72df91d55","href":"https://static.observableusercontent.com/files/1bd9cefa0d41aa8add07e0003f03e5ca411a2ff54ca145c6f750cc25450795b27bd7de831eb5046db4cd9cc14bdfcf2bba247e9af0bc06bc01b722e72df91d55","name":"us.json","type":"application/json","lastModified":1619153516481.448,"size":747399}] 2f:{"title":"NAEP Internship Alumni Map","cells":[{"id":0,"value":"md`# NAEP Internship Alumni Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"Check out: https://naep-research.airprojects.org/Explore-Opportunities/Internship-Alumni","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`### Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"legendData = [\n {\n colorClass: 'color-2',\n text: 'Interns accepted from universities within state'\n },\n {\n colorClass: 'color-1',\n text: 'Applicants from universities within state'\n },\n {\n colorClass: 'color-0',\n text: 'No applicants'\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"usJson = JSON.parse(await FileAttachment(\"us.json\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"import { data } from '@fnick851/naep-internship-alumni-data'","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Helper`","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"mouseout = (event, d, _this, tooltipDiv) => {\n d3.select(_this).classed(\"hovered-state\", false);\n\n tooltipDiv\n .transition()\n .duration(50)\n .style(\"opacity\", 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"newEngland = [\"09\", \"10\", \"11\", \"24\", \"34\", \"44\", \"25\", \"33\", \"50\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"stateOnRight = [\n \"09\",\n \"10\",\n \"11\",\n \"13\",\n \"23\",\n \"24\",\n \"34\",\n \"36\",\n \"44\",\n \"25\",\n \"33\",\n \"37\",\n \"42\",\n \"45\",\n \"50\",\n \"51\",\n \"54\",\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"stateOnLowerRight = [\"12\", \"72\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"stateOnLowerLeft = [\"48\", \"15\", \"02\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"boundary_states = [\"PR\", \"HI\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"circleRadius = 0.021 * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"offsetFromTop = 0.21 * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"rightcolOffset = 0.042 * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"leftcolOffset = rightcolOffset + 2 * circleRadius","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"vertSpacing = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"circlePos = {\n return {\n \"09\": {\n x: width - rightcolOffset,\n y: offsetFromTop\n },\n \"10\": {\n x: width - leftcolOffset,\n y: offsetFromTop + circleRadius + vertSpacing\n },\n \"11\": {\n x: width - rightcolOffset,\n y: offsetFromTop + 2 * (circleRadius + vertSpacing)\n },\n \"24\": {\n x: width - leftcolOffset,\n y: offsetFromTop + 3 * (circleRadius + vertSpacing)\n },\n \"34\": {\n x: width - rightcolOffset,\n y: offsetFromTop + 4 * (circleRadius + vertSpacing)\n },\n \"44\": {\n x: width - leftcolOffset,\n y: offsetFromTop + 5 * (circleRadius + vertSpacing)\n },\n \"25\": {\n x: width - rightcolOffset,\n y: offsetFromTop + 6 * (circleRadius + vertSpacing)\n },\n \"33\": {\n x: width - leftcolOffset,\n y: offsetFromTop + 7 * (circleRadius + vertSpacing)\n },\n \"50\": {\n x: width - rightcolOffset,\n y: offsetFromTop + 8 * (circleRadius + vertSpacing)\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"projection = geoAlbersUsaPr()\n .scale(width)\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"labelSize = '12px'","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"function labelColor(d) {\n const { hasIntern, applicantOnly, none } = stateStatus(d);\n\n if (none || boundary_states.includes(d.properties.STUSPS)) return '#002462';\n if (hasIntern || applicantOnly) return 'white';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"function stateColorClass(d) {\n let colorClass = '';\n const { hasIntern, applicantOnly, none } = stateStatus(d);\n\n if (hasIntern) colorClass = 'color-2';\n if (applicantOnly) colorClass = 'color-1';\n if (none) colorClass = 'color-0';\n return `${colorClass} stroke-color`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"function stateStatus(d) {\n const found = data.find(state => state.fip === d.properties.STATEFP);\n const hasIntern = found.number_of_interns > 0;\n const applicantOnly =\n found.number_of_applicants > 0 && found.number_of_interns === 0;\n const none =\n found.number_of_applicants === 0 && found.number_of_interns === 0;\n return { hasIntern, applicantOnly, none };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = (4 / 7) * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"md`### Image`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}