shuding/cobe : 5kB WebGL globe lib.
▻https://github.com/shuding/cobe
-
-
API Reference | MapLibre GL JS Docs | MapLibre
▻https://maplibre.org/maplibre-gl-js-docs/apiMapLibre GL is a community led fork derived from #mapbox-gl-js prior to their switch to a non-OSS license.
▻https://github.com/maplibre/maplibre-gl-js
Un fork de la dernière version « libre » de Mapbox GL. Un peu de contexte sur l’histoire du bouzin :
After Mapbox announced the closure of Mapbox GL JS, their JavaScript library for displaying maps using #WebGL, the community made a collective decision to maintain and further develop the last open-source version and build a free alternative.
▻https://www.maptiler.com/news/2021/01/mapbox-gl-open-source-fork
Mapbox-gl-js is no longer under the 3-Clause BSD license
▻https://news.ycombinator.com/item?id=25347310
#map
-
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.GLWith 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.htmlWhy?
#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-c9036d7a6011kepler.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-frIn english
▻https://visionscarto.net/urbano-monteEn español
▻https://visionscarto.net/el-mapa-de-urbano-monteL’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-ReprojectionSur 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.orgBlotter.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
#cartographie-
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-fossille making-off plein de #three.js et de #webgl
▻https://source.opennews.org/articles/resurrecting-dragon -
OpenVis Conf 2017
▻http://openvisconf.comC’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 Monthle plaisir des yeux sur ▻http://www.datasketch.es avec un accent prononcé sur le processus de création
Nicholas Belmonte
Visualizing Data with Deck GLun 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/SpatialPolygonsréflexions assez poussées sur les données #géo, les #cartogrammes, le #gerrymandering
Mikola Lysenko
Introducing Reglune approche qui a l’air très puissante pour faire du #WebGL ►http://regl.party
John Alexis Guerra Gomez
Untangling the Hairballréflexion assez marrante sur la visualisation de #réseaux
Catherine D’Ignazio & Rahul Bhargava
Designing Visualization Tools for Learnersdes 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 Polygraphsur 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
Keynotedataviz 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 Empathycomment exprimer les sentiments à travers les visualisations (voir aussi Eric Soco… plus bas)
Kai Chang
D3 with Canvastechniques pour aller plus vite
Noah Veltman
Pulling a Polygon Out Of a Hatconf 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 Wayanalyser Jane Austen ▻http://tidytextmining.com
Amy Cesal
Why Does Data Vis Need a Style Guidecomment 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 Constraintl’#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 Analysisun 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/cogranrecommend a book (la première page d’un livre au hasard, sans mention de titre ni d’auteur)
▻http://www.recommendmeabook.comsurface-nets (recherche d’enveloppes de points en 2D ou 3D)
▻https://github.com/mikolalysenko/surface-netsearcut (triangulation de polygones
▻https://github.com/mapbox/earcutinconvergent (art procédural)
►http://inconvergent.netwind map
▻http://hint.fm/projects/windeach line one breath
▻http://www.johnfranzen.com/each-line-one-breath.htmlbox 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-d3et 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-earthTitle: 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.htmlThis 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
Mandelbrot set rendered on GPU using native 32-bit (left) math and 64-bit (right) math library provided by deck.gl.
▻http://uber.github.io/deck.gl#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_sceneThree.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.
