HEGP
/
dataviz
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Add first part of course 3

master
Maxime Wack 5 years ago
parent
0f1a75eab3
commit
fa754381cc
16 changed files with 911 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +213
    -0
      courses/03-design-tabulaire.Rmd
  2. BIN
      courses/03_img/ClearOffTheTableMd.gif
  3. BIN
      courses/03_img/data-ink.gif
  4. BIN
      courses/03_img/designprinciples.png
  5. BIN
      courses/03_img/devourThePie3.gif
  6. BIN
      courses/03_img/excel_data.png
  7. BIN
      courses/03_img/excel_graph.png
  8. BIN
      courses/03_img/excel_menu.png
  9. BIN
      courses/03_img/map_reduce2.gif
  10. BIN
      courses/03_img/princ_contraste.png
  11. BIN
      courses/03_img/princ_equilibre.png
  12. BIN
      courses/03_img/princ_hierarch.png
  13. BIN
      courses/03_img/princ_motif.png
  14. BIN
      courses/03_img/princ_mouvement.png
  15. BIN
      courses/03_img/princ_unite.png
  16. +698
    -0
      courses/03_img/principles.svg

+ 213
- 0
courses/03-design-tabulaire.Rmd View File

@@ -0,0 +1,213 @@
---
title: "Principes de design, Visualisation de données tabulaires"
author: "Maxime Wack"
date: "19/11/2019"
output:
xaringan::moon_reader:
css: ['default','css/my_style.css']
lib_dir: libs
seal: false
nature:
ratio: '4:3'
countIncrementalSlides: false
self-contained: true
beforeInit: "addons/macros.js"
---

```{r, include = FALSE}
library(ggplot2)
library(dplyr)
```

class: center, middle, title

# UE Visualisation

### 2019-2020

## Dr. Maxime Wack

### AHU Informatique médicale
#### Hôpital Européen Georges Pompidou, </br> Université de Paris

---
class: center, middle
# Objectifs

## Principes de design

## Visualisation de données tabulaires

---
class: center

# *Éléments* de design

### Espace
### Point
### Ligne
### Surface
### Taille
### Couleur
### Forme
### ...

---
class: center,middle

# *Principes* de design

Autant de principes que de designers

![:scale 50%](03_img/designprinciples.png)

