add 3Djs leaflet paperjs

user/pages/_links/_link/text.md

@@ -6,7 +6,3 @@ content:
         by: ''
         dir: ''
 ---
-
-Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
-
-On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.

user/pages/_reseaux-sociaux/_reseaux/text.md

@@ -2,7 +2,3 @@
 title: Reseaux
 image_align: left
 ---
-
-Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
-
-On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.

user/pages/_streetmap/_streetmap/text.md

@@ -2,7 +2,3 @@
 title: Streetmap
 image_align: left
 ---
-
-Faux-texte: a pour fonction de faire office de texte de substitution ou d'outil permettant la comparaison et l'appréciation de différentes polices.
-
-On appelle Lipsum un texte qui, en l'absence du texte définitif, sert de substitut aux futurs contenus lors de la production de maquettes pour les publications ou sites Web. Le terme Lipsum est issu de la contraction du plus connu de ce type de texte "Lorem ipsum". Ils sont également connus sous les noms de texte blanc, faux-texte, bolo bolo, pseudo texte, texte factice, vrai faux texte, faux contenu, texte de remplissage, de remplacement, ou d'attente. Outre son usage dans les milieux de l'imprimerie et du graphisme, certains chansonniers en font l'utilisation lors de la composition de mélodies, chantant ces textes en amont de l'écriture de leur textes. L'utilisation de faux-textes aurait déjà été une pratique courante depuis le 16ème siècle dans les milieux de l'imprimerie et de la composition.

user/themes/r2c/css/leaflet.css

@@ -0,0 +1,635 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile {
+	will-change: opacity;
+	}
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	will-change: transform;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline: 0;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-container a.leaflet-active {
+	outline: 2px solid orange;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path {
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.7);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover {
+	text-decoration: underline;
+	}
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+	font-size: 11px;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	font-size: 11px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 19px;
+	line-height: 1.4;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 4px 4px 0 0;
+	border: none;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover {
+	color: #999;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+.leaflet-oldie .leaflet-popup-tip-container {
+	margin-top: -1px;
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-clickable {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}

user/themes/r2c/css/styles_3djs.css

@@ -0,0 +1,13 @@
+.links line {
+  stroke: #999;
+  stroke-opacity: 0.6;
+}
+
+.nodes text {
+  -webkit-user-select: none!important;
+     -moz-user-select: none!important;
+      -ms-user-select: none!important;
+          user-select: none!important;
+  cursor: -webkit-grab;
+  cursor: grab;
+}

user/themes/r2c/css/styles_paperjs.css

@@ -0,0 +1,4 @@
+canvas[resize] {
+    width: 100%;
+    height: 100%;
+}

user/themes/r2c/js/site.js → user/themes/r2c/js/script.js

@@ -190,9 +190,50 @@ function drag() {
   });
 };
 
+function map() {
+  var mymap = L.map('mapid').setView([51.505, -0.09], 13);
+
+	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+		id: 'mapbox.streets'
+	}).addTo(mymap);
+
+	L.marker([51.5, -0.09]).addTo(mymap)
+		.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
+
+	L.circle([51.508, -0.11], 500, {
+		color: 'red',
+		fillColor: '#f03',
+		fillOpacity: 0.5
+	}).addTo(mymap).bindPopup("I am a circle.");
+
+	L.polygon([
+		[51.509, -0.08],
+		[51.503, -0.06],
+		[51.51, -0.047]
+	]).addTo(mymap).bindPopup("I am a polygon.");
+
+
+	var popup = L.popup();
+
+	function onMapClick(e) {
+		popup
+			.setLatLng(e.latlng)
+			.setContent("You clicked the map at " + e.latlng.toString())
+			.openOn(mymap);
+	}
+
+	mymap.on('click', onMapClick);
+
+}
+
 $(document).ready(function() {
   wrap();
-  scrollbar();
+  map();
+  // scrollbar();
   clickhand();
   drag();
 });

user/themes/r2c/js/script_d3js.js

