diff --git a/README.md b/README.md index e5e654ff6c2f9f9861908a910d829aeaba476e78..f15ec23cefcc4e8fdbe0096373e8ee49dee71599 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,17 @@ # Visualisation interactive de données -Enseignant: [Romain Vuillemot](http://romain.vuillemot.net/), *École Centrale de Lyon/Département Math-Info*. Pour tout contact : romain.vuillemot@ec-lyon.fr +<div style="margin-left: auto; + margin-right: auto; + width: 80%"> +<img src="figures/teaser-visu.png" width=100%> +</div> +Enseignant: [Romain Vuillemot](http://romain.vuillemot.net/), *École Centrale de Lyon/Département Math-Info*. Pour tout contact : romain.vuillemot@ec-lyon.fr Documents à compléter pendant les séances : - [Etudiants inscrits et groupes de projets](https://docs.google.com/spreadsheets/d/1fUvgXG1gtRYhyXBRAFY6iPQp_UkclOb_nXQ9juXViqI/edit#gid=687151605) -- [Formulaire pour le rendu des TP](https://forms.gle/Ty22LXDWMxULDiHeA) +- [Formulaire pour le rendu des TP](https://forms.gle/FRJ1TcRnT5P6eUhZ7) - [Exemples de visus](https://docs.google.com/presentation/d/1JuBqMUw9xpZU7eXuYjwURr51K6fsDiA_ZjeQWtr3zrM/edit?usp=sharing) Documents à lire : @@ -36,7 +41,7 @@ Documents à lire : ➡ Pour la prochaine séance * [TP 1 Tableau](pdf/tp1.pdf) : finir et à rendre (rendu individuel) - * S'auto-former à JavasScript, Observable et Observable Plots ([exercices d'auto-évaluation](https://www.freecodecamp.org/learn/data-visualization/) à réaliser pas à rendre) + * S'auto-former à JavaScript, D3.JS ([exercices d'auto-évaluation](https://www.freecodecamp.org/learn/data-visualization/) à réaliser pas à rendre) * [Projets](https://partage.liris.cnrs.fr/index.php/s/RBk8L7ipzdgk5n5) : réfléchir à un choix de sujet de sujet et de groupe --- @@ -45,18 +50,23 @@ Documents à lire : ### Cours 2 - * [Visualiser le temps](https://docs.google.com/presentation/d/1HPwRnoc5SvvuhCmxyKnljgqa0oRH6ugDlhM0JQ8qLmM/edit) et [visualiser l'espace](https://docs.google.com/presentation/d/1fY3EHmalb53aZVNYqv2UHjg9_kbtR26saexPTgPKKJs/edit) - * Dessin et représentation de données en D3 + * [Visualiser le temps](https://docs.google.com/presentation/d/1HPwRnoc5SvvuhCmxyKnljgqa0oRH6ugDlhM0JQ8qLmM/edit) + * Case d'étude : [données climatiques](https://docs.google.com/presentation/d/1oalVDPAET17c_YuwezBAMoGCkWIQUI6MgZGwjZwyIiM/edit#slide=id.p) et [données covid](https://docs.google.com/presentation/d/1rj_m1uWkTc5-btxfKenx8xOhWGlhPeQ0Mhsw43UUjv0/edit#slide=id.gab70abed7c_0_258) + +Exercices en cours : + * [Jeu de données penguins](https://observablehq.com/@observablehq/plot-exploration-penguins) + * [Jeu de données weather](https://observablehq.com/@observablehq/plot-exploration-weather) + * [Tutorial timeline](https://observablehq.com/@observablehq/timeseries-workshop-materials?collection=@observablehq/tutorial) : [Part 1](https://observablehq.com/@observablehq/timeseries-workshop-part-1-the-basics), [Part 2](https://observablehq.com/@observablehq/timeseries-workshop-part-2-discovering-date-patterns), [Part 32](https://observablehq.com/@observablehq/timeseries-workshop-part-3-looking-more-deeply-at-the-data) + ### TP 2 - * Utiliser Observbale Plot : exploration d'un jeu de données (en classe) - * TP 2 Observable : exercice de visualisation de données (commencé en classe, à rendre) + * [TP 2 Observable](pdf/tp2-observable.pdf) : exercice de visualisation de données (commencé en classe, à rendre) ➡ Pour la prochaine séance - * TP 2 Observable : finir et à rendre (rendu individuel) - * S'auto-former à : SVG, CSS, JS Avancée + * [TP 2 Observable](pdf/tp2-observable.pdf) : à rendre (rendu individuel mais travail en binôme possible) + * S'auto-former à : [SVG, CSS](https://observablehq.com/@nithyaramgopal/lab-1/2 ), [D3.JS](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3) * [Projets](https://partage.liris.cnrs.fr/index.php/s/RBk8L7ipzdgk5n5) : validation du sujet de projet (par le professeur) et cahier des charges (lien à inscrire sur le document deu cours) --- @@ -65,20 +75,19 @@ Documents à lire : ### Cours 3 - * Visualisations relationnelles et hierarchiques - * Encapsulation de graphiques en D3 + * [Visualiser l'espace](https://docs.google.com/presentation/d/1fY3EHmalb53aZVNYqv2UHjg9_kbtR26saexPTgPKKJs/edit) + * Programme en D3.JS + * Visualisations simples en D3.JS : scatterplot, bar chart, line chart. ### TP 3 - * Tableau de bord de visualisations avec D3 - * TP 3 Dashboard : réaliser un tableau de bord en D3 + * TP 3 Dashboard : réaliser un tableau de bord en D3.JS ➡ Pour la prochaine séance - - * S'auto-former à : D3 Avancé * TP 3 Dashboard : à rendre - * Projets : Maquette papier de l'interface et tableau de bord + * S'auto-former à D3 Avancé + * Projets : Maquette papier du projet --- @@ -94,7 +103,7 @@ Documents à lire : ➡ Pour la prochaine séance - * TP 4 Geo map : rendu + * TP 4 Geo map : à rendre * Projets : V1 du projet avec graphiques descriptifs --- @@ -103,8 +112,8 @@ Documents à lire : ### Cours 5 -- Interactions avancées en D3 -- Layouts avancés + * Visualisations relationnelles et hierarchiques + * Interactions et layouts avancés en D3 ### TP 5 diff --git a/figures/teaser-visu.png b/figures/teaser-visu.png new file mode 100644 index 0000000000000000000000000000000000000000..68d609cad24bc27667c29f77330a7e1516a06fdd Binary files /dev/null and b/figures/teaser-visu.png differ