Notebook - Welcome to Notebook

Contact/Report Bugs
You can contact me at: bkenwright@xbdev.net












script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let geojson let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 300 let geoGenerator d3 geoPath projection projection pointRadius 4 context context let yaw 300 function update projection rotate yaw 45 context clearRect 0 0 800 600 context lineWidth 0 5 context strokeStyle 333 context beginPath geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke yaw 0 2 REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne 110m land json then function json geojson json window setInterval update 100 script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 content info height 20px content map path fill aaa stroke fff content bounding box rect fill none stroke 333 stroke dasharray 2 1 content centroid display none content centroid circle fill red style div id content div class info Hover over a country div svg width 620px height 600px g class map g g class bounding box rect rect g g class centroid circle r 4 circle g svg div script let projection d3 geoMercator scale 400 translate 200 280 center 0 5 let geoGenerator d3 geoPath projection projection function handleMouseover e d let pixelArea geoGenerator area d let bounds geoGenerator bounds d let centroid geoGenerator centroid d let measure geoGenerator measure d d3 select content info text d properties name path area pixelArea toFixed 1 path measure measure toFixed 1 d3 select content bounding box rect attr x bounds 0 0 attr y bounds 0 1 attr width bounds 1 0 bounds 0 0 attr height bounds 1 1 bounds 0 1 d3 select content centroid style display inline attr transform translate centroid function update geojson let u d3 select content g map selectAll path data geojson features u enter append path attr d geoGenerator on mouseover handleMouseover REQUEST DATA d3 json https assets codepen io 2814973 africa json then function json update json script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 500 rotate 30 45 let geoGenerator d3 geoPath projection projection context context function update geojson context lineWidth 0 5 context strokeStyle 333 context beginPath geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke London New York context beginPath context strokeStyle red geoGenerator type Feature geometry type LineString coordinates 0 1278 51 5074 74 0059 40 7128 context stroke Circle let circle d3 geoCircle center 0 1278 51 5074 radius 5 context beginPath context strokeStyle red geoGenerator circle context stroke REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne 110m land json then function json update json script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let geojson let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 300 rotate 30 45 let geoGenerator d3 geoPath projection projection context context let state clickedLocation null function handleClick e let pos d3 pointer e this state clickedLocation projection invert pos update function initialise d3 select canvas on click handleClick function update context clearRect 0 0 800 400 geojson features forEach function d context beginPath context fillStyle state clickedLocation d3 geoContains d state clickedLocation red aaa geoGenerator d context fill REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne 110m land json then function json geojson json initialise update script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 14px color 333 style div id content canvas width 800 height 400 canvas div script let geojson let context d3 select content canvas node getContext 2d let projection d3 geoOrthographic scale 500 rotate 30 45 let geoGenerator d3 geoPath projection projection pointRadius 4 context context let londonLonLat 0 1278 51 5074 let newYorkLonLat 74 0059 40 7128 let geoInterpolator d3 geoInterpolate londonLonLat newYorkLonLat let u 0 function update context clearRect 0 0 800 600 context lineWidth 0 5 context strokeStyle 333 context beginPath geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke London New York context beginPath context strokeStyle red geoGenerator type Feature geometry type LineString coordinates londonLonLat newYorkLonLat context stroke Point context beginPath context fillStyle red geoGenerator type Feature geometry type Point coordinates geoInterpolator u context fill u 0 01 if u 1 u 0 REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne 110m land json then function json geojson json window setInterval update 50 script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 12px color 333 margin 10px menu position absolute top 20px left 30px menu item margin bottom 12px menu item input width 100px menu select margin top 4px menu item value font weight bold menu item span menu item input vertical align middle menu item low display inline block width 30px text align right svg border 1px solid eee map path fill 87B687 stroke 777 projection center fill red graticule path fill none stroke eee circles path fill none stroke aaa style div id menu div class projection type item div select name type value 150 select div div div class slider item div class label scale span class value 120 span div div span class low 0 span input type range name scale min 0 max 400 value 120 span 400 span div div div class slider item div class label center lon span class value 0 span div div span class low 180 span input type range name centerLon min 180 max 180 value 0 span 180 span div div div class slider item div class label center lat span class value 0 span div div span class low 90 span input type range name centerLat min 90 max 90 value 0 span 90 span div div div class slider item div class label translate x span class value 480 span div div span class low 0 span input type range name translateX min 0 max 960 value 480 span 960 span div div div class slider item div class label translate y span class value 250 span div div span class low 0 span input type range name translateY min 0 max 500 value 250 span 500 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateLambda min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotatePhi min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateGamma min 180 max 180 value 0 span 180 span div div div svg width 900px height 500px g class graticule path path g g class circles g g class map g circle class projection center r 4 circle svg script let geojson let projectionTypes AzimuthalEqualArea AzimuthalEquidistant Gnomonic Orthographic Stereographic Albers ConicConformal ConicEqualArea ConicEquidistant Equirectangular Mercator TransverseMercator let projection let geoGenerator d3 geoPath projection projection let graticule d3 geoGraticule let circles 135 0 90 0 45 0 0 0 45 0 90 0 135 0 180 0 0 70 0 35 0 35 0 70 180 70 180 35 180 35 180 70 let geoCircle d3 geoCircle radius 10 precision 1 let state type AzimuthalEqualArea scale 120 translateX 450 translateY 250 centerLon 0 centerLat 0 rotateLambda 0 1 rotatePhi 0 rotateGamma 0 function initMenu d3 select menu selectAll slider item input on input function d let attr d3 select this attr name state attr this value d3 select this parentNode parentNode select value text this value update d3 select menu projection type select on change function d state type this options this selectedIndex value update selectAll option data projectionTypes enter append option attr value function d return d text function d return d function update Update projection projection d3 geo state type geoGenerator projection projection projection scale state scale translate state translateX state translateY center state centerLon state centerLat rotate state rotateLambda state rotatePhi state rotateGamma Update world map let u d3 select g map selectAll path data geojson features u enter append path merge u attr d geoGenerator Update projection center let projectedCenter projection state centerLon state centerLat d3 select projection center attr cx projectedCenter 0 attr cy projectedCenter 1 Update graticule d3 select graticule path datum graticule attr d geoGenerator Update circles u d3 select circles selectAll path data circles map function d geoCircle center d return geoCircle u enter append path merge u attr d geoGenerator d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne 110m land json then function json geojson json initMenu update script