@@ -0,0 +1,69 @@
+  var svg = d3.select("#reseaux-sociaux svg"),
+      width = +svg.attr("width"),
+      height = +svg.attr("height");
+
+  var color = d3.scaleOrdinal(d3.schemeCategory20);
+
+  var simulation = d3.forceSimulation()
+      .force("link", d3.forceLink().id(function(d) { return d.id; }))
+      .force("charge", d3.forceManyBody())
+      .force("center", d3.forceCenter(width / 2, height / 2));
+
+  d3.json("user/themes/r2c/json/miserables.json", function(error, graph) {
+    if (error) throw error;
+
+    var link = svg.append("g")
+      .attr("class", "links")
+      .selectAll("line")
+      .data(graph.links)
+      .enter().append("line")
+      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
+
+    var node = svg.append("g")
+      .attr("class", "nodes")
+      .selectAll("text")
+      .data(graph.nodes)
+      .enter().append("text")
+      .text(function(d) { return d.id; })
+        .attr("fill", function(d) { return color(d.group); })
+        .call(d3.drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended));
+
+    simulation
+        .nodes(graph.nodes)
+        .on("tick", ticked);
+
+    simulation.force("link")
+        .links(graph.links);
+
+    function ticked() {
+      link
+          .attr("x1", function(d) { return d.source.x; })
+          .attr("y1", function(d) { return d.source.y; })
+          .attr("x2", function(d) { return d.target.x; })
+          .attr("y2", function(d) { return d.target.y; });
+
+      node
+          .attr("x", function(d) { return d.x; })
+          .attr("y", function(d) { return d.y; });
+    }
+  });
+
+  function dragstarted(d) {
+    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+
+  function dragged(d) {
+    d.fx = d3.event.x;
+    d.fy = d3.event.y;
+  }
+
+  function dragended(d) {
+    if (!d3.event.active) simulation.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+  }

user/themes/r2c/js/script_paperjs.js

@@ -0,0 +1,58 @@
+
+// The amount of segment points we want to create:
+var amount = 3;
+
+// The maximum height of the wave:
+var height = 300;
+
+// Create a new path and style it:
+var path = new Path({
+	// 80% black:
+	strokeColor: [0.8],
+	strokeWidth: 30,
+	strokeCap: 'square'
+});
+
+var raster = new Raster({
+    source: 'user/themes/r2c/images/trame.svg',
+    position: view.center
+});
+
+path.clipMask = true;
+// path.selected = true;
+path.closed = true;
+// path.fullySelected = true;
+
+// Add 5 segment points to the path spread out
+// over the width of the view:
+for (var i = 0; i <= amount; i++) {
+  var maxPoint = new Point(300, 300);
+
+    var point = maxPoint * Point.random(view.size) + 70;
+    path.add(point);
+
+	// path.add(new Point(500 / 700) * view.size);
+}
+
+// Select the path, so we can see how it is constructed:
+
+function onFrame(event) {
+	// Loop through the segments of the path:
+	for (var i = 0; i <= amount; i++) {
+		var segment = path.segments[i];
+    // A cylic value between -1 and 1
+
+		var sinus = Math.sin(event.time *  0.05+ i);
+
+		// Change the y position of the segment point:
+		segment.point.y = sinus * height + 100;
+	}
+	// Uncomment the following line and run the script again
+	// to smooth the path:
+  path.smooth();
+}
+
+// var copy = path.clone();
+// copy.fullySelected = true;
+// copy.position.x += 500;
+// copy.smooth();

user/themes/r2c/json/miserables.json

@@ -0,0 +1,124 @@
+{
+  "nodes": [
+    {"id": "Oceane", "group": 1},
+    {"id": "Wiebke", "group": 1},
+    {"id": "Manon", "group": 1},
+    {"id": "Andreea", "group": 1},
+    {"id": "Laurent", "group": 1},
+    {"id": "Nadia", "group": 1},
+    {"id": "Pascale", "group": 1},
+    {"id": "Mireille", "group": 1},
+    {"id": "Martine", "group": 1},
+    {"id": "Line", "group": 1},
+    {"id": "Bachir", "group": 2},
+    {"id": "Julien", "group": 2},
+    {"id": "Marie.W", "group": 3},
+    {"id": "Solen", "group": 2},
+    {"id": "Olivier", "group": 2},
+    {"id": "Elodie", "group": 2},
+    {"id": "Loyce", "group": 3},
+    {"id": "Marie.P", "group": 3},
+    {"id": "Victoria", "group": 3},
+    {"id": "Attieke", "group": 3},
+    {"id": "Kabane", "group": 3},
+    {"id": "Paris 8", "group": 3},
+    {"id": "La fabrique des sociologies", "group": 3},
+    {"id": "Synesthesie", "group": 3},
+    {"id": "Maison jaune", "group": 4},
+    {"id": "Cooperence", "group": 4},
+    {"id": "Jardin Haguette", "group": 5},
+    {"id": "Tricot partage", "group": 4},
+    {"id": "Amap Court-circuit", "group": 0},
+    {"id": "Clinamen", "group": 2},
+    {"id": "Briche", "group": 3},
+    {"id": "Academie Fratellini", "group": 2},
+    {"id": "Point carre", "group": 2},
+    {"id": "Franciade", "group": 2},
+    {"id": "Dechets d'art", "group": 2},
+    {"id": "Collectif Mund Gawi", "group": 2},
+    {"id": "Le 6B", "group": 2},
+    {"id": "Adada", "group": 2},
+    {"id": "Artefact 93", "group": 2},
+    {"id": "Landykadi", "group": 4},
+    {"id": "Rien ne se perd", "group": 4},
+    {"id": "Shakti 21", "group": 4},
+    {"id": "Cop'Billon", "group": 4},
+    {"id": "Street mamies", "group": 4},
+    {"id": "L'oasis", "group": 4},
+    {"id": "Rajganawak", "group": 4}
+  ],
+
+  "links": [
+    {"source": "Oceane", "target": "Dechets d'art", "value": 1},
+    {"source": "Oceane", "target": "Le 6B", "value": 1},
+    {"source": "Oceane", "target": "Laurent", "value": 1},
+    {"source": "Oceane", "target": "Collectif Mund Gawi", "value": 1},
+    {"source": "L'oasis", "target": "Collectif Mund Gawi", "value": 1},
+    {"source": "Oceane", "target": "L'oasis", "value": 1},
+    {"source": "Laurent", "target": "L'oasis", "value": 1},
+    {"source": "Oceane", "target": "Cop'Billon", "value": 1},
+    {"source": "Oceane", "target": "Street mamies", "value": 1},
+    {"source": "Street mamies", "target": "Cop'Billon", "value": 1},
+    {"source": "Landykadi", "target": "Dechets d'art", "value": 1},
+    {"source": "Landykadi", "target": "Collectif Mund Gawi", "value": 1},
+    {"source": "Laurent", "target": "Le 6B", "value": 1},
+    {"source": "Laurent", "target": "Collectif Mund Gawi", "value": 1},
+    {"source": "Shakti 21", "target": "Collectif Mund Gawi", "value": 1},
+    {"source": "Rien ne se perd", "target": "Collectif Mund Gawi", "value": 1},
+    {"source": "Artefact 93", "target": "Dechets d'art", "value":1},
+    {"source": "Artefact 93", "target": "Franciade", "value": 1},
+    {"source": "Artefact 93", "target": "Adada", "value": 1},
+    {"source": "Artefact 93", "target": "Point carre", "value": 1},
+    {"source": "Point carre", "target": "Franciade", "value": 1},
+    {"source": "Franciade", "target": "Adada", "value":1},
+    {"source": "Adada", "target": "Dechets d'art", "value": 1},
+    {"source": "Adada", "target": "Point carre", "value": 1},
+    {"source": "Franciade", "target": "Andreea", "value": 1},
+    {"source": "Point carre", "target": "Wiebke", "value": 1},
+    {"source": "Wiebke", "target": "Clinamen", "value": 1},
+    {"source": "Wiebke", "target": "Rajganawak", "value": 1},
+    {"source": "Wiebke", "target": "Briche", "value": 1},
+    {"source": "Briche", "target": "Academie Fratellini", "value":1},
+    {"source": "Academie Fratellini", "target": "Manon", "value": 1},
+    {"source": "Manon", "target": "Solen", "value": 1},
+    {"source": "Solen", "target": "Cooperence", "value": 1},
+    {"source": "Cooperence", "target": "Tricot partage", "value": 1},
+    {"source": "Cooperence", "target": "Nadia", "value": 1},
+    {"source": "Nadia", "target": "Pascale", "value": 1},
+    {"source": "Tricot partage", "target": "Pascale", "value": 1},
+    {"source": "Pascale", "target": "Maison jaune", "value": 1},
+    {"source": "Pascale", "target": "Mireille", "value": 1},
+    {"source": "Jardin Haguette", "target": "Martine", "value": 1},
+    {"source": "Martine", "target": "Paris 8", "value": 1},
+    {"source": "Paris 8", "target": "Marie.W", "value": 1},
+    {"source": "Paris 8", "target": "Loyce", "value": 1},
+    {"source": "Paris 8", "target": "Marie.P", "value": 1},
+    {"source": "Paris 8", "target": "Victoria", "value":1},
+    {"source": "Victoria", "target": "Kabane", "value": 1},
+    {"source": "Kabane", "target": "Paris 8", "value": 1},
+    {"source": "Victoria", "target": "Attieke", "value": 1},
+    {"source": "Victoria", "target": "Marie.W", "value": 1},
+    {"source": "Marie.W", "target": "Amap Court-circuit", "value":1},
+    {"source": "Amap Court-circuit", "target": "Olivier", "value": 1},
+    {"source": "Amap Court-circuit", "target": "Elodie", "value": 1},
+    {"source": "Amap Court-circuit", "target": "Solen", "value": 1},
+    {"source": "Solen", "target": "Olivier", "value": 1},
+    {"source": "Manon", "target": "Wiebke", "value": 1},
+    {"source": "Olivier", "target": "Cooperence", "value": 1},
+    {"source": "Olivier", "target": "Elodie", "value": 1},
+    {"source": "Elodie", "target": "Synesthesie", "value": 1},
+    {"source": "Synesthesie", "target": "Loyce", "value": 1},
+    {"source": "Synesthesie", "target": "Line", "value": 1},
+    {"source": "Synesthesie", "target": "Julien", "value": 1},
+    {"source": "Synesthesie", "target": "Marie.P", "value": 1},
+    {"source": "Synesthesie", "target": "Maison jaune", "value": 1},
+    {"source": "Synesthesie", "target": "Bachir", "value": 1},
+    {"source": "Elodie", "target": "Julien", "value": 1},
+    {"source": "Elodie", "target": "Loyce", "value": 1},
+    {"source": "Elodie", "target": "Line", "value": 1},
+    {"source": "Line", "target": "Julien", "value": 1},
+    {"source": "Line", "target": "Loyce", "value": 1},
+    {"source": "Julien", "target": "Loyce", "value": 1},
+    {"source": "Victoria", "target": "Marie.P", "value": 1}
+  ]
+}

user/themes/r2c/scss/template/_section.scss

@@ -89,3 +89,5 @@ body{
     }
   }
 }
