31:T1e51,{ const root = DOM.element('div'); const rootSelector = d3.select(root).style('position', 'relative'); rootSelector.select("svg").remove(); const tooltipDiv = rootSelector .append("div") .attr("class", "map_tooltip") .style('position', 'absolute') .style("opacity", 0); const margin = { top: 0, right: 0, bottom: 0, left: 0 }, width = 1200 - margin.left - margin.right, height = 850 - margin.top - margin.bottom; const boundary_states = [ "VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC", "PR", "HI" ]; const svg = rootSelector .append("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", "0 0 1300 850") .classed("svg-content", true) .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const projection = d3 .geoAlbersUsaPr() .scale(1200) .translate([width / 2, height / 2]), path = d3.geoPath().projection(projection); //Moves selection to front d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); }; //Moves selection to back d3.selection.prototype.moveToBack = function() { return this.each(function() { var firstChild = this.parentNode.firstChild; if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); }; const dataFile = "STEM Super Cluster"; const us_average = "35%"; // Defining mouse-over event function mouseover(d, state, data) { // console.log(d3.event.pageX, d3.event.pageY) tooltipDiv .transition() .duration(100) .style("opacity", .9) .attr("width", "200px") .attr("height", "150px"); tooltipDiv .html(state + ":" + Math.round(data) + "%") .style("left", 0) .style("top", 0); } //Sets color scale const numMax = d3.max(maptemplate, function(d) { return +d[dataFile]; }); const quantize = d3 .scaleQuantize() .domain([0, 50]) .range( d3.range(5).map(function(i) { return "q" + i + "-9"; }) ); //Pair data with state id const dataByFIPS = {}; maptemplate.forEach(function(d) { dataByFIPS[d.FIPS] = +d[dataFile]; }); //Pair state name with state id const stateByFIPS = {}; maptemplate.forEach(function(d) { stateByFIPS[d.FIPS] = d.state; }); svg .append("g") // .attr("width", "100") .attr("class", "states") .selectAll("path") .data(topojson.feature(states, states.objects.states_20m_2017).features) .enter() .append("path") .attr("d", path) .attr("class", function(d) { return quantize(Math.round(dataByFIPS[+d.properties.STATEFP] * 10) / 10); }) //Hovers .on("mouseover", function(d) { mouseover( d.properties.STATEFP, stateByFIPS[+d.properties.STATEFP], dataByFIPS[+d.properties.STATEFP] ); }) .on("mouseout", function() { tooltipDiv .transition() .duration(1000) .style("opacity", 0); }); // var line = d3 // .line() // .x(function(d) { // return x(d['x']); // }) // .y(function(d) { // return y_scale(d['y']); // }); svg .append("path") .attr("class", "state-borders") .attr( "d", path( topojson.mesh(states, states.objects.states_20m_2017, function(a, b) { return a !== b; }) ) ); var newEngland = ["09", "10", "11", "24", "34", "44", "25", "33", "50"]; var vertOffset = ['50', '33']; // Drawing connecting lines for outlier states svg .append("g") .attr("class", "connectinglines") .selectAll("text") .data(topojson.feature(states, states.objects.states_20m_2017).features) .enter() .filter(function(d) { return newEngland.indexOf(d.properties.STATEFP) >= 0; }) .append("line") .attr("y1", function(d) { return path.centroid(d)[1]; }) .attr("y2", function(d) { return ( parseFloat(d.properties.dy) + path.centroid(d)[1] + (vertOffset.indexOf(d.properties.STATEFP) >= 0) * 30 ); }) //if (d.properties.dy != null) { return path.centroid(d)[1] + d.properties.dy;} else {return path.centroid(d)[1];}}) .attr("x1", function(d) { return path.centroid(d)[0]; }) .attr("x2", function(d) { return ( parseFloat(d.properties.dx) + path.centroid(d)[0] + -1 * (Math.sign(parseFloat(d.properties.dx)) == 1) * 20 ); }) //function(d){if (d.properties.dx != null) { return path.centroid(d)[0] + d.properties.dx;} else {return path.centroid(d)[0];}}) .attr("stroke", "black") .attr("stroke-width", "1px"); // Adding labels with state abbreviation and data svg .append("g") .attr("class", "states") .selectAll("text") .data(topojson.feature(states, states.objects.states_20m_2017).features) .enter() .append("svg:text") .attr("transform", function(d) { if (d.properties.dx == null) { return "translate(" + path.centroid(d) + ")"; } else { return ( "translate(" + String( parseFloat(path.centroid(d)[0]) + parseFloat(d.properties.dx) ) + "," + String( parseFloat(path.centroid(d)[1]) + parseFloat(d.properties.dy) ) + ")" ); } }) .attr("dx", "0em") .attr("dy", "0em") .attr("text-anchor", "middle") .attr('font-size', "0.9em") .text(function(d) { return d.properties.STUSPS; }) .attr('fill', function(d) { if ( dataByFIPS[d.properties.STATEFP] < 15 || boundary_states.includes(d.properties.STUSPS) ) { return "black"; } else { return "white"; } }) .append('tspan') .attr("dx", "-1.35em") .attr("dy", "1.0em") .text(function(d) { return Math.round(dataByFIPS[d.properties.STATEFP]) + "%"; }); var rectSize = 120; var legendSpacing = 3.5; var legendXStart = width / 2 + 100; var legendHeight = height - 60; var colors = ["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"]; var labels = ["\u2265" + "0", "10", "20", "30", "40", "\u2264" + "100"]; for (var i = 0; i < 5; i++) { // text label for the legend first row svg .append("text") .attr("x", legendXStart + (i - 3) * (legendSpacing + rectSize) - 3) .attr("y", legendHeight + 40) .style("text-anchor", "middle") .text(labels[i]); // rect for legend second row svg .append("rect") .attr("y", legendHeight) .attr("x", legendXStart + (i - 3) * (legendSpacing + rectSize)) .attr("width", rectSize) .attr("height", 20) .style("fill", colors[i]) .style("stroke", "#303030"); } svg .append("text") .attr("x", legendXStart + 2 * (legendSpacing + rectSize) - 3) .attr("y", legendHeight + 40) .style("text-anchor", "middle") .text(labels[5]); svg .append('text') .attr("x", width / 2) .attr("y", 0 - margin.top / 2 + 150) .attr("text-anchor", "middle") .style("font-size", "16px") .text("U.S. Average: " + us_average); svg .append("text") .attr("x", width / 2) .attr("y", margin.top + 50) .attr("text-anchor", "middle") .style("font-size", "24px") .text("Percentage of high school CTE concentrations in STEM and"); svg .append("text") .attr("x", width / 2) .attr("y", 0 + margin.top + 85) .attr("text-anchor", "middle") .style("font-size", "24px") .text("STEM-related career clusters, by state: 2016\u201317"); return root; }32:T406,html` `33:T118e,(d3.geoAlbersUsaPr = function() { var epsilon = 1e-6; var lower48 = d3.geoAlbers(); // EPSG:3338 var alaska = d3 .geoConicEqualArea() .rotate([154, 0]) .center([-2, 58.5]) .parallels([55, 65]); // ESRI:102007 var hawaii = d3 .geoConicEqualArea() .rotate([157, 0]) .center([-3, 19.9]) .parallels([8, 18]); // XXX? You should check that this is a standard PR projection! var puertoRico = d3 .geoConicEqualArea() .rotate([66, 0]) .center([0, 18]) .parallels([8, 18]); var point, pointStream = { point: function(x, y) { point = [x, y]; } }, lower48Point, alaskaPoint, hawaiiPoint, puertoRicoPoint; function albersUsa(coordinates) { var 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) { var 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) { var 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(); var 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:[{"id":"0bb3cfe88ab124e5837ce35d82d4c556e282e384f1c9fbbee9e0f2fd04f0e13395a3cc35843aace88dc322589cf7bd21d9a41fbcb0c145b412419746581f755b","href":"https://static.observableusercontent.com/files/0bb3cfe88ab124e5837ce35d82d4c556e282e384f1c9fbbee9e0f2fd04f0e13395a3cc35843aace88dc322589cf7bd21d9a41fbcb0c145b412419746581f755b","name":"states.json","type":"application/json","lastModified":1596725913866.749,"size":789453},{"id":"62f1ec489a485371b8f81926bdf859b9648b0d5343b72f8ed616594eb4fb9c070ff2f8b7fdd63a540b1842832a67b1a177bbe9d24daea3c78388577c7412cc99","href":"https://static.observableusercontent.com/files/62f1ec489a485371b8f81926bdf859b9648b0d5343b72f8ed616594eb4fb9c070ff2f8b7fdd63a540b1842832a67b1a177bbe9d24daea3c78388577c7412cc99","name":"Table2b_STEM_Super_Cluster_CTE.csv","type":"text/csv","lastModified":1596726047651.467,"size":1206}] 2f:{"title":"CTE Data Story map for image export","cells":[{"id":0,"value":"md`# CTE Data Story map for image export`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"states = JSON.parse(await FileAttachment(\"states.json\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"maptemplate = d3.csvParse(\n await FileAttachment(\"Table2b_STEM_Super_Cluster_CTE.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}