31:T20ab,chart = { const root = d3.select(DOM.element('div')); const tooltipDiv = root .append("div") .attr("class", "map_tooltip") .style("opacity", 0); const g = root .append('svg') .attr("width", width) .attr("height", height) .append("g") .attr("class", "states"); const projection = d3 .geoAlbersUsaPr() .scale(width) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); const levelThreshold = [187, 246]; // color scale const colorClasses = d3.range(3).map(i => "color" + i); const threshold = d3 .scaleThreshold() .domain(levelThreshold) .range(colorClasses); // level judge const level = d3 .scaleThreshold() .domain(levelThreshold) .range(['Below Basic', 'NAEP Basic', 'NAEP Proficient']); // pair data with state id const dataByFIPS = {}; scoreData.forEach(d => { dataByFIPS[d.fipst] = +d[year]; }); // new england states const newEngland = ["09", "10", "11", "24", "34", "44", "25", "33", "50"]; // not mainland const boundary_states = ["PR", "HI"]; // new england circle configs const circleRadius = 0.021 * width; const offsetFromTop = 0.21 * width; const rightcolOffset = 0.042 * width; const leftcolOffset = rightcolOffset + 2 * circleRadius; const vertSpacing = 3; const circlePos = { "09": { x: width - rightcolOffset, y: offsetFromTop }, "10": { x: width - leftcolOffset, y: offsetFromTop + circleRadius + vertSpacing }, "11": { x: width - rightcolOffset, y: offsetFromTop + 2 * (circleRadius + vertSpacing) }, "24": { x: width - leftcolOffset, y: offsetFromTop + 3 * (circleRadius + vertSpacing) }, "34": { x: width - rightcolOffset, y: offsetFromTop + 4 * (circleRadius + vertSpacing) }, "44": { x: width - leftcolOffset, y: offsetFromTop + 5 * (circleRadius + vertSpacing) }, "25": { x: width - rightcolOffset, y: offsetFromTop + 6 * (circleRadius + vertSpacing) }, "33": { x: width - leftcolOffset, y: offsetFromTop + 7 * (circleRadius + vertSpacing) }, "50": { x: width - rightcolOffset, y: offsetFromTop + 8 * (circleRadius + vertSpacing) } }; // state label color const labelFill = d => { if (boundary_states.includes(d.properties.STUSPS)) { return "black"; } else if (!dataByFIPS[parseInt(d.properties.STATEFP)]) { return '#77787b'; } else { return "white"; } }; // mouse tootip helpers const mouseover = (d, _this) => { const fip = parseInt(d.properties.STATEFP); const [x, y] = d3.mouse(_this); d3.select(_this).classed("hovered-state", true); const labelClass = `.willhover${d.properties.STATEFP}`; const isNewEnglandCircle = newEngland.includes(d.properties.STATEFP) && d3.select(_this).classed('new-england-circles'); let xPos, yPos; if (isNewEnglandCircle) { xPos = `${circlePos[d.properties.STATEFP].x - 300}px`; } else { xPos = `${x}px`; } if (isNewEnglandCircle) { yPos = circlePos[d.properties.STATEFP].y + 'px'; } else { yPos = `${y}px`; } d3.select(labelClass).classed("hovered-statelabel", true); tooltipDiv .html( `

NAEP Equivalent Score: ${ dataByFIPS[fip] ? dataByFIPS[fip] : 'Not available' }

NAEP Achievement level: ${ dataByFIPS[fip] ? level(levelThreshold) : 'Not available' }