+
+#mapid { height: 180px; }

user/themes/r2c/templates/modular/links.html.twig

@@ -6,7 +6,7 @@
     {% for module in page.collection %}
       <div id="{{ _self.pageLinkName(module.folder)|replace({"0":"", "1":"", "2":"", "3":"", "4":"", "5":"", "6":"", "7":"", "8":"", "9":"", ".":"","_":"" }) }}">
           {{ module.content }}
+          <canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
       </div>
     {% endfor %}
   {% endblock %}
- 

user/themes/r2c/templates/modular/reseausociaux.html.twig

@@ -6,7 +6,7 @@
     {% for module in page.collection %}
       <div id="{{ _self.pageLinkName(module.folder)|replace({"0":"", "1":"", "2":"", "3":"", "4":"", "5":"", "6":"", "7":"", "8":"", "9":"", ".":"","_":"" }) }}">
           {{ module.content }}
+          <svg width="500" height="500"></svg>
       </div>
     {% endfor %}
   {% endblock %}
- 

user/themes/r2c/templates/modular/streetmap.html.twig

@@ -6,7 +6,7 @@
     {% for module in page.collection %}
       <div id="{{ _self.pageLinkName(module.folder)|replace({"0":"", "1":"", "2":"", "3":"", "4":"", "5":"", "6":"", "7":"", "8":"", "9":"", ".":"","_":"" }) }}">
           {{ module.content }}