[https://principles.design](https://principles.design)

---
class: center,middle

# Principes de design

### Unité/Harmonie
### Motifs
### Équilibre
### Hiérarchisation
### Mouvement
### Contraste

---
class: center,middle


# Unité / Harmonie

.pull-left[
### Principe **fondamental** de la visualisation

### L'ensemble doit être **visuellement cohérent**

### Notion de **composition** des éléments en un tout
]

.pull-right[![:scale 100%](03_img/princ_unite.png)]

---
class: center,middle


# Motifs

.pull-left[
### Répétition **régulière** d'un ou plusieurs *éléments*

### Principal outil de la visualisation de **collections de données**
]

.pull-right[![:scale 100%](03_img/princ_motif.png)]

---
class: center,middle


# Équilibre

.pull-left[
### Distribution **équilibrée** des éléments visuels

### Utiliser la **symmétrie** pour comparer

### Utiliser l'**assymétrie** pour appuyer sur les différences

### La symmétrie **radiale** permet d'organiser autour d'un élément central
]

.pull-right[![:scale 100%](03_img/princ_equilibre.png)]

---
class:center,middle

# Hiérarchisation

.pull-left[
### **Insister** sur le message à communiquer

### Donner une **importance relative** indicative de la réalité

### Choix des couleurs (*rareté* des couleurs)

### Gestion du **contraste**

### **Échelles** et **proportions**
]

.pull-right[![:scale 80%](03_img/princ_hierarch.png)]

---
class: center,middle

# Mouvement

.pull-left[
### Même sur une image **fixe**

### Notion de directionalité

### **Diriger** le regard du lecteur
]

.pull-right[![:scale 100%](03_img/princ_mouvement.png)]

---
class:center,middle

# Contraste

.pull-left[
### **Juxtaposition** d'éléments **opposés** (couleur, luminosité, direction)

### Mise en avant **relative**

### Contraste ↔ Similarité
]

.pull-right[![:scale 100%](03_img/princ_contraste.png)]

---
class:center,middle

# Code

## **Pas** de code spécifique

### Application des *principes* en manipulant les *éléments*

### *Data* → **Motifs, Mouvement**
### *Aesthetics* → **Hiérarchisation, Contraste**
### *Theme* → **Unité, Équilibre**

---
class:center, middle

# Exemples

[Dark Horse Analytics](https://www.darkhorseanalytics.com/blog/data-looks-better-naked)

---
class:center, middle

![](03_img/data-ink.gif)

---
class:center, middle

![](03_img/ClearOffTheTableMd.gif)

---
class:center, middle

![](03_img/map_reduce2.gif)

---
class:center, middle

![](03_img/devourThePie3.gif)

BIN
courses/03_img/ClearOffTheTableMd.gif View File

Before After
Width: 750  |  Height: 563  |  Size: 3.0MB

BIN
courses/03_img/data-ink.gif View File

Before After
Width: 640  |  Height: 460  |  Size: 1.3MB

BIN
courses/03_img/designprinciples.png View File

Before After
Width: 743  |  Height: 786  |  Size: 83KB

BIN
courses/03_img/devourThePie3.gif View File

Before After
Width: 750  |  Height: 563  |  Size: 446KB

BIN
courses/03_img/excel_data.png View File

Before After
Width: 263  |  Height: 243  |  Size: 30KB

BIN
courses/03_img/excel_graph.png View File

Before After
Width: 493  |  Height: 302  |  Size: 25KB

BIN
courses/03_img/excel_menu.png View File

Before After
Width: 305  |  Height: 314  |  Size: 47KB

BIN
courses/03_img/map_reduce2.gif View File

Before After
Width: 750  |  Height: 563  |  Size: 2.8MB

BIN
courses/03_img/princ_contraste.png View File

Before After
Width: 500  |  Height: 500  |  Size: 12KB

BIN
courses/03_img/princ_equilibre.png View File

Before After
Width: 500  |  Height: 500  |  Size: 15KB

BIN
courses/03_img/princ_hierarch.png View File

Before After
Width: 400  |  Height: 618  |  Size: 25KB

BIN
courses/03_img/princ_motif.png View File

Before After
Width: 500  |  Height: 500  |  Size: 9.8KB

BIN
courses/03_img/princ_mouvement.png View File

Before After
Width: 500  |  Height: 500  |  Size: 20KB

BIN
courses/03_img/princ_unite.png View File

Before After
Width: 500  |  Height: 500  |  Size: 20KB

+ 698
- 0
courses/03_img/principles.svg View File

@@ -0,0 +1,698 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg4588"
width="4400"
height="3400"
viewBox="0 0 4400 3400"
sodipodi:docname="principles.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<metadata
id="metadata4594">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4592">
<symbol
id="ToiletsWomen">
<title
id="title5272">Toilets - Women</title>
<g
style="stroke:none"
id="g5278">
<circle
cx="36"
cy="10"
r="5"
id="circle5274" />
<path
d="m 35.5,64 a 2.5,2.5 0 0 1 -5,0 l 0,-17 -6.5,0 7,-23.5 -1,0 -4.1,13.4 a 2.1,2.1 0 0 1 -4,-1.2 L 26.5,20.5 A 6.5,6.5 0 0 1 33,16 l 6,0 a 6.5,6.5 0 0 1 6.5,4.5 l 4.6,15.2 a 2.1,2.1 0 0 1 -4,1.2 L 42,23.5 l -1,0 7,23.5 -6.5,0 0,17 a 2.5,2.5 0 0 1 -5,0 l 0,-17 -1,0 z"
id="path5276" />
</g>
</symbol>
</defs>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview4590"
showgrid="false"
inkscape:zoom="0.064852941"
inkscape:cx="8071.5346"
inkscape:cy="-2445.4592"
inkscape:current-layer="svg4588"
inkscape:snap-nodes="false"
inkscape:snap-global="false" />
<g
id="g11020"
inkscape:export-xdpi="21.540001"
inkscape:export-ydpi="21.540001">
<rect
ry="7.5118055"
y="4478.6553"
x="5571.167"
height="2228.1182"
width="2228.1179"
id="rect10910-6"
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.59958506;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<g
transform="matrix(1.3058486,0,0,1.3058486,-2044.6667,-1710.5237)"
inkscape:export-ydpi="31.68"
inkscape:export-xdpi="31.68"
id="g10908">
<use
transform="matrix(12.810699,0,0,12.810699,5799.1159,4873.2598)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#ededed;fill-opacity:1;stroke:#000000"
id="use10327-6" />
<use
transform="matrix(12.810699,0,0,12.810699,5865.6317,5018.6524)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#c8c8c8;fill-opacity:1;stroke:none;stroke-opacity:1"
id="use10327-6-8-8-4-3-1" />
<use
transform="matrix(12.810699,0,0,12.810699,6028.5544,5182.0088)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#7c7c7c;fill-opacity:1;stroke:#000000"
id="use10327-6-8-8-4-3" />
<use
transform="matrix(12.810699,0,0,12.810699,6280.8317,5295.9774)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#5b5b5b;fill-opacity:1;stroke:#000000"
id="use10327-6-8-8-4" />
<use
transform="matrix(12.810699,0,0,12.810699,6648.9655,5396.2042)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10327-6-8-8" />
</g>
</g>
<g
id="g10978"
inkscape:export-xdpi="21.540001"
inkscape:export-ydpi="21.540001">
<rect
ry="7.5118055"
y="3366.5959"
x="116.46424"
height="2228.1182"
width="2228.1179"
id="rect10910-2"
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.59958506;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<g
inkscape:export-ydpi="15.91"
inkscape:export-xdpi="15.91"
inkscape:export-filename="/home/maxx/Documents/Cours/dataviz/courses/03_img/princ_motif.png"
transform="matrix(1.1872524,0,0,1.1872524,-692.66623,-989.87526)"
id="g10541">
<use
id="use10327"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,1654.9429,4297.4698)" />
<use
id="use10347"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,1307.443,4297.4698)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,959.94297,4297.4698)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10349" />
<use
id="use10355"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,612.44292,4297.4698)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,2002.4429,4297.4698)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10357" />
<use
id="use10671"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,2002.4429,4297.4698)" />
</g>
</g>
<g
id="g10985"
inkscape:export-xdpi="21.540001"
inkscape:export-ydpi="21.540001">
<rect
ry="7.5118055"
y="6277.2031"
x="-198.32976"
height="2228.1182"
width="2228.1179"
id="rect10910-9"
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.59958506;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<g
inkscape:export-ydpi="37.040001"
inkscape:export-xdpi="37.040001"
inkscape:export-filename="/home/maxx/Documents/Cours/dataviz/courses/03_img/princ_contraste.png"
transform="matrix(2.4255717,0,0,2.4255717,-1730.9923,-5768.1327)"
id="g10546">
<rect
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
id="rect10392"
width="359.8067"
height="616.03271"
x="1073.9685"
y="5117.2593"
ry="6.2641702" />
<use
transform="matrix(8.6784101,0,0,8.6784101,944.0057,5110.5869)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#ffffff;fill-opacity:1;stroke:#000000"
id="use10349-2" />
<use
id="use10355-9"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,596.50569,5110.5869)" />
</g>
</g>
<g
id="g11047">
<rect
ry="7.5118055"
y="6925.4741"
x="2274.0635"
height="2228.1182"
width="2228.1179"
id="rect10910-4"
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.59958506;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<g
inkscape:export-ydpi="32.740002"
inkscape:export-xdpi="32.740002"
inkscape:export-filename="/home/maxx/Documents/Cours/dataviz/courses/03_img/princ_hierarch.png"
transform="matrix(0.85136498,0,0,0.85136498,2761.5448,1794.6314)"
id="g10534">
<g
id="g10426">
<use
transform="matrix(8.6784101,0,0,8.6784101,771.04551,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10327-1" />
<use
transform="matrix(8.6784101,0,0,8.6784101,423.54561,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10347-2" />
<use
id="use10349-7"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6028.1684)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10355-0" />
<use
id="use10357-9"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,1118.5455,6028.1684)" />
</g>
<use
id="use10327-1-8"
style="fill:#ec0707;fill-opacity:1;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,771.04551,6692.6633)" />
<use
id="use10347-2-7"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,423.54561,6692.6633)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6692.6633)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10349-7-9" />
<use
id="use10355-0-20"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6692.6633)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,1118.5455,6692.6633)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10357-9-2" />
<g
id="g10426-37"
transform="translate(0,1328.99)">
<use
transform="matrix(8.6784101,0,0,8.6784101,771.04551,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10327-1-5" />
<use
transform="matrix(8.6784101,0,0,8.6784101,423.54561,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10347-2-9" />
<use
id="use10349-7-2"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6028.1684)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10355-0-28" />
<use
id="use10357-9-9"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,1118.5455,6028.1684)" />
</g>
<g
id="g10426-7"
transform="translate(0,1993.4853)">
<use
transform="matrix(8.6784101,0,0,8.6784101,771.04551,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10327-1-3" />
<use
transform="matrix(8.6784101,0,0,8.6784101,423.54561,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10347-2-6" />
<use
id="use10349-7-1"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6028.1684)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10355-0-29" />
<use
id="use10357-9-3"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,1118.5455,6028.1684)" />
</g>
</g>
</g>
<g
id="g11002"
inkscape:export-xdpi="21.540001"
inkscape:export-ydpi="21.540001">
<rect
ry="7.5118055"
y="4228.2012"
x="3099.9976"
height="2228.1182"
width="2228.1179"
id="rect10910-0"
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.59958506;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<g
inkscape:export-ydpi="27.83"
inkscape:export-xdpi="27.83"
inkscape:export-filename="/home/maxx/Documents/Cours/dataviz/courses/03_img/princ_equilibre.png"
id="g10660">
<use
transform="matrix(29.387505,0,0,29.387505,2881.5003,4289.1492)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10355-1" />
<g
id="g10534-9"
transform="matrix(0.7171342,0,0,0.7171342,4537.5181,81.963104)">
<g
id="g10426-4">
<use
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10349-7-4" />
<use
id="use10355-0-5"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6028.1684)" />
</g>
<use
id="use10349-7-9-1"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6692.6633)" />
<use
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6692.6633)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10355-0-20-0" />
<g
transform="translate(0,1328.99)"
id="g10426-37-3">
<use
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10349-7-2-6" />
<use
id="use10355-0-28-1"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6028.1684)" />
</g>
<g
transform="translate(0,1993.4853)"
id="g10426-7-5">
<use
transform="matrix(8.6784101,0,0,8.6784101,76.045579,6028.1684)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10349-7-1-6" />
<use
id="use10355-0-29-5"
style="fill:#000000;stroke:#000000"
xlink:href="#ToiletsWomen"
x="0"
y="0"
width="100%"
height="100%"
transform="matrix(8.6784101,0,0,8.6784101,-271.45447,6028.1684)" />
</g>
</g>
</g>
</g>
<g
id="g10968"
inkscape:export-xdpi="21.540001"
inkscape:export-ydpi="21.540001">
<rect
ry="7.5118055"
y="1655.6438"
x="5312.0015"
height="2228.1182"
width="2228.1179"
id="rect10910"
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.59958506;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
<g
inkscape:export-ydpi="19.110001"
inkscape:export-xdpi="19.110001"
inkscape:export-filename="/home/maxx/Documents/Cours/dataviz/courses/03_img/princ_unity.png"
id="g10792">
<g
id="g10740"
transform="rotate(45,6426.0607,2769.7028)">
<g
id="g10711">
<use
transform="matrix(12.810699,0,0,12.810699,5964.8756,2922.693)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7" />
<use
transform="matrix(-12.810699,0,0,-12.810699,6887.2459,2616.7127)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7-4" />
</g>
<g
transform="matrix(0,-1,-1,0,9195.7636,9195.7636)"
id="g10711-5">
<use
transform="matrix(12.810699,0,0,12.810699,5964.8756,2922.693)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7-2" />
<use
transform="matrix(-12.810699,0,0,-12.810699,6887.2459,2616.7127)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7-4-5" />
</g>
</g>
<g
id="g10740-4"
transform="translate(-5.0000001e-5,2.0710678e-5)">
<g
id="g10711-7">
<use
transform="matrix(12.810699,0,0,12.810699,5964.8756,2922.693)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7-44" />
<use
transform="matrix(-12.810699,0,0,-12.810699,6887.2459,2616.7127)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7-4-3" />
</g>
<g
transform="matrix(0,-1,-1,0,9195.7636,9195.7636)"
id="g10711-5-0">
<use
transform="matrix(12.810699,0,0,12.810699,5964.8756,2922.693)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7-2-7" />
<use
transform="matrix(-12.810699,0,0,-12.810699,6887.2459,2616.7127)"
height="100%"
width="100%"
y="0"
x="0"
xlink:href="#ToiletsWomen"
style="fill:#000000;stroke:#000000"
id="use10671-7-4-5-8" />
</g>
</g>
<circle
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
id="path10775"
cx="6426.0605"
cy="2769.7029"
r="127.21088" />
</g>
</g>
</svg>

Write Preview
Loading…
Cancel
Save