Skip to content

Instantly share code, notes, and snippets.

View jkeefe's full-sized avatar

John Keefe jkeefe

222 followers · 12 following
View GitHub Profile
@jkeefe
jkeefe / missing_data.js
Created January 7, 2022 17:00
Have D3 not draw missing data in line charts using line.defined
// 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
jkeefe / raster.js
Created December 23, 2021 19:16
Force raster maps to load as PNGs to preserve transparency
// 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
jkeefe / send_height.js
Created December 22, 2021 22:37
Send pym height to pymParent a second later for confidence
// a second later send a confidence height ... just to be sure
setTimeout(() => { pymChild.sendHeight(); }, 1000);
@jkeefe
jkeefe / clear_tiles.js
Created December 6, 2021 20:40
Clear Mapbox tiles from browser storage
// clear tile storage to ensure latest data is shown
// (failure to do this could leave old data in browser for up to 12 hours)
mapboxgl.clearStorage();
@jkeefe
jkeefe / first_frame.sh
Created November 2, 2021 18:58
Extract first frame from a video as an image
ffmpeg -i infile.mp4 -vf "select=eq(n\,0)" -q:v 3 outfile.jpg
# from https://stackoverflow.com/questions/4425413/how-to-extract-the-1st-frame-and-restore-as-an-image-with-ffmpeg/4425466
@jkeefe
jkeefe / sub.css
Created October 29, 2021 14:09
Prevent sub/superscripts from affecting line height in CSS
// from https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
@jkeefe
jkeefe / dots.js
Last active October 29, 2021 01:34
d3 lines - with intermediary points
// assumes multiple lines on a graph
// like: {id: 'category one', values: [ [0,0], [1,1] [2,2] ... ]}
// define circles as markers for the line to use
lines.append('defs')
.append('marker')
.attr('id', d => `v-dot-${d.id}`)
.attr('viewBox', [0, 0, 10, 10])
.attr('refX', 5)
@jkeefe
jkeefe / class_06_block_8.html
Last active October 13, 2021 23:10
Block 8 code for D&D Class 06
<html lang="en">
<head>
<title>Newmark Bark</title>
<meta name="description" content="latest news">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
@jkeefe
jkeefe / Makefile
Created October 8, 2021 20:34
Make SVG maps with more than one layer
hpgraphic:
npx mapshaper -i ./src/data/latest-mercator.geojson ./src/data/states/us-state-innerlines.geojson combine-files \
--rename-layers counties,lines \
--style target=lines stroke='#a0a0a0' stroke-width=0.5 \
-proj albersusa \
-o target=counties,lines format=svg ./src/data/for_hp.svg
@jkeefe
jkeefe / sheet2json.js
Created October 7, 2021 01:05
Google Sheets to JSON Script
/* Source: https://gist.github.com/daichan4649/8877801 */
/* and this blog post: https://www.labnol.org/code/20005-publish-json-google-spreadsheets */
// Note: To use...
// - from your sheet, go to Tools > Script Editor
// - delete the code that's there
// - paste in this code
// - change the sheetId to match that of your sheet. You'll find it in the url between /d/ and /edit
// - click "run" and authorize the app
// - click "Deploy"