+           <div id="mapid"></div>
       </div>
     {% endfor %}
   {% endblock %}
- 

user/themes/r2c/templates/partials/base.html.twig

@@ -18,7 +18,11 @@
     {% block stylesheets %}
       {% do assets.addCss('theme://css/jquery-ui.css') %}
       {% do assets.addCss('theme://css-compiled/template.css') %}
-      {% do assets.addCss('theme://css/jquery.mCustomScrollbar.min.css') %}
+      {% do assets.addCss('theme://css/styles_3djs.css') %}
+      {% do assets.addCss('theme://css/styles_paperjs.css') %}
+      {# % do assets.addCss('theme://css/leaflet.css.css') % #}
+      <link rel="stylesheet" href="user/themes/r2c/css/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+  crossorigin=""/>
     {% endblock %}
 
     {{ assets.css() }}
@@ -26,8 +30,17 @@
     {% block javascripts %}
         {% do assets.addJs('jquery', 101) %}
         {% do assets.addJs('theme://js/jquery-ui.js', {group:'bottom'}) %}
-        {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
-        {% do assets.addJs('theme://js/jquery.mCustomScrollbar.concat.min.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/script.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/d3.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/script_d3js.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/paper_full.js', {group:'bottom'}) %}
+        {# % do assets.addJs('theme://js/leaflet.js', {group:'bottom'}) % #}
+        {# do assets.addJs('theme://js/script_paperjs.js', {type:'text/paperscript', canvas:'canvas', group:'bottom'}) #}
+
+        <script type="text/paperscript" src="user/themes/r2c/js/script_paperjs.js" canvas="canvas"></script>
+        <script src="user/themes/r2c/js/leaflet.js"
+        integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+        crossorigin=""></script>
     {% endblock %}
 
     {{ assets.js() }}
@@ -42,7 +55,7 @@
                   <h1>
                     <a href="{{ home_url }}" class="navbar-brand mr-10">{{site.title}}</a>
                   </h1>
-                  
+
                     <section class="navbar-section">
                         <nav>
                           {% block header_navigation %}