geoGenerator type FeatureCollection features geojson features context stroke Graticule let graticule d3 geoGraticule context beginPath context strokeStyle ccc geoGenerator graticule context stroke London New York context beginPath context strokeStyle red geoGenerator type Feature geometry type LineString coordinates londonLonLat newYorkLonLat context stroke Point context beginPath context fillStyle red geoGenerator type Feature geometry type Point coordinates geoInterpolator u context fill u 0 01 if u 1 u 0 REQUEST DATA d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne 110m land json then function json geojson json window setInterval update 50 script script type text javascript src https d3js org d3 v7 min js script style body font family Helvetica Neue Helvetica sans serif font size 12px color 333 margin 10px menu position absolute top 20px left 30px menu item margin bottom 12px menu item input width 100px menu select margin top 4px menu item value font weight bold menu item span menu item input vertical align middle menu item low display inline block width 30px text align right svg border 1px solid eee map path fill 87B687 stroke 777 projection center fill red graticule path fill none stroke eee circles path fill none stroke aaa style div id menu div class projection type item div select name type value 150 select div div div class slider item div class label scale span class value 120 span div div span class low 0 span input type range name scale min 0 max 400 value 120 span 400 span div div div class slider item div class label center lon span class value 0 span div div span class low 180 span input type range name centerLon min 180 max 180 value 0 span 180 span div div div class slider item div class label center lat span class value 0 span div div span class low 90 span input type range name centerLat min 90 max 90 value 0 span 90 span div div div class slider item div class label translate x span class value 480 span div div span class low 0 span input type range name translateX min 0 max 960 value 480 span 960 span div div div class slider item div class label translate y span class value 250 span div div span class low 0 span input type range name translateY min 0 max 500 value 250 span 500 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateLambda min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotatePhi min 180 max 180 value 0 span 180 span div div div class slider item div class label rotate span class value 0 span div div span class low 180 span input type range name rotateGamma min 180 max 180 value 0 span 180 span div div div svg width 900px height 500px g class graticule path path g g class circles g g class map g circle class projection center r 4 circle svg script let geojson let projectionTypes AzimuthalEqualArea AzimuthalEquidistant Gnomonic Orthographic Stereographic Albers ConicConformal ConicEqualArea ConicEquidistant Equirectangular Mercator TransverseMercator let projection let geoGenerator d3 geoPath projection projection let graticule d3 geoGraticule let circles 135 0 90 0 45 0 0 0 45 0 90 0 135 0 180 0 0 70 0 35 0 35 0 70 180 70 180 35 180 35 180 70 let geoCircle d3 geoCircle radius 10 precision 1 let state type AzimuthalEqualArea scale 120 translateX 450 translateY 250 centerLon 0 centerLat 0 rotateLambda 0 1 rotatePhi 0 rotateGamma 0 function initMenu d3 select menu selectAll slider item input on input function d let attr d3 select this attr name state attr this value d3 select this parentNode parentNode select value text this value update d3 select menu projection type select on change function d state type this options this selectedIndex value update selectAll option data projectionTypes enter append option attr value function d return d text function d return d function update Update projection projection d3 geo state type geoGenerator projection projection projection scale state scale translate state translateX state translateY center state centerLon state centerLat rotate state rotateLambda state rotatePhi state rotateGamma Update world map let u d3 select g map selectAll path data geojson features u enter append path merge u attr d geoGenerator Update projection center let projectedCenter projection state centerLon state centerLat d3 select projection center attr cx projectedCenter 0 attr cy projectedCenter 1 Update graticule d3 select graticule path datum graticule attr d geoGenerator Update circles u d3 select circles selectAll path data circles map function d geoCircle center d return geoCircle u enter append path merge u attr d geoGenerator d3 json https gist githubusercontent com d3indepth f28e1c3a99ea6d84986f35ac8646fac7 raw c58cede8dab4673c91a3db702d50f7447b373d98 ne 110m land json then function json geojson json initMenu update script

