31:T1bce,{ 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 threshold = d3 .scaleThreshold() .domain(levelThreshold) .range(d3.range(3).map(i => "q" + i + "-9")); // 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]; }); // render state shape path 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' } states-clickable` ) .on("mouseover", function(d) { 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}`; 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', `${x}px`) .style('top', `${y}px`) .style("width", width / 10) .style("height", height / 10) .style("opacity", .9); }) .on("mouseout", function(d) { 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); }) .on("click", d => { const state = d.properties.NAME; const url = `https://www.google.com/search?q=${state}`; window.open(url, "_blank"); }); g.append("path") .attr("class", "state-borders") .attr( "d", path( topojson.mesh(usJson, usJson.objects.states_20m_2017, (a, b) => { return a !== b; }) ) ); // special position for new england states const newEngland = ["09", "10", "11", "24", "34", "44", "25", "33", "50"]; const vertOffset = ['50', '33']; // special position for others const offsetState = ["12"]; // draw connecting lines for new england states g.append("g") .attr("class", "connectinglines") .selectAll("text") .data(topojson.feature(usJson, usJson.objects.states_20m_2017).features) .enter() .filter(d => newEngland.includes(d.properties.STATEFP)) .append("line") .attr("y1", d => path.centroid(d)[1]) .attr("y2", d => parseFloat(d.properties.dy) + path.centroid(d)[1]) .attr("x1", d => path.centroid(d)[0]) .attr("x2", d => parseFloat(d.properties.dx) + path.centroid(d)[0]) .attr("stroke", "black") .attr("stroke-width", "1px"); // add labels with state abbreviation const boundary_states = [ "VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC", "PR", "HI" ]; g.append("g") .attr("class", "states") .selectAll("text") .data(topojson.feature(usJson, usJson.objects.states_20m_2017).features) .enter() .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 ( newEngland.includes(d.properties.STATEFP) && !vertOffset.includes(d.properties.STATEFP) ) { return 10; } if (d.properties.NAME === 'Florida') { return -15; } if (d.properties.NAME === 'Puerto Rico') return -20; }) .attr('dy', d => `${vertOffset.includes(d.properties.STATEFP) ? -15 : -2}`) .attr("text-anchor", "middle") .attr('font-size', "0.7em") .attr('fill', d => { if (boundary_states.includes(d.properties.STUSPS)) { return "black"; } else { return "white"; } }); // add data labels for new england states g.append("g") .attr("class", "states") .selectAll("text") .data(topojson.feature(usJson, usJson.objects.states_20m_2017).features) .enter() .filter(d => newEngland.includes(d.properties.STATEFP)) .append("text") .text( d => `${ dataByFIPS[parseInt(d.properties.STATEFP)] ? dataByFIPS[parseInt(d.properties.STATEFP)] : "N/A" }` ) .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("text-anchor", "middle") .attr('font-size', "0.7em") .attr('dx', d => `${!vertOffset.includes(d.properties.STATEFP) ? 10 : 0}`) .attr('dy', d => `${vertOffset.includes(d.properties.STATEFP) ? -3 : 11}`) .attr('fill', 'black'); 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 < colors.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("y", legendHeight) .attr("x", legendXStart + i * (legendSpacing + rectSize)) .attr("width", rectSize) .attr("height", 10) .style("fill", colors[i]) .style("stroke", "#303030"); } 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":"1bd9cefa0d41aa8add07e0003f03e5ca411a2ff54ca145c6f750cc25450795b27bd7de831eb5046db4cd9cc14bdfcf2bba247e9af0bc06bc01b722e72df91d55","href":"https://static.observableusercontent.com/files/1bd9cefa0d41aa8add07e0003f03e5ca411a2ff54ca145c6f750cc25450795b27bd7de831eb5046db4cd9cc14bdfcf2bba247e9af0bc06bc01b722e72df91d55","name":"us.json","type":"application/json","lastModified":1576203367915.242,"size":747399},{"id":"ef2e0e5a5b4a8d98cefcd1315546fcceb8ee0eb28ad20169396aecb9638316827bcc4b5221fbe3a0771860fffadd59352efc3d8473187285b1ca6db5f346aac7","href":"https://static.observableusercontent.com/files/ef2e0e5a5b4a8d98cefcd1315546fcceb8ee0eb28ad20169396aecb9638316827bcc4b5221fbe3a0771860fffadd59352efc3d8473187285b1ca6db5f346aac7","name":"data-all.csv","type":"text/csv","lastModified":1576266277785.776,"size":8774}] 2f:{"title":"NAEP Equivalent Score Map (with Lines)","cells":[{"id":0,"value":"md`# NAEP Equivalent Score Map (with Lines)`","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":"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"}