jkeefe

// nifty trick to bring in json files using require in a module
import { createRequire } from "module"; // Bring in the ability to create the 'require' method
const require = createRequire(import.meta.url); // construct the require method
const trainData = require('./src/data/latest.json')

jkeefe

let dragged_once = false;

map.on('dragstart', () => {
  dragged_once = true;
});

map.on('zoomend', () => {
  if (!dragged_once) {
    map.easeTo({
      center: label_list[0].lngLat,

jkeefe

From https://stackoverflow.com/questions/64765846/mapbox-rectangle-line-from-bounds-from-two-points

jkeefe

const fs = require('fs')
const gm = require('gm').subClass({ imageMagick: '7+' });

WIDTH = 1138
HEIGHT = 50
X = 0
Y = 0

gm('./images/us_at_bottom.png')
    .region(WIDTH, HEIGHT, X, Y)

jkeefe

# adds 2-second pause at end
# from https://stackoverflow.com/questions/43414641/repeat-last-frame-in-video-using-ffmpeg

ffmpeg -i in.mp4 -vf tpad=stop_mode=clone:stop_duration=2 out.mp4

jkeefe

// rig example, in config.js
const path = line()
  .curve(curveMonotoneX)
  .x(d => x(d.date))
  .y(d => y(d.value))
  .defined(d => (d.value !== null) && (d.value !== -999));

// d3 generic example, from: https://bl.ocks.org/EmbraceLife/b8dda609b87a3bab7e952769fd028f53
var line = d3.line() 

jkeefe

      // Force load raster as PNG (Safari will use JPG otherwise) to preserve transparency
      map.addSource('noaa_map', {
        type: 'raster',
        tiles: [
          `https://api.mapbox.com/v4/cnndigital.7d5hl52y/{z}/{x}/{y}.png?access_token=${mapboxgl.accessToken}`,
        ],
      });

      map.addLayer({
        id: 'raster-layer',

jkeefe

    // a second later send a confidence height ... just to be sure
    setTimeout(() => { pymChild.sendHeight(); }, 1000);

jkeefe

      // Force mapbox-gl to load raster tiles as PNGs to preserve transparency.
      // (Safari will use JPGs otherwise, and 'transparent' areas will show up black.) 
      // For more troubleshooting, see: https://docs.mapbox.com/help/troubleshooting/raster-transparency-issues/
      
      map.addSource('noaa_map', {
        type: 'raster',
        tiles: [
          `https://api.mapbox.com/v4/TILESET_ID.ABCDEFG/{z}/{x}/{y}.png?access_token=${mapboxgl.accessToken}`,
        ],
      });

jkeefe

text-shadow: 2px 2px 4px #ffffff, -2px -2px 4px #fff, -2px 2px 4px #fff, 2px -2px 4px #fff

/* ai2html ... for gray backgrounds 
  1. In Illustrator move the "names" component to a new layer called "state-names"
  2. Add the below to the ai2html css block
*/

.g-state-names {
text-shadow: 2px 2px 4px #e6e6e6, -2px -2px 4px #e6e6e6, -2px 2px 4px #e6e6e6, 2px -2px 4px #e6e6e6
}