3dplot
a4print
about
acejs
acejs2
acejs3
aessecurity
angularjs
animbackgroundimage
aseformat
assert
asteroidsjs
backgrounds01
backgrounds02
backgrounds03
barnsleyfern
base26
base64
bib
binary
bodypix
bouncy
box2dweb
breakoutjs
browserversion
buslanes
busybutton
bvhreader
calendar
canvas
canvas2
canvas3
canvasmandelbrot
canvasmandelbrot2
canvasnumbers
canvaszoom
capsule
changingimages
chatgptusingopenai
chatgptusingopenai2
chatgptusingopenai3
checkboxtoggle
chinesetiles
classes
classfeatures
clipboardbutton
clonenode
codedropdown
codemirror
codemirror2
collada
colorpick
columnresizer
contextmenu
convnet
cookiebanner
countdown
countdown2
countdown3
crop
css3dbarchart
css3dbarchart2
css3dbook
css3dscene
csscube
csscube2
csscube3
csscubevideos
cssfilelist
csshas
csspulse
cssresizeaspect
cssspin
csszooming
csvtoarray
customcheckbox
d3datamap
d3js
d3js10
d3js11
d3js2
d3js3
d3js4
d3js5
d3js6
d3js7
d3js8
d3js9
d3jsanimatedgrid
d3jsarctransition
d3jsarctransition2
d3jsaxis
d3jsaxischanging
d3jsbars
d3jsbrushing
d3jsbuslanes
d3jsbuslanes2
d3jscalendar
d3jscheat
d3jsclock
d3jscloudmap
d3jscogs
d3jscolors
d3jscovid
d3jscovid2
d3jscovid3
d3jsdashboard
d3jsdashboard2
d3jsdashboard3
d3jsdatakeyfunction
d3jsdensity
d3jsdragresizing
d3jsdragresizing2
d3jseach
d3jsease
d3jsevents
d3jsflower
d3jsforcegroups
d3jsforces
d3jsforces2
d3jsfractaltree
d3jsgeo
d3jsgroupbars
d3jsgroups
d3jsheatmap
d3jshex
d3jshierarchies
d3jshierarchies2
d3jshistogram
d3jshistogram2
d3jshistogram3
d3jshistogram4
d3jsinterpolate
d3jsjoin
d3jskmean
d3jskmean2
d3jsline
d3jsline2
d3jsline3
d3jsline4
d3jslinetransition
d3jslinetransition0
d3jslinetransition2
d3jsmaplocations
d3jsmaps
d3jsmaps2
d3jsmaps3
d3jsmisc
d3jsmisc2
d3jsmodule
d3jsmodulecolor
d3jsmultistyles
d3jsnobel
d3jsoverlappinggraphs
d3jspanel
d3jspie
d3jspieinterpolate
d3jssankey
d3jssankey2
d3jsscatter
d3jsshapes
d3jsslider
d3jsspending
d3jsspending2
d3jsspiralplot
d3jsspirograph
d3jssquare
d3jsstack
d3jsstackedbar
d3jsstackedbar2
d3jssunburst
d3jssunmoon
d3jssvglines
d3jssymbols
d3jstimelines
d3jsuk
d3jsvoronoi
d3scatterplot
d3timeline
d3timeline2
datalist
datamuse
date
dblclickhighlight
deviceorientation
dictionaryapi
dockermenu
doodlepad
downloadgif
dragdroplistitems
dragrotateresizediv
dragrotateresizediv2
dragrotateresizediv3
dragrotateresizediv4
dragrotateresizefontsize
dragselectbrush
drawlinesdiv
dropdown
dualquaternionimages
dynamicgrid
easefunctions
easeinterpolate3dplots
echart
echart2
echart3
encapsulation
epubviewer
errorstack
excalidraw
excalidraw2
excalidraw3
excalidraw5
expandable
faker
fetchplus
fileupload
fixedtopbar
fonts
fonts2
footerbar
fractalmaze
fractalmaze2
fractalnoiseimage
fractals
fractals2
fractaltree
freesvg
fresnel
froggerjs
gantt
gifgiphyapi
gifhex
gltffromscratch
gradients
griditems
griditems2
griditems3
griditems4
gridworms
heat
hexview
hexview2
highlight
icons
icons2
iframes
ik
imagetracertosvg
imgur
inputfile
invadersjs
ipynb
ipynb2
ipynb3
ipynb4
isbn13
isbn2
jpghex
jquery
jquery2
jqueryui
jqueryui2
jsdraganddrop
jslint
jsobfuscate
jsraytracer
jstree
jstree2
jszip
jszipimages
jszipread
keyframes
l2dwidget
lda
leftmenu
less
less2
lineargradientimage
linenumbers
loadimagefromfile
makepdf
maps
markdown
markdown2
markdownalerts
markdownalerts2
markdownbookmarks
markovimage
markovpixelblocks
mathjax
matrices
matsandvects
mazegamejs
md2tex
metrotiles
metrowindows
milestones
misc
misc2
modules
myipdetails
neataptic
networkstructures
networkstructures2
number
obj
objtojson
openaiimages
opencv
opencv2
opencv3
opencv4
opencv5
outline
p2
p5fractalleaf
p5fractalshape
p5js
p5js2
p5js3
p5jsanimatedcover
p5mengercube
p5snowflakes
palindrome
panel
parallax
paste
paste2
pasteimgfromurl
pdfjs
pdfjs2
pdfkit
pdfkit2
pdfkit3
pdfkit4
pdfkit5
pdfkit6
pdfmake
pdfmake2
pdfmake3
pdfmake4
pdfmake5
pdfmake6
perlin
perlin2
perlin3
perspective
pexels
playground
plotly
plotlynoise
plotlyranddist
plyloader
plyloader2
pngtxtencoder
pongjs
pptxgenjs
prettycode
prism
prn
problems
progress
pseudorandom
px2svg
python
quotes
racergame
random
randomprofilepatterns
randomstring
rating
rayambient
raymonte
raymonteprogressive
raymonteprogressive2
raymontewarmstart
reexpcross
reexpcross2
regex
regexbib
regexpfixbib
regexpmultiline
repeatwordsregexp
resizabletable
resizabletable2
revealjs
revealjs2
revealjsmulti
ritalanguage
ritalanguage2
ritalanguage3
rotateimg
rough
rsapublicprivatekeys
rss
rss2
sankey
scrappingsvg
scrolltext
scrolltext2
scrollwidth
sdfboxinboxtwist
sdfhollowbox
setintervalexception
shareurl
shuffle
sidecomment
similarity
simplehighlighter
simpleplatformgamejs
sinecanvas
sliderpopout
slides
smileys
snowfall
snowman
sound
soundsignal
sphererayintersection
springs
sqljs
steganography
stereogram
stringmatching
svg
svgchaos
svgdragresize
svgdragresize2
svgdragresize3
svgdragrotate
svgdrawing
svglines
svglines2
svglines3
svglines4
svglines5
svglinesmandelbrot
svgpathsdragrotate
svgpathsdragrotateresize
svgpie
svgpie2
svgpie3
svgpiepath
svgpiepath2
svgrandomfaces
symbols
synaptic
synaptic2
synonyms
tablerotatecells
tablerotatecells2
tablerotatecells3
tablerotatecells3b
tablerotatecells4
tables
tablezebra
tabularjs
tabularjs2
tabulatordownload
tagcanvas
tensorflowgan
tensorflowjs
tensorflowjsbasic
tensorflowjscnn
tensorflowjssinewave
tensorflowjssound
tensorflowmobilenet
tetrahedronfractal
tetrahedronfractalfolding
tetris
textarea
textareaauto
textareadiv
textareadiv2
textmaskimage
theirorthere
thesaurus
threejs
threejs2
threejs3
threejs4
threejsgltf
threejstokyo
tiles
toaster
tooltip
transition
transitionexpandabledropdown
treeview
treeview2
tricks
tshirt
tshirt2
tshirt3
turningpages
unsplash
urlblob
urlblob2
userdefinepoints
vector
videos
videos2
visualsort
vue
w2ui
w2uientertextdialog
webcam
webgl
webgl2
webgl3
webgl4
webgl5
webglbasic1
webglbasic2
webglcube
webglfov
webglfrustum
webgljson
webglleaves
webgllighting
webglorthographic
webglpoints1
webglpoints2
webglpoints3
webglsquare
webgltexture1
webgltexture2
webgltexture3
webgltransforms
webgltriangle
webgpu
webgpu10
webgpu11
webgpu12
webgpu13
webgpu14
webgpu15
webgpu16
webgpu17
webgpu2
webgpu3
webgpu4
webgpu5
webgpu6
webgpu7
webgpu8
webgpu9
webgpubars
webgpubuffers
webgpubuffers2
webgpucellnoise
webgpuclouds
webgpuclydescope
webgpucompute
webgpucubemap
webgpucubemap2
webgpudeferred
webgpudepth
webgpudof
webgpudrops
webgpuetha
webgpufire
webgpufractalcubes
webgpuglassrain
webgpugltf
webgpugltf2
webgpugrass
webgpugrid
webgpukernel
webgpukleinian
webgpulabupdates
webgpulighting
webgpumandelbrot
webgpumeta3d
webgpumetaballs
webgpumouse
webgpunoise
webgpunormalmapping
webgpuobj
webgpuparallax
webgpuparallax2
webgpuparallax3
webgpuparallaxshadow
webgpuparallaxshadow2
webgpupixel
webgpuquad
webgpuray1
webgpuraytracing
webgpuraytracing2
webgpushadowmaps
webgpushadowmaps2
webgpusierpinski2d
webgpusierpinski3d
webgpusinusoid
webgpussao
webgpustadiumobj
webgpuswirl
webgputestpipe3
webgputoon
webgputopology
webgputt
webgpuvolcloud
webgpuwater
webgpuwireframe
webgpuwireframe2
webpcanvas
webworkers
webxr
webxr2
wiggly
wikipedia