` ) .transition() .duration(50) .style('left', xPos) .style('top', yPos) .style("width", width / 10) .style("height", height / 10) .style("opacity", .9); }; const mouseout = (d, _this) => { d3.select(_this).classed("hovered-state", false); const labelClass = `.willhover${d.properties.STATEFP}`; d3.select(labelClass).classed("hovered-statelabel", false); tooltipDiv .transition() .duration(1000) .style("opacity", 0); }; const click = d => { const state = d.properties.NAME; const url = `https://www.google.com/search?q=${state}`; window.open(url, "_blank"); }; // render path for state shapes g.selectAll("path") .data(topojson.feature(usJson, usJson.objects.states_20m_2017).features) .enter() .append("path") .attr("d", path) .attr( "class", d => `${ dataByFIPS[parseInt(d.properties.STATEFP)] ? threshold((dataByFIPS[parseInt(d.properties.STATEFP)] * 10) / 10) : 'not-available' } colorall states-clickable` ) .on("mouseover", function(d) { mouseover(d, this); }) .on("mouseout", function(d) { mouseout(d, this); }) .on("click", d => click(d)); // add labels with state abbreviation g.selectAll("text") .data(topojson.feature(usJson, usJson.objects.states_20m_2017).features) .enter() .filter(d => !newEngland.includes(d.properties.STATEFP)) .append("text") .text(d => d.properties.STUSPS) .attr('class', d => `willhover${d.properties.STATEFP}`) .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', "0.7em") .attr('fill', d => labelFill(d)); // render circles for new england states const circleContainers = g .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(d) { mouseover(d, this); }) .on("mouseout", function(d) { mouseout(d, this); }) .on("click", d => click(d)); // circle borders circleContainers .append('circle') .attr("text-anchor", "middle") .attr('font-size', "0.7em") .attr('r', circleRadius + 1) .attr("fill", '#d1d3d4'); // circles circleContainers .append('circle') .attr("text-anchor", "middle") .attr('font-size', "0.7em") .attr('r', circleRadius) .attr( "class", d => `${ dataByFIPS[parseInt(d.properties.STATEFP)] ? threshold((dataByFIPS[parseInt(d.properties.STATEFP)] * 10) / 10) : 'not-available' }` ); // state labels for new england 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', "0.7em") .attr('fill', d => labelFill(d)); const rectSize = 100; const legendSpacing = 3.5; const legendXStart = 10; const legendHeight = 1; const textYOffset = 25; const colors = ["#dbe2e9", "#bbc7d6", "#8e9fbc"]; const labels = ["Below Basic", "Basic", "Proficient"]; for (let i = 0; i < colorClasses.length; i++) { // text label for legend g.append("text") .attr("x", legendXStart + i * (legendSpacing + rectSize)) .attr("y", legendHeight + textYOffset) .style("text-anchor", "start") .style('font-size', '12px') .text(labels[i]); // rect for legend g.append("rect") .attr('class', colorClasses[i]) .attr("y", legendHeight) .attr("x", legendXStart + i * (legendSpacing + rectSize)) .attr("width", rectSize) .attr("height", 10); } g.append('text') .text("Click on a state to go to its detail page.") .attr("x", 10) .attr("y", 60) .style("font-size", "15px") .style("font-style", 'italic'); return root.node(); }32:T11b1,geoAlbersUsaPr = (d3.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); })33:[{"id":"ef2e0e5a5b4a8d98cefcd1315546fcceb8ee0eb28ad20169396aecb9638316827bcc4b5221fbe3a0771860fffadd59352efc3d8473187285b1ca6db5f346aac7","href":"https://static.observableusercontent.com/files/ef2e0e5a5b4a8d98cefcd1315546fcceb8ee0eb28ad20169396aecb9638316827bcc4b5221fbe3a0771860fffadd59352efc3d8473187285b1ca6db5f346aac7","name":"data-all.csv","type":"text/csv","lastModified":1576597658693.721,"size":8774},{"id":"1bd9cefa0d41aa8add07e0003f03e5ca411a2ff54ca145c6f750cc25450795b27bd7de831eb5046db4cd9cc14bdfcf2bba247e9af0bc06bc01b722e72df91d55","href":"https://static.observableusercontent.com/files/1bd9cefa0d41aa8add07e0003f03e5ca411a2ff54ca145c6f750cc25450795b27bd7de831eb5046db4cd9cc14bdfcf2bba247e9af0bc06bc01b722e72df91d55","name":"us.json","type":"application/json","lastModified":1576597658693.721,"size":747399}] 2f:{"title":"NAEP Equivalent Score Map (with Circles)","cells":[{"id":0,"value":"md`# NAEP Equivalent Score Map (with Circles)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`##### Year:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"viewof year = select(years)","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`##### Subject:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof subject = select(subjects)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"usJson = JSON.parse(await FileAttachment(\"us.json\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"allRaw = d3.csvParse(await FileAttachment(\"data-all.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"years = {\n let _years = [];\n allRaw.forEach(el => {\n const numbers = Object.keys(el)\n .filter(item => !isNaN(item))\n .filter(num => !_years.includes(num));\n if (numbers.length !== 0) {\n numbers.forEach(_el => _years.push(_el));\n }\n });\n return _years;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"subjects = {\n let _subjects = [];\n allRaw.forEach(el => {\n if (!_subjects.includes(el.SG)) {\n _subjects.push(el.SG);\n }\n });\n return _subjects;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"allData = {\n let _allData = {};\n subjects.forEach(sub => (_allData[sub] = []));\n allRaw.forEach(each => {\n _allData[each.SG].push(each);\n });\n return _allData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"scoreData = allData[subject]","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`### Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = (2 / 3) * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@5')","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"}],"files":"$W33","stdlib":"1","titling":"auto"}