Layer Cake is a graphics framework built on top of Svelte. It measures your target div and your data and creates scales that stay synced on layout changes. Use these scales to organize multiple, mostly-reusable Svelte components, whether they be SVG, HTML, Canvas or WebGL. Since they all share the same coordinate space, you can build your graphic one layer at a time.
« Shader Programming Primer — Real-Time Animation and Effects with GLSL » workshop by Leander Herzoz at Mapping Festival 2019 / Geneva — my reading notes
▻https://github.com/olange/learning-webgl/blob/master/workshops/shaders-primer #glsl #webgl #mapping
« The Book of Shaders – GLSL Editor » by Patricio Gonzalez Vivo
▻http://editor.thebookofshaders.com #glsl #editor #webgl
« The Book of Shaders » by Patricio Gonzalez Vivo and Jen Lowe, 2015–ongoing ►https://thebookofshaders.com
A gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
Iván Sánchez Ortega / Leaflet.TileLayer.GL · GitLab
▻https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GL
With this plugin, you can apply colour transforms to your tiles, merge two or more tiles with a custom function, perform on-the-fly hillshading, or create synthetic tile layers based only on the map coordinates.
See several examples and edit them :
▻http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/repl.html
Why?
#Leaflet has been lagging behind when it comes to #WebGL technology. Other map libraries (such as OpenLayers 3 and most notably Tangram) can already use WebGL shaders to apply transformations to map tiles and do fancy stuff.
The inflexion point are MapBox’s “Terrain-RGB” tiles. WebGL manipulation of these tiles can provide real-time terrain relief and hill shading.
This takes some inspiration from shadertoy.com, in the sense that the shaders work on two triangles with some predefined attributes and uniforms.
#map
#cartographie #développement #web #leaflet #javascript et surtout : #glitter, le plus important
Introducing kepler.gl, Uber’s Open Source Geospatial Toolbox
▻https://eng.uber.com/keplergl
Les #arbres à Londres et New-York
▻https://seenthis.net/messages/549459
Start Scripting with deck.gl – vis.gl – Medium
▻https://medium.com/vis-gl/start-scripting-with-deck-gl-c9036d7a6011
kepler.gl
▻https://uber.github.io/kepler.gl
Lundi matin sur visionscarto.net - Philippe Rivière a réalisé un assemblage de la carte d’Urbano Monte, qui est l’un des premiers, et certainement l’un des plus extraordinaires, planisphères de l’histoire.
Dessinée à la main, en 1587, elle forme un Atlas de 60 feuilles dont seuls deux exemplaires existent au monde,
Nous vous proposons de la découvrir ci-dessous, en choisissant dans le menu la projection qui vous sied, et, avec la souris, l’angle de vue.
En français
►https://visionscarto.net/urbano-monte-fr
In english
▻https://visionscarto.net/urbano-monte
En español
▻https://visionscarto.net/el-mapa-de-urbano-monte
L’ensemble des planches ont récemment été numérisé par la collection David Rumsey - ►https://www.davidrumsey.com
Très très fier des encouragements de David Rumsey, et aussi d’avoir fait entrer visionscarto dans sa fabuleuse collection de 85 000 cartes anciennes que j’ai pu visiter à Stanford en septembre dernier.
▻https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~308989~90078901:Urbano-Monte-World-Map-Reprojection
Sur le plan technique, il s’agit de #projections #d3.js que j’ai recodées ou transposées en #WebGL. Projet de le publier en logiciel libre un jour ou l’autre (mais pas tout de suite, ça demandera une réécriture).
Merci @severo pour la traduction espagnole du billet.
C’est une magnifique ! Tes projections sont super inspirantes @fil
CSSVR: Progressive VR experiences
▻https://keithclark.co.uk/articles/css-vr
#CSS_VR_3D_WebGL_WebVR
Blotter.js - A JavaScript API for drawing unconventional text effects on the web
▻http://blotter.js.org
Blotter.js requires #Three.js and Underscore.js.
How I built a wind map with #WebGL – Points of interest
▻https://blog.mapbox.com/how-i-built-a-wind-map-with-webgl-b63022b5537f
There are many examples of wind power visualization online, but the most popular and influential one is earth.nullschool.net, a famous project by Cameron Beccario. It’s not open source itself, but it has an old open source version which most other implementations based their code on. One notable open source derivation is Esri Wind-JS. Popular weather services that use the technique include Windy and VentuSky.
Experience the Best Dinosaur Fossil of Its Kind in 3-D
▻http://www.nationalgeographic.com/magazine/2017/06/nodosaur-3d-interactive-dinosaur-fossil
le making-off plein de #three.js et de #webgl
▻https://source.opennews.org/articles/resurrecting-dragon
OpenVis Conf 2017
▻http://openvisconf.com
C’est la conférence de #visualisation_de_données pour le Web et toutes les vidéos sont dispo :
Mike Bostock
Keynote
#d3.express (conf déjà signalée par @b_b et dont on reparlera) : un environnement de développement / découverte de données avec un fonctionnement "réactif" (à la excel)
Shirley Wu & Nadieh Bremer
Data Sketch|es : A Visualization A Month
le plaisir des yeux sur ▻http://www.datasketch.es avec un accent prononcé sur le processus de création
Nicholas Belmonte
Visualizing Data with Deck GL
un outil pour faire du #WebGL qui a l’air bien sympa (voir aussi plus bas regl)
Matthew Brehmer
What Story does your Timeline Tell ?
tout sur les #timelines
Robert Simmon
An Introduction to GDAL for those afraid of the command line
#GDAL pour manipuler des données #géo, reprojeter des images etc (par l’auteur de la photo “Blue Marble” à la NASA)
Amelia McNamara
How Spatial Polygons Shape our World
▻https://github.com/AmeliaMN/SpatialPolygons
réflexions assez poussées sur les données #géo, les #cartogrammes, le #gerrymandering
Mikola Lysenko
Introducing Regl
une approche qui a l’air très puissante pour faire du #WebGL ►http://regl.party
John Alexis Guerra Gomez
Untangling the Hairball
réflexion assez marrante sur la visualisation de #réseaux
Catherine D’Ignazio & Rahul Bhargava
Designing Visualization Tools for Learners
des outils qui permettent de commencer à réfléchir à la visualisation de données ; la recherche porte sur la simplicité, les explications, les éléments d’aide et d’encouragement pour les débutants (C. D’Ignazio est aussi l’autrice de ►https://visionscarto.net/visualisation-donnees-feministe )
Matt Daniels
Visualizing Incarceration in the US on Polygraph
sur la #prison aux #États-Unis ; l’auteur se fait rabrouer par la salle sur l’éthique de son approche, et l’organisatrice de la conférence présente ensuite des excuses circonstanciées. L’auteur lui-même s’excuse plus tard dans un long post ▻https://medium.com/@matthew_daniels/on-monday-i-gave-a-presentation-about-incarceration-and-data-85b0f438ef9e
Amanda Cox
Keynote
dataviz au NYT, elle s’explique notamment sur l’#incertitude et la fameuse courbe de la probabilité de gagner qui voit Trump doubler Clinton la fameuse nuit du vote (très intéressant !)
Lisa Charlotte Rost
A Data Point Walks into a Bar : Designing Data for Empathy
comment exprimer les sentiments à travers les visualisations (voir aussi Eric Soco… plus bas)
Kai Chang
D3 with Canvas
techniques pour aller plus vite
Noah Veltman
Pulling a Polygon Out Of a Hat
conf géniale sur la transition d’un objet en un autre (comment transformer de façon continue et agréable à l’oeil un cercle en carré, un cheval en chaise, un Etat continu en archipel, etc.)
Julia Silge
Text Mining and Visualization The Tidy Way
analyser Jane Austen ▻http://tidytextmining.com
Amy Cesal
Why Does Data Vis Need a Style Guide
comment une organisation peut se donner des méthodes pour produire des graphes variés mais qui semblent appartenir à la même famille
Kanit "Ham" Wongsuphasawat, Dominik Moritz & Arvind Satyanarayan
Vega-Lite : A Grammar of Interactive Graphics
#vega-lite (que j’utilise un peu) permet d’aller vite sur les graphiques standards, en employant de bonnes valeurs par défaut
Eric Socolofsky
Data as a Creative Constraint
l’#art_génératif, l’émotion dans la visualisation (plein de super exemples)
Connor C. Gramazio
Empowering Effective Visualization (Color) Design
#couleurs et #palettes ; colorgorical ►http://vrl.cs.brown.edu/color ; ▻http://gramaz.io/d3-jnd
Alan Mclean
Hacking your health with JavaScript
à propos de cette nouvelle tendance type fitbit : comment faire des graphes qui incitent les gens à bouger de leur chaise pour leur #santé
Hadley Wickham
The Role of Visualization in Exploratory Data Analysis
un des boss de #R montre comment l’utiliser pour afficher des trucs
Des liens attrapés au vol :
#histogrammes :
▻http://tinlizzie.org/histograms
#gerrymandering :
▻http://redistrictinggame.org
#agrégation_spatiale
▻http://tinlizzie.org/~aran/spatialAggregation.html
#pycno et #cogran (calculs de #densité spatiale, rapprochement de jeux de données)
▻https://cran.r-project.org/web/packages/pycno/pycno.pdf
▻https://github.com/berlinermorgenpost/cogran
recommend a book (la première page d’un livre au hasard, sans mention de titre ni d’auteur)
▻http://www.recommendmeabook.com
surface-nets (recherche d’enveloppes de points en 2D ou 3D)
▻https://github.com/mikolalysenko/surface-nets
earcut (triangulation de polygones
▻https://github.com/mapbox/earcut
inconvergent (art procédural)
►http://inconvergent.net
wind map
▻http://hint.fm/projects/wind
each line one breath
▻http://www.johnfranzen.com/each-line-one-breath.html
box fitting
▻http://www.complexification.net/gallery/machines/boxFitting
Smoothly animate thousands of points with HTML5 Canvas and D3 - animations, canvas, data visualization - Peter Beshai
▻https://bocoup.com/blog/smoothly-animate-thousands-of-points-with-html5-canvas-and-d3
et avec #regl #WebGL on peut aller encore plus vite
▻http://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html
A Breathing Earth
▻https://visionscarto.net/a-breathing-earth
Title: A Breathing Earth Keywords: #art #colors #vegetation #cycles #Earth #d3.js Author: Nadieh Bremer Created: May 2017 Watch and see our Earth “breathing” throughout the year. All living organisms depend on these cycles in the growth of plants; for food, for oxygen, and more. Although we humans have started to affect these cycles, hopefully this gorgeous spectacle will be part of our lives for millennia to come.” Using data from the U.S. National Oceanic and Atmospheric Administration (...)
Miles of Ice Collapsing Into the Sea - The New York Times
▻https://www.nytimes.com/interactive/2017/05/18/climate/antarctica-ice-melt-climate-change.html
This is the first of three dispatches from a New York Times reporting trip to #Antarctica.
Avec de la #cartographie de flux de #glaciers très très wahouuu en #WebGL
A rapid disintegration of Antarctica might, in the worst case, cause the sea to rise so fast that tens of millions of coastal refugees would have to flee inland, potentially straining societies to the breaking point. Climate scientists used to regard that scenario as fit only for Hollywood disaster scripts. But these days, they cannot rule it out with any great confidence.
A Breathing Earth — Nadieh Bremer
▻http://www.datasketch.es/april/code/nadieh
#cartographie #beau, utilisant #pixi.js pour gérer le #WebGL, et #d3.js pour gérer les données.
#datasource ▻https://www.star.nesdis.noaa.gov/smcd/emb/vci/VH/index.php
Visualize Data Sets on the Web with Uber Engineering’s deck.gl Framework - Uber Engineering Blog
▻https://eng.uber.com/deck-gl-framework
#cartographie #calcul #gpu #javascript #webgl
▻http://uber.github.io/luma.gl
▻http://learningwebgl.com/blog/?p=28
Heat Distortion Effect | Demo 4: Water
▻http://tympanus.net/Tutorials/HeatDistortionEffect/index4.html
#WebGL_démo_wow_effet
Asteroid Mining - Most Valuable and Profitable Asteroids Ranking - Asterank
▻http://www.asterank.com/exoplanets
#three.js - documentation - Manual - Creating a scene
▻http://threejs.org/docs/#Manual/Introduction/Creating_a_scene
Three.js is a library that makes #webGL - #3D in the browser - easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.
Suisse Mania
▻http://www.suissemania.ch/explore
@fil ça mériterait un seen à part, non ?