3D Internet Topology - bl.ocks.org
▻https://bl.ocks.org/vasturiano/2e655fdd1f378cb2002435fe33d7d6ec
#cartographie #D3 #D3js #3D
3D Internet Topology - bl.ocks.org
▻https://bl.ocks.org/vasturiano/2e655fdd1f378cb2002435fe33d7d6ec
#cartographie #D3 #D3js #3D
Simulation of collision between moving particles with different masses inside a container, using the d3-force physics engine.
« WebGL + d3.layout.force » de @vicapow (27.05.2018)
▻https://bl.ocks.org/vicapow/7f14a531dec565ca0884
Est-ce qu’il existe des alternatives libres à KRPano, Pano2VR… permettant de créer et afficher des panoramas 360° en ligne ?
Il y a deux aspects :
– fabriquer les « tuiles » d’images qui seront affichées (idéalement, un script côté serveur serait trop kikou)
– afficher la navigation 360° (idéalement : scriptable de l’extérieur pour pouvoir contrôler dynamiquement des hotspots, des zooms/dézooms, des changements de scènes…).
Pour l’affichage, je viens de voir Pannellum :
►https://pannellum.org
@b_b Je vois que tu l’avais référencé en 2015. Tu l’utilises ? Tu as des retours ?
►https://pannellum.org/documentation/overview
Panoramic images can be provided in either equirectangular, cube map, or multiresolution formats. Equirectangular is the simplest to use as only a single image is needed; Google Photo Sphere XMP metadata is automatically read and used if provided. However, to ensure support among all WebGL-capable devices, the maximum image size should be preferably limited to 4096 px wide; 8192 px is also acceptable for most devices. Cube maps require six images but support somewhat higher resolution panoramas, as the vast majority of devices support cube faces up to 4096 px across. Additionally, cube maps are supported by Pannellum’s fallback CSS 3D transform-based renderer and will therefore work on older mobile devices that don’t support WebGL. Although larger images are supported, download sizes should be taken into consideration. The final input format is Pannellum’s multiresolution format, which is generated from an equirectangular image using Pannellum’s generate.py Python script. This format is a cube map-based format, except each cube face is a tiled image pyramid instead of a single image. Arbitrarily large images are supported, the CSS 3D transform-based fallback renderer is supported, and load times are quick due to the image pyramids. The downside of this format is that extra work is required to convert an image to it and the large number of files that must be hosted.
Pour le 360 je fais du webgl à la main, mais c’est expérimental, et pas avec toutes les features de panellum. (Mon intérêt dans l’affaire est de faire des projections, et il se trouve que la projection stéréographique en fait partie.)
▻https://bl.ocks.org/fil/497d327919606ba6024cb13b4bee38a4
@arno non je n’ai pas joué avec Pannellum, j’avais référencé le bouzin pour un projet qui ne s’est pas fait...
Sur le même sujet, j’avais référencé ça aussi :
▻https://seenthis.net/messages/214135
▻https://seenthis.net/messages/214465
J’ai commencé à jouer avec Pannellum, ça m’a l’air de faire tout ce dont j’ai besoin dans le rendu. Notamment il y a une API pour contrôler l’affichage « après coup », ajouter des hotspots… et surtout ça gère le multirésolution :
▻https://pannellum.org/documentation/examples/multiresolution
Quand on a une image qui fait 4096 pixels (ou moins), c’est très facile à utiliser, on lui balance directement l’image équirectangulaire, et ça fonctionne tout seul (comme la démo de @fil).
En revanche, si on veut afficher des images plus grandes, il faut passer par les tuiles en multi-résolution, et pour ça il fournit uniquement un script Python, qui est une plaie à faire tourner (ça demande des dépendances, dont une certaine « nona » que je vais jamais réussir à installer sur un serveur normal – et que de toute façon ça marche déjà pas sur mon Mac) :
▻https://raw.githubusercontent.com/mpetroff/pannellum/master/utils/multires/generate.py
Ça serait tout de même bien pratique d’avoir un script PHP (comme maptiler pour les tuiles zoomables « à plat »).
Si je comprends bien, nona
sert à projeter ton immense image source en 6 faces de cube (front back top bottom left right), des images carrées donc, qui seront ensuite tuilées de façon assez classique. Si tu as la seconde partie, reste à implémenter la première. Mais si tes images sont énormes il faut peut-être faire ce traitement en amont de toute façon ?
Oui, c’est ça. J’ai trouvé des scripts Python qui semblent capables de fabriquer les 6 faces sans utiliser nona, et du coup un peu plus faciles à installer, ça serait déjà ça. Mais toujours pas idéal, parce qu’il faut tout de même installer Pillow pour Python.
Idéalement, j’aimerais au moins trouver un fonction php::imagick pour faire le job.
Et comme par ailleurs je n’arrive même pas à faire tourner le script generate.py, je n’ai pas trop d’idée de la structure des fichiers…
Après, pour le « en amont », le hic c’est :
– d’abord je n’arrive même pas à faire tourner le script en local, donc y’a même pas d’amont pour l’instant :-))
– l’idéal tout de même serait que l’usager puisse directement uploader ses images et badaboum ça fabrique le panoramique.
J’ai un souci assez similaire avec les tuiles « à plat » : je n’arrive pas à traiter correctement les images de plus de 4096 pixels. (édit : en local ; sur mon serveur, j’arrive à traiter au moins le double)
Et tout ça est, évidemment, documenté avec une extrême parcimonie, par des gens bloqués dans une zone de l’espace-temps où les plus grandes images sur le Web semblent faire 256 pixels de large en 8 bits.
Il y a script sphericalpano2cube pour imagemagick sur ce site au look 1990’s
▻http://www.fmwconcepts.com/imagemagick/sphericalpano2cube/index.php
Ah c’est à tenter. Le hic avec ces scripts sont ultra-lents.
Je viens aussi de trouver ceci : cmft - cubemap filtering tool
▻https://github.com/dariomanesku/cmft
Il faut encore que je trouve le mode d’emploi :-))
Ce que j’ai trouvé de plus abouti pour l’instant, c’est le script de Salix Alba :
▻https://stackoverflow.com/questions/29678510/convert-21-equirectangular-panorama-to-cube-map/29681646
Le hic c’est que ça tourne avec une image de 1280 pixels de large (et ça me fabrique une image avec les 6 faces du cube), mais avec l’image de 10000x5000 pixels, ça n’arrive jamais au bout.
si tu as un peu de budget tu peux essayer la version hébergée de ▻https://github.com/denivip/panorama (voir le bas de la page pour le contact). (Si budget zéro, tu peux essayer de l’installer toi-même.)
The Origin of Stimulus
▻https://github.com/stimulusjs/stimulus/blob/master/ORIGIN.md
«contemporary mainstream approaches are needlessly convoluted, […] we can do more, faster, with far less»
Et leur autre librairie Turbolinks, ça a l’air à la fois tout con mais génial comme principe !
▻https://github.com/turbolinks/turbolinks
Avoir un des avantages des applis « one page » (le chargement rapide) MAIS en gardant la conception habituelle page par page, et donc l’accessibilité, et l’ancienne méthode de chargement complet si ça ne marche pas.
#javascript #framework #HTML #webperf (au moins perçue)
Eclipses paths of totality (1961-2099)
▻https://visionscarto.net/eclipses-paths-of-totality
Title: Eclipses paths of totality (1961-2099) Keywords: #eclipses #space #Earth Sources: Solar Eclipses data collected by Xavier Jubier and converted to the GeoJSON format by Luke Stanke. Authors: Initial idea by Robert Crocker; implementation and rotation of the globe with #d3.js by Philippe Rivière. Date: 7 November 2017 Code: ▻https://bl.ocks.org/Fil Eclipses paths of totality Paths of totality of solar eclipses between 1961 and 2099. (Colors are arbitrary.) (...)
Graphiques linéaires géospatiaux
▻https://mtmx.github.io/blog/carto_lignes
Le cartographe anglais James Cheshire a édité une carte de la population mondiale en s’inspirant de ce mode de réprésentation et Ryan Brideau a eu la bonne idée de rechercher et de publier le processus permettant de jouer avec ces lignes. Récemment Timothée Giraud en a fait un package #R impeccable qui permet de s’amuser plus facilement avec ce type de représentation.
Voilà le résultat pour la population de France métropolitaine : chaque ligne approxime la population située sur la latitude correspondante, avec une animation montrant l’évolution depuis 1968 pour chaque année du recensement de l’Insee.
Empreintes d’éclipses - Luke Stanke, Philippe Rivière, Robert Crocker et Xavier Jubier - Visionscarto
▻https://visionscarto.net/empreintes-d-eclipses
▻https://bl.ocks.org/Fil/63366253a5d2f00640c15b096c29a38c
c’est joli, mais c’est surtout pour présenter ▻https://github.com/fil/d3-inertia
Frappé Charts
▻https://frappe.github.io/charts
GitHub-inspired simple and modern charts for the web with zero dependencies.
#graphes #javascript (et pas #d3.js)
▻http://blockbuilder.org/Fil/e0e862c46b4fe5087f28c6f601772d78
Ça tourne dans le vide le bockbuilder chez moi
et si tu vas directement sur ▻https://bl.ocks.org/Fil/e0e862c46b4fe5087f28c6f601772d78
?Encore une #idée_pour_spip s’il s’avère mieux que les autres, et s’il est relativement complet. Un jour il faudrait vraiment en choisir une de librairie récente et moderne et la mutualiser dans un plugin et l’utiliser pour les stats officiels et autres plugins ensuite.
Movement data in GIS #8: edge bundling for flow maps | Free and Open Source GIS Ramblings
►https://anitagraser.com/2017/10/08/movement-data-in-gis-8-edge-bundling-for-flow-maps
One popular approach in the data viz community to deal with this problem is edge bundling. The idea is to reduce visual clutter by generate bundles of similar edges.
Surprisingly, edge bundling is not available in desktop GIS. Existing implementations in the visual analytics field often run on GPUs because edge bundling is computationally expensive. Nonetheless, we have set out to implement force-directed edge bundling for the #QGIS Processing toolbox [0]. The resulting scripts are available at ►https://github.com/dts-ait/qgis-edge-bundling.
The main procedure consists of two tools: bundle edges and summarize. Bundle edges takes the raw straight lines, and incrementally adds intermediate nodes (called control points) and shifts them according to computed spring and electrostatic forces. If the input are 72 lines, the output again are 72 lines but each line geometry has been bent so that similar lines overlap and form a bundle.
Sankey with circular link and animated dashes - bl.ocks.org
▻https://bl.ocks.org/tomshanley/874923fe54b173735b456479423ac7d6
via Françoise Bahoken cc @fil
A version of the Sankey chart with circular links, with a stroke-dasharray animated to show direction.
Compare this version which uses arrows.
Ouaouh !
#sankey (animé !) #diagramme_de_flux
Notes on Re-designing B.J.S. Cahill’s Butterfly World Map
▻http://www.genekeyes.com/Redesigning-Cahill.html
Pages web de Gene Keyes sur la genèse de la #projection #Cahill-Keyes dont on a déjà parlé ici ▻https://seenthis.net/messages/206034
►http://fil.rezo.net/genekeyes
►http://bl.ocks.org/espinielli/5689783
Keyes a aussi publié une #critique très complète de la projection #Dymaxion de Buckminster Fuller
Pour résumer rapidement : Fuller a créé sa projection 30 ans après Cahill, pour régler (en moins bien) les questions déjà réglées par Cahill. Sur le plan des déformations, il y a de gros soucis (Norvège, Corée) ; la carte est très complexe, sans symétrie ni nécessité particulière, elle n’a pas d’équateur ; enfin là où la carte de Cahill est composée de 8 triangles de 10000km de côté, la carte de Fuller n’a pas d’échelle compréhensible, son graticule est tout fou, etc.
La projection de Cahill (version originale ou presque)
▻https://bl.ocks.org/geraldarthur/73f8beefbbe424259d13
affaire suivie ▻https://github.com/d3/d3-geo-projection/issues/125
Autres liens :
▻https://www.wired.com/2013/11/cahill-butterfly-vs-dymaxion-map
▻https://www.treehugger.com/sustainable-product-design/buckminster-fullers-dymaxion-map-updated-21st-century.html
#seenthis_nouveauté : on peut désormais référencer des « blocks », pages de code très utilisées dans la communauté
par exemple :
▻https://bl.ocks.org/Fil/9ff0ca1825369075394d0e77e149052c
▻https://bl.ocks.org/Fil/c36ed66a4d50d77150712c80642a78d5
▻https://bl.ocks.org/mbostock/9511ae067889eefa5537eedcbbf87dab
on peut aussi référencer des adresses blockbuilder, qui permettent du coup de commencer directement à bidouiller le code dans un éditeur interactif
▻http://blockbuilder.org/Fil/6d0abd3e94aff9ff40eb85e33a11f31b
Je ne sais pas si ce sera utile à beaucoup de monde, mais pour ma part j’utilise ces outils quotidiennement.
À noter pour #SPIP : comme c’est fait dans le plugin autoembed, c’est aussi automatiquement disponible dans le plugin ressources.
Intéressant.
La vignette est générée automatiquement ? ou c’est toi qui l’ajoute à ton bl.ock ?
Ok, je me disais aussi que ça devait être sacrément balaise pour pouvoir générer une vignette tout seul.
Bon, encore un truc avec lequel j’aimerais bien jouer si j’avais plus de temps...
Pas forcément non plus parce qu’il y a quand même pas mal de possibilités d’export svg ou png directement depuis d3. Je suis en train d’essayer de générer automatiquement les cartes statiques bleues que l’on utilise sur ►http://www.diplomatie.gouv.fr/fr par exemple et ça commence à marcher pas mal (export en svg et png) via d3 coté serveur
@fil (y) classe ça affiche bien la carte des cormorans par ici :)
StreamGraph | Data Viz Project
▻http://datavizproject.com/data-type/stream-graph
une analyse assez détaillée ce genre de #visualisation chez Visualising Data
▻http://www.visualisingdata.com/2010/08/making-sense-of-streamgraphs
Over the past couple of months I’ve noticed a number of new examples of streamgraphs working their way around the web. It has prompted me to finally get around to visiting this subject because these graphs always seem to stir great debate, one which seems to perfectly encapsulate the ongoing challenges faced within the visualisation field
on peut aussi détacher un peu les rubans
ou les tordre
montrer l’importance relative fluctuante au cours du temps de tel ou tel sujet
▻https://www.weadapt.org/knowledge-base/adaptation-decision-making/mitigation-and-adaptation-in-the-unfccc-debates
(et bien sûr les réacteurs nucléaires par @visionscarto ►https://visionscarto.net/reacteurs-nucleaires-en-construction)
un exemple sous #d3.js avec gestion automatique du placement des étiquettes
▻https://bl.ocks.org/curran/929c0cb58d5ec8dc1dceb7af20a33320
Creation and evaluation of graduated dot maps
▻https://www.researchgate.net/publication/318722017_Creation_and_evaluation_of_graduated_dot_maps
With graduated dot maps the number of dots on a map is smaller, reducing the likelihood of overlapping dots. This research introduces an automated method of generating graduated dot maps that arranges dots with blue-noise patterns to avoid overlap and uses clustering algorithms to replace densely packed dots with those of larger sizes.
#CCVT #cartographie #algorithme #point
voir aussi mon block sur le #CCPD
▻https://bl.ocks.org/Fil/983398617871ad90d2853f3b35a86b84
London’s ‘regeneration’ : the backdrop to Grenfell rage
▻https://www.ft.com/content/fb9d61ee-60a9-11e7-8814-0ac7eb84e5f1
#inégalités #londres #incendie #urban_matter #cartographie
et pour ce graphique qui montre les vrais points dans la distribution :
▻https://bl.ocks.org/johnburnmurdoch/bb151fe2b01894f94ce375eadea00855
(pour accéder à l’article je crois qu’il faut taper son titre dans google)
The Tower
The burnt skeleton of the Grenfell tower stands empty and silent in the centre of Europe’s busiest city, a tragic reminder of the fire that occurred in the early hours of 14 June 2017, of the tiers, the screams, the rage, the faces of those who lost everything that night, and of those who are mourning for their family, friends and neighbours, of the questions that are still waiting an answer. The terrible last moments in the tower were captured in text messages and phone calls to family and loved ones. ‘Mamma, I think I’m going to die. Thank you for all you have done for me’, Gloria Trevisan’s apartment was on 23rd floor. She called her mum in Italy several times over the night, these are her last words as flames and smoke crept into their home.
A really fast #JavaScript library for #Delaunay triangulation of 2D points.
▻https://mapbox.github.io/delaunator
ping @fil
#map
▻https://bl.ocks.org/Fil/7f8cf2557039c4cad69bd8b1872723f1
pour l’intégrer avec #d3.js (et je confirme que c’est plus rapide que la fonction de D3)
Mavo: A new, approachable way to create Web applications
▻https://mavo.io
Mavo helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend.
Developed at MIT CSAIL and led by Lea Verou.
introduction:
▻https://www.smashingmagazine.com/2017/05/introducing-mavo
Ça tue le game du #CMS, ça oblige en tout cas à repenser beaucoup de choses…
Mavo is a language that extends HTML to describe applications that manage, store, and transform data
la doc officielle : ▻https://mavo.io/docs
#mavo #application #portable #js #html
Projet d’un labo du MIT (dont Lea Verou), avec même une étude utilisateur pour valider le concept, review scientifique et tout. Z’ont pas fait les choses à moitié…
Encore un truc à apprendre. :)
oui mais contrairement à d’autres trucs, c’est très très facile
▻https://bl.ocks.org/Fil/bd34bc50c53608fc1ab6f3472e065769
without a single line of programming code
Hum... J’ai cru lire du code JS dans l’exemple ci-dessus.
Bah non, l’exemple écrit par @fil c’est du JS de D3 qui interagit avec Mavo.
See Human Impact in an X-Ray of the Ocean
▻http://www.nationalgeographic.com/magazine/2017/04/explore-human-impact-on-oceans
The map above is essentially an x-ray of the ocean, and the colors show where it’s feeling the most impact from human activity. The darker the area, the more stressed the waters are by fishing, shipping, the destabilizing effects of climate change, or all three.
Such a map is rare. The vastness and depth of the ocean make it notoriously difficult to study. But in 2008 a team of researchers used satellite images and modeling software to make a complete portrait of human effects on the ocean. Five years later they did it again, capturing a comprehensive view of an ocean in transition. Among the revelations: Two-thirds of the ocean shows increased strain from human-related factors, such as fishing and climate change. And more than three-quarters of coastal waters suffer from climate change and increases in the effects of harmful land-based activities, including pollution. In all, the researchers classified more than 40 percent of the ocean as “heavily impacted” by human activity.
#océan #pêche #climat #pollution #activités_humaines #cartographie
visuellement c’est très beau et très intéressant cette projection centrée sur les océans
Une homolosine interrompue avec un choix d’angles bien adapté :)
▻https://bl.ocks.org/Fil/d90a94d7333bfef753e92a4abb7611b4
Une homolosine interrompue...
je me disais bien aussi ! :))
Merci @fil
On peut faire quelque chose de similaire avec une Mollweide interrompue : Selecting a Map #Projection - National Geographic Society
▻http://www.nationalgeographic.org/media/selecting-map-projection