{ const width = 1000; const height = 600; const topology = counties; const defaultScale = d3.geoAlbersUsa().scale(); const projection = d3.geoMercator() .center([ -109, 40 ]) .translate([ width/2, height/2 ]) .scale([ width*1.75 ]); const path = d3.geoPath(projection); const pathGenerator = d3.geoPath().projection(projection) var tooltipDiv = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) const svg = d3.select(DOM.svg(1024, height)) .style('max-width', '100%') .style('height', 'auto'); svg.append("path") .datum(topojson.mesh(topology, topology.objects.nation)) .attr("d", path) .attr("class", "nation") .style("stroke", "#ddd") .style("stroke-width", "1") .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("fill", "#ddd") svg.append("path") .datum(topojson.mesh(topology, topology.objects.states)) .attr("d", path) .attr("class", "state") .style("stroke", "#fff") .style("stroke-width", "0.5") .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("fill", "none") svg.append("path") .datum(topojson.mesh(topology, topology.objects.counties)) .attr("d", path) .attr("class", "state") .style("stroke", "#fff") .style("stroke-width", "0.3") .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("fill", "none") const route = svg.append('path') .datum(routeObj) .attr('d', pathGenerator) .attr('fill', 'none') .attr('stroke', 'tan') .attr('stroke-width', '3') .style('stroke-dasharray', "5 10"); const allRoute = svg.append('path') .datum(allRouteObj) .attr('d', pathGenerator) .attr('fill', 'none') .attr('stroke', 'none'); const busRoute = svg.append('path') .datum(busRouteObj) .attr('d', pathGenerator) .attr('fill', 'none') .attr('stroke', 'grey') .attr('stroke-width', '3') .style('stroke-dasharray', "1 5") .style("opacity", .50) const openTooltip = function(e, d) { d3.select(this) .attr("r", "10px") .attr("fill", "indigo"); tooltipDiv.transition() .duration(150) .style("opacity", 1); let tooltipHTML = `

${d.subheading}

${d.blurb ? d.blurb : ""}

` let [x, y] = projection([d.lon, d.lat]); if (y < height / 2) { if (x < width / 2) { // Top Left (0, 0) to (width / 2, height / 2) tooltipDiv .html(tooltipHTML) .style("left", (e.pageX + 28) + "px") .style("top", (e.pageY - 40) + "px"); } else { // Top Right (width / 2, 0) to (width, height / 2) tooltipDiv .html(tooltipHTML) .style("left", (e.pageX - 268) + "px") .style("top", (e.pageY) + "px"); } } else { if (x < width / 2) { // Bottom Left (0, height / 2) to (width / 2, height) tooltipDiv .html(tooltipHTML) .style("left", (e.pageX + 14) + "px") .style("top", (e.pageY - 228) + "px"); } else { // Bottom Right (width / 2, height) tooltipDiv .html(tooltipHTML) .style("left", (e.pageX - 28) + "px") .style("top", (e.pageY - 288) + "px"); } } } const closeTooltip = function(e) { d3.select(this) .attr("r", "8px") .attr("fill", "pink") .attr("stroke", "black") tooltipDiv.transition() .style("opacity", 0); } const circles = svg.selectAll("circle") .data(locations).enter() .append("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", "8px") .attr("fill", "pink") .attr("stroke", "black") .attr('stroke-width', '2') .style("opacity", .50) .on("mouseover", openTooltip) .on("click", openTooltip) .on("mouseout", closeTooltip); const numbers = svg.selectAll("circle") .data(locations).enter() .append("text") .attr("x", d => projection([d.lon, d.lat])[0]) .attr("y", d => projection([d.lon, d.lat])[1] + 4) .attr("font-size", "1rem") .attr("font-weight", "600") .attr("text-anchor", "middle") .text((d, i) => i + 1); const labels = svg.selectAll("text") .data(locations).enter() .append("text") .attr("x", d => projection([d.lon, d.lat])[0] + 16) .attr("y", d => projection([d.lon, d.lat])[1] + 4) .attr("font-size", "0.9rem") .attr("font-weight", "400") .attr("text-anchor", "left") .text(d => d.place); svg.append("rect") .attr("x", 250) .attr("y", 2) .attr("width", 500) .attr("height", 58) .attr("stroke", "black") .attr("fill", "#fffaed") const title = svg.append("text") .attr("x", "500") .attr("y", "40") .attr("font-size", "2rem") .attr("font-weight", "400") .attr("text-anchor", "middle") .text("Places in the Film Nomadland") svg.append("rect") .attr('x', 580) .attr('y', 450) .attr('width', 350) .attr('height', 140) .attr('stroke', 'black') .attr('fill', '#fffaed'); svg.append("path") .attr('d', "M700,530 L720,530") .attr('fill', 'none') .attr('stroke', 'tan') .attr('stroke-width', '3') .style('stroke-dasharray', "5 10"); svg.append("path") .attr('d', "M700,560 720,560") .attr('fill', 'none') .attr('stroke', 'grey') .attr('stroke-width', '3') .style('stroke-dasharray', "1 5") svg.append("text").attr("x", 725).attr("y", 534).text(`Van Route (🚐)`).style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 725).attr("y", 564).text(`Bus Route (🚌)`).style("font-size", "15px").attr("alignment-baseline","middle") const dot = svg.append("g"); const mileage = svg.append("g") while (true) { const length = allRoute.node().getTotalLength() const int = d3.interpolate(0, length) const x = t => allRoute.node().getPointAtLength(int(t)).x const y = t => allRoute.node().getPointAtLength(int(t)).y dot .selectAll('text') .data(locations) .join('text') .attr('x', d => d.x) .attr('y', d => d.y) .attr("text-anchor", "middle") .text(function(d) { return String.fromCodePoint(parseInt("1F690", 16)) }) .transition() .delay(500) .duration(50000) .attrTween('x', () => x) .attrTween('y', () => y) .textTween(() => t => ((int(t) / length * 7491) > 2100 && (int(t) / length * 7491 < 4500)) ? String.fromCodePoint(parseInt("1F68C", 16)) : String.fromCodePoint(parseInt("1F690", 16))) mileage.selectAll("text").remove() const miles = mileage .append("text") .attr("x", "750") .attr("y", "500") .attr("font-size", "1.25rem") .attr("font-weight", "400") .attr("text-anchor", "middle") .transition() .delay(500) .duration(50000) .textTween(() => t => `Miles Traveled: ${(int(t) / length * 7491).toFixed(0).padStart(4, '0')}`) // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield yield svg.node(); // https://observablehq.com/@observablehq/introduction-to-promises await Promises.tick(60000); } return svg.node() }