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
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.
#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 :)
Apéro #d3.js jeudi 20 avril à La Gaîté lyrique, Paris, 18h
Pour y aller :
▻https://gaite-lyrique.net/infos
▻https://gaite-lyrique.net/sites/default/files/styles/slider/public/plan_quartier_new_horiz-01.png?itok=6FEjHJAH
il y aura notamment Ian Johnson l’auteur de ►http://blockbuilder.org et @maliciarogue l’autrice de “Practical D3.js”
gist-snap : snapshot thumbnails for bl.ocks.org
▻https://github.com/1wheel/gist-snap
Pratique en attendant que ça soit intégré en natif dans ►http://blockbuilder.org cf : ▻https://github.com/enjalot/blockbuilder/issues/171
#gist
Javascript Interactive Notebooks
kajero
▻https://github.com/JoelOtter/kajero
▻http://www.joelotter.com/kajero
semble le plus simple : tout se fait dans le browser, pas de kernel externe
jupyter+IJavaScript
▻https://github.com/n-riesco/ijavascript
installé et testé en local, avec anaconda ; mais j’ai un peu de mal à créer des visuels interactifs
nteract
▻https://github.com/nteract/nteract
(je n’avais pas réussi à l’installer initialement, mais après l’installation d’anaconda et de IJavaScript, nteract s’est mis à fonctionner, et la version en dev affiche les SVG)
sagemath
(apparemment pas encore possible avec sagemath / cocalc, cf. ▻https://github.com/sagemathinc/smc/issues/1582)
blockbuilder
►http://blockbuilder.org
blockbuilder n’est pas vraiment un notebook, mais pour moi un #outil de base utilisé quotidiennement ou presque depuis plusieurs mois
#programmation #exploration #données #javascript #R #python #notebook
le notebook pour la carte ci-dessus :
▻https://nbviewer.jupyter.org/gist/Fil/efb1c9f3f0a9092c420dfe4cef8def96
(il fonctionne dans nteract et dans jupyter)
autre notebook, qui permet à D3 de gérer un DOM :
▻https://nbviewer.jupyter.org/gist/Fil/aec6cbf62f9b71c3407db87d5eb592e7
#Rodeo, un nouveau notebook (pour python, donc un peu hors sujet ici) :
▻http://www.yhat.com/products/rodeo
nteractio propose maintenant Hydrogen, qui permet d’avoir le notebook à l’intérieur de l’éditeur Atom.
▻https://blog.nteract.io/hydrogen-interactive-computing-in-atom-89d291bcc4dd
Plein de notebooks (surtout en python)
▻https://github.com/jupyter/jupyter/wiki/A-gallery-of-interesting-Jupyter-Notebooks
un bon article sur les différents kernels de jupyter/nteract
▻http://corgibytes.com/blog/2017/06/13/advanced-nteract
▻https://kyso.io nouveau service pour partager des notebooks (cf. par exemple ▻https://kyso.io/fil/map et ▻https://kyso.io/laura/gauss-fitting )
jupyterlab gère plein de trucs dont la collaboration temps-réel, vega, vega-lite, geojson…
▻https://channel9.msdn.com/Events/PyData/Seattle2017/BRK11
▻https://github.com/jupyterlab/jupyterlab
*Iodide*
▻https://github.com/iodide-project/iodide
avec même la possibilité de travailler en python dans le browser (très expérimental)
▻https://github.com/iodide-project/pyodide
*Observable* devient de plus en plus intéressant, avec possibilité désormais d’utiliser ses notebooks dans une page web quelconque
▻https://beta.observablehq.com/@fil
▻https://seenthis.net/messages/633618
(je n’utilise pratiquement plus que ça)
Pour les #diff du format .ipynb (le truc pénible car le notebook contient code et résultats mélangés dans un fatras json), on peut utiliser
▻http://nbdime.readthedocs.io/en/stable
Vega / Vega-Lite
Introducting Vega Lite
▻https://medium.com/hci-design-at-uw/introducing-vega-lite-438f9215f09e
▻http://idl.cs.washington.edu/files/2017-VegaLite-InfoVis.pdf
Visdown (taper du vega en #markdown + #yaml)
▻http://visdown.amitkaps.com
The Lyra Visualization Design Environment (VDE) ►http://idl.cs.washington.edu/projects/lyra
What I Learned Recreating One Chart Using 24 Tools - Features - Source : An OpenNews project
▻https://source.opennews.org/en-US/articles/what-i-learned-recreating-one-chart-using-24-tools
Vega Editor
▻http://vega.github.io/vega-editor/index.html?mode=vega&spec=force_drag
Exemple de specs
▻https://github.com/vega/vega/blob/master/spec/airports.vg.json
Roll your own charting system
▻https://blog.interactivethings.com/roll-your-own-charting-system-69f5753efc1c
Users mailing list
▻https://groups.google.com/forum/#!topic/vega-js/9EDKEFEZ8Zo
Interaction scenarios
▻https://github.com/vega/vega/wiki/Interaction-Scenarios
un block test
▻http://bl.ocks.org/espinielli/87047968c67c02dbcb8d
vega-lite et #R
▻http://rud.is/b/2016/02/27/create-vega-lite-specs-widgets-with-the-vegalite-package
–---
gganimate : animation avec ggplot2
▻https://www.youtube.com/watch?v=9Y7Y1s4-VdA
Je cherche à représenter un organigramme de personnel : 1. dans une forme navigable avec javascript, 2. en image statique pour impression (image ou PDF).
Quelles types de représentations, et éventuellement quels outils vous pouvez me recommander ?
@fsoulabaille Oui, mais un peu plus sexy
Dernière mise à jour le 20 novembre 2001
et qui permette de naviguer dans des organigrammes plus grands, comme par exemple :
▻http://www.lestaxinomes.org/spip.php?page=arbre&id_rubrique=12
ou éventuellement :
▻http://lifemap.univ-lyon1.fr/mobile.index.html
mais en gardant la représentation verticale typique des administrations.
Hmmm du #flash si je ne me trompe pas. J’ai besoin que ça soit fait en #javascript, pas de flash. Ça vient du concours suivant :
▻https://community.articulate.com/articles/interactive-org-charts-elearning
qui est plus orienté vers la présentation du personnel. Je cherche plutôt une manière de générer automatiquement un arbre, d’une profondeur quelconque à pouvoir explorer de façon dynamique, et d’un autre côté : à pouvoir imprimer dans son ensemble.
Avec d3.js, quelques exemples intéressants :
– tous les arbres :
▻http://blockbuilder.org/search#text=tree
– un arbre navigable :
▻https://bl.ocks.org/mbostock/4339083
– un autre, du genre de celui de taxinomes :
▻http://blockbuilder.org/nehiljain/bd4df45db78262f1d943bc8b097a0a82
Celui-là est original :
▻http://blockbuilder.org/nitaku/b82c356f1969911042d6
Mais rien qui ressemble de près à un organigramme
▻https://en.wikipedia.org/wiki/Organizational_chart
Comme dit Stupeflip :
A bas la hiérarchie
Basé sur les bibliothèques suivantes :
– d3.js
– JavaScript InfoVis Toolkit
▻https://philogb.github.io/jit
– vis.js
– leaflet.js
– orgchart
►https://github.com/dabeng/OrgChart
– treant.js, basé sur jquery et raphael.js
►https://fperucic.github.io/treant-js
▻https://jquery.com
►https://dmitrybaranovskiy.github.io/raphael
Perso j’utilise le spacetree de JIT (JavaScript InfoVis Toolkit) pour les taxinomes et je n’ai pas encore trouvé mieux comme librairies pour ça, même si elle semble un peu vieillissante et que son API n’est pas super user friendly.
Binning: An Alternative to Point Maps | Mapbox
▻https://www.mapbox.com/blog/binning-alternative-point-maps
Binning is a great alternative technique for visualizing density when working with large data sets.
plein d’exemples en #d3.js : hexagones, triangles, carrés…
▻http://blockbuilder.org/search#text=bin
Tiens, ça me fait penser que je n’ai pas vu de code postal (#geohash, #openlocationcode, #what3words) basé sur une grille hexagonale. Ça n’apporterait sûrement rien de plus que les grilles rectangulaires, mais ça serait joli :)
Triangles
▻http://blockbuilder.org/armollica/dcfa9c27db140183bd87f3fc90efaf10
Cartogramme :
▻http://blockbuilder.org/shimizu/661f5e59ec3e848ad764
Hexagones, avec diamètre variable :
▻http://blockbuilder.org/mbostock/4330486
Hémicycle :
@fil oui, c’est aussi possible avec #turf.js :)
▻http://jsfiddle.net/nathansnider/ts4oyyn0
▻https://paulcrickard.wordpress.com/2015/02/18/density-map-with-turf-js
Je postais le lien original ici car j’en avais assez de le trimballer dans les onglets de mon nav depuis des mois :p