31:T543,// Jeu de données : popularité moyenne des films par année, source IMDB dataset = [{a:1924 , p:72.0},{a:1925 , p:73.0},{a:1926 , p:63.0},{a:1927 , p:38.0},{a:1928 , p:56.2},{a:1929 , p:42.4},{a:1930 , p:37.3},{a:1931 , p:58.2},{a:1932 , p:55.5},{a:1933 , p:50.7},{a:1934 , p:34.3},{a:1935 , p:55.5},{a:1936 , p:52.7},{a:1937 , p:45.4},{a:1938 , p:42.8},{a:1939 , p:39.6},{a:1940 , p:50.5},{a:1941 , p:46.3},{a:1942 , p:45.7},{a:1943 , p:64.0},{a:1944 , p:37.3},{a:1945 , p:54.6},{a:1946 , p:41.4},{a:1947 , p:42.9},{a:1948 , p:41.6},{a:1949 , p:50.9},{a:1950 , p:48.1},{a:1951 , p:36.5},{a:1952 , p:41.0},{a:1953 , p:50.1},{a:1954 , p:44.5},{a:1955 , p:47.2},{a:1956 , p:41.7},{a:1957 , p:41.4},{a:1958 , p:33.2},{a:1959 , p:34.6},{a:1960 , p:40.7},{a:1961 , p:42.2},{a:1962 , p:38.7},{a:1963 , p:55.3},{a:1964 , p:38.1},{a:1965 , p:51.8},{a:1966 , p:39.9},{a:1967 , p:49.3},{a:1968 , p:41.7},{a:1969 , p:46.9},{a:1970 , p:48.2},{a:1971 , p:48.3},{a:1972 , p:50.8},{a:1973 , p:39.7},{a:1974 , p:43.8},{a:1975 , p:51.9},{a:1976 , p:43.9},{a:1977 , p:47.0},{a:1978 , p:42.1},{a:1979 , p:36.4},{a:1980 , p:51.2},{a:1981 , p:47.5},{a:1982 , p:50.4},{a:1983 , p:34.3},{a:1984 , p:39.9},{a:1985 , p:51.5},{a:1986 , p:40.9},{a:1987 , p:38.9},{a:1988 , p:40.1},{a:1989 , p:41.1},{a:1990 , p:36.9},{a:1991 , p:42.0},{a:1992 , p:41.5},{a:1993 , p:41.7}];32:T822,{ //Largeur et hauteur du graphe, marges et largeur de barre const larg = 640; const haut = 400; const padding = 20; const barre = 4; // On crée l'arbre SVG const svg = d3.create('svg') .attr("width", larg) .attr("height", haut); // Deux échelles D3 pour calculer automatiquement les positions à partir du domaine des valeurs (leur étendue) et de l'espace disponible pour dessiner (le range), en fonction des dimensions et des marges. const xScale = d3.scaleLinear() .domain([d3.min(dataset, d=>d.a) - 1, d3.max(dataset, d=>d.a) + 1]) .range([padding, larg - padding * 2]); const yScale = d3.scaleLinear() .domain([0, d3.max(dataset, d=>d.p)]) .range([haut - padding , padding]); // On dessine les barres avec une boucle de svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d) { return xScale(d.a); }) .attr("y", function(d) { return yScale(d.p) }) .attr("width", function(d) { return barre; }) .attr("height", function(d) { return (haut-padding)-yScale(d.p); }) .attr("fill", "darkblue") .attr("stroke-width", "1") .attr("stroke", "lightgrey"); // D3 sait dessiner les axes du graphe automatiquement, en fonction des échelles fournies. const xAxis = d3.axisBottom() .scale(xScale) .ticks(16, 1000); //Nombre approx. de barbules et format d'année sur 4 chiffres const yAxis = d3.axisLeft() .scale(yScale) .ticks(12) .tickSizeInner(-larg + padding + padding);// Les ticks deviennent des barres horizontales de repérage. // On ajoute les axes en les affectant à un borde du graphe, ici l'axe des abcisses est placé en bas. svg.append("g") .attr("transform", "translate(0," + (haut - padding) + ")") .call(xAxis); // L'axe des ordonnées est à gauche avec des lignes en tiretés à la place des barbules (ticks). svg.append("g") .attr("transform", "translate(" + padding + ",0)") .call(yAxis) .call(g => g.selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2")); //Dessin par rendu return svg.node(); }33:T996,{ //Largeur et hauteur du graphe const larg = 500; const haut = 400; const padding = 20; // Décalage du bord à gauche et en haut const svg = d3.create('svg') .attr("width", larg) .attr("height", haut); // On définit un petit jeu de données à 3 dimensions const datatest = [ [14, 20, 1], [880, 80, 4], [250, 50, 2], [100, 33, 1], [330, 85, 5], [410, 12, 3], [475, 44, 2], [25, 67, 4], [85, 21, 5], [220, 88, 2]]; // Des échelles pour les posisions X, Y, les tailles R (rayon des cercles) et les couleurs. const xScale = d3.scaleLinear() .domain([0, d3.max(datatest, function(d) { return d[0]; })]) .range([padding, larg - padding * 2]); const yScale = d3.scaleLinear() .domain([0, d3.max(datatest, function(d) { return d[1]; })]) .range([haut - padding , padding]); const rScale = d3.scaleLinear() .domain([0, d3.max(datatest, function(d) { return Math.sqrt(d[2]); })]) .range([1, 10]); // Pour les couleurs des cercles, on choisit d'affecter aux valeurs le début du gradient YlGnBu. const cScale = d3.scaleLinear() .domain([0, d3.max(datatest, function(d) { return d[2]; })]) .range([0,0.6]); // On dessine les cercles svg.selectAll("circle") .data(datatest) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", function(d) { return rScale(Math.sqrt(d[2])); }) .attr("fill", function(d) { return d3.interpolateYlGnBu(cScale(d[2])) }) .attr("stroke-width", "1") .attr("stroke", "grey"); svg.selectAll("text") .data(datatest) .enter() .append("text") .text(function(d) { return d[2]; }) .attr("x", function(d){ return xScale(d[0]) + rScale(d[2])/2+4; // Décalage horizontal de l'étiquette à droite }) .attr("y", function(d) { return yScale(d[1]) - rScale(d[2])/2+4; // Décalage verticel de l'étiquette en haut }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "grey"); // On dessine les axes à partir des échelles const xAxis = d3.axisBottom() .scale(xScale) .ticks(8); //Nombre approx. de barbules const yAxis = d3.axisLeft() .scale(yScale) .ticks(6); svg.append("g") .attr("class", "axis") //Assigne la classe CSS "axis" .attr("transform", "translate(0," + (haut - padding) + ")") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding + ",0)") .call(yAxis); //Dessin par rendu return svg.node(); }34:T4fa,{ const larg = 600; const haut = 500; // D3 reconnait plusieurs types de projection, ici une azimuthale orthographique const projection = d3.geoOrthographic() .scale(280) //Échelle .translate([larg / 2, haut / 2]) //Dimensions .rotate([-4, -48]) //France au centre .clipAngle(90) .precision(.1); // La projection est affectée à un objet "geopath" qui va recevoir les polygones de la couche mondiale. const path = d3.geoPath() .projection(projection); // Création de l'élément SVG const svg = d3.create('svg') .attr("width", larg) .attr("height", haut); // On dessine les terres émergées en beige avec un contour bleu clair svg.append("g") .attr("class", "countries") .selectAll("path") .data(topojson.feature( world, world.objects.countries ).features ) .enter().append("path") .attr("d", path) .attr("stroke", "lightblue") .attr("fill", "beige"); // Puis les frontières en orange svg.append("path") .attr( "class", "country-borders" ) .attr("d", path(topojson.mesh( world, world.objects.countries, function( a, b) { return a !== b; }))) .attr("stroke", "orange") .attr("fill", "none"); //Dessin par rendu return svg.node(); }35:T772,{ const larg = 600; const haut = 500; const projection = d3.geoConicConformal() // Lambert-93 .center([2.454071, 46.279229]) // Center on France .scale(2600) .translate([larg / 2 - 50, haut / 2]); const path = d3.geoPath() .projection(projection); //Création de l'élément SVG const svg = d3.create('svg') .attr("width", larg) .attr("height", haut); // Dans le fichier de données TopoJSON on trouve les polygones des départements et les données attributaires des centroïdes, du code et du nom du département et du nombre d'hôtels en 2017. const depts = topojson.feature(france, france.objects.depts).features; var maxVal = 0; var cerclesDepts = depts.map(function (feature){ var nh = feature.properties["NbHotels2017"]; // Recherche de la valeur max. à dessiner if (maxValLes bloc-notes Observable peuvent naturellement afficher du HTML directement !

\n\n

H1 Hello World!

H2 Hello World!

H3 Hello World!

H4 Hello World!

H5 Hello World!

H6 Hello World!

\n\n

Voici une liste :\n

Premier élément
Deuxième élement
Troisième élément

\n\n

Jouons avec le

style !

\n\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n

\n\n \n","pinned":false,"hidden":false,"mode":"html"},{"id":512,"value":"### Exercices :\n-\tfaire varier les contenus des balises.\n-\tchanger la couleur des styles.\n- ajouter des retours à la ligne, avec la balise : `
`\n","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"## Le format SVG : des images vectorielles\nLa référence du format chez Mozilla : [lien](https://developer.mozilla.org/fr/docs/Web/SVG)\n### <rect> Rectangle","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`### <circle> Cercle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`### <path> Chemin (ligne brisée)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"### Exercices :\n-\tfaire varier les position et les dimensions des formes dessinées.\n-\tchanger la couleur des formes et contours.","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"md`### <text> Texte`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"### Exercices :\n-\tfaire varier les contenus des textes.\n-\tchanger les styles.","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"### Groupes <g> et transformations (translation, rotation, échelle)","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"### Exercices :\n-\tfaire varier les positions et les dimensions des cercles dessinés\n- faire varier leur couleur\n- sortir un élément du groupe","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"### Groupes <g> imbriqués et transformés : faites varier les rotations","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"### Exercices :\n-\tfaire varier les angles de rotation.\n-\tchanger la couleur des formes.\n-\tajouter un élément \"cercle\" dans la main.","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"## Styles SVG\n### Fill - Remplissage","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"### Stroke - Contour","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"### Exercices :\n-\tfaire varier la position du carré\n- changer la couleur des styles.\n- faire varier l'épaisseur du contour","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"### Mélangeons formes et transformations","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"### Exercices :\n-\tfaire varier les longueurs des formes.\n-\tchanger la couleur des styles.\n-\tajouter une feuille verte à la tige.","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"# SVG dynamique avec JavaScript : la bibliothèque D3\n## Modifier le DOM avec D3\nD3 permet de dessiner puis de modifier un arbre DOM créé en SVG.","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"{\n // Création de l'objet principal SVG\n const svg = d3.create('svg').attr('width', 600).attr('height', 240);\n\n // Ajout d'un groupe racine décalé vers la droite\n const g = svg.append('g')\n .attr('transform', 'translate(250, 40)');\n\n // Structure de données pour stocker la poisition Y et la couleur des cercles\n const cData = [\n {cy: 0, fill: '#e74c3c'},\n {cy: 70, fill: '#f1c40f'},\n {cy: 160, fill:'#2ecc71'}\n ];\n\n // Boucle D3 de dessin des cercles\n const circles = g.selectAll('circle').data(cData)\n .enter()\n .append('circle')\n .attr('r', 35)\n .attr('cx', function(d) {return d.cy; })\n .attr('cy', function(d) {return d.cy; })\n .attr('fill', function(d) { return d.fill; });\n \n //Dessin par rendu\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"### Exercices :\n-\tfaire varier les positions et les tailles des cercles.\n-\tchanger leurs couleurs.\n-\tajouter des contours gris foncé aux cercles.\n- ajouter un quatrième cercle, bleu, assez décalé (en redimensionnant le SVG).","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"## Les transitions : animer les images vectorielles","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"{\n // Création de l'objet principal SVG\n const svg = d3.create('svg')\n .attr('width', 400)\n .attr('height', 240);\n\n // Ajout d'un groupe racine décalé vers la droite\n const g = svg.append('g')\n .attr('transform', 'translate(250, 40)');\n\n // Structure de données pour stocker la poisition Y et la couleur des cercles\n const cData = [\n {cy: 0, fill: '#e74c3c'},\n {cy: 70, fill: '#f1c40f'},\n {cy: 140, fill:'#2ecc71'}\n ];\n\n // Boucle D3 de dessin des cercles, d'abord tous au même endroit, puis décalage vers le bas selon l'ordre\n const circles = g.selectAll('circle').data(cData)\n .enter()\n .append('circle')\n .attr('r', 35)\n .attr('fill', function(d) { return d.fill; })\n .transition()\n .delay(function(d, i) { return i * 200; })\n .attr('cy', function(d) {return d.cy; });\n \n //Dessin par rendu\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"### Exercice :\n-\tFaire varier la vitesse de l'animation en modifiant les délais de transition.\n-\tFaire aussi varier la position horizontale des cercles en fin de transition.\n-\tFaire varier la transparence avec la transition.\n-\tAjouter un retour à la position verticale d'origine par une nouvelle transition.","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"## Un peu d'infographie\nUn histogramme simple \n\nLes données sont dans une structure de données JSON, dans la cellule ci-dessous.
\nIl s'agit de la note moyenne des films sur IMDB selon leur année de sortie, entre 1924 et 1993.","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"### Exercices :\n-\tÉlargir le graphe et les barres.\n- Faire démarrer l'axe Y à la valeur minimale de popularité des films sur toute la période.\n-\tChanger la couleur des barres en fonction de la valeur de la note moyenne de l'année.\n-\tAjouter un titre.\n","pinned":false,"hidden":false,"mode":"md"},{"id":336,"value":"md`### Un diagramme XY avec cercles et couleurs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"### Exercices :\n- Faire varier les limites des valeurs du jeu de données pour observer la mise à jour automatique du graphe.\n- Ajouter un titre et une source au graphique.\n- Ajouter une grille en fond de graphique.\n-\tFaire varier le style des cercles, tailles et couleurs.\n-\tRedessiner le graphique sur une largeur de 800 pixels.\n-\tChanger la proportionnalité des cercles : plus grands, selon un ratio au volume du symbole plutôt qu'à la surface.","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"# Un peu de cartographie\nLe globe terrestre via une projection azimuthale orthographique","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"//Le fond de carte est un fichier JSON téléchargé en temps réel.\nworld = (await fetch(\"https://unpkg.com/world-atlas@1/world/50m.json\")).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"### Exercices :\n-\tFaire varier le centrage de la projection.\n- Faire varier le niveau de zoom.\n-\tChanger la couleur des pays.\n- Changer de projection en utilisant [les informations de la documentation en ligne](https://github.com/d3/d3-geo-projection).\n","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"## Une carte en projection locale","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"// Couche SIG des départements français en 2017, au format TopoJSON compact, non projetée, avec des attributs, téléchargée depuis un repo GitHub. Le fichier contient des variables statistiques en attributs (\"properties\").\n// On peut convertir des couches au format TopoJSON avec un utilitaire en ligne de commandes ou via MapShaper : https://mapshaper.org/\nfrance = d3.json(\"https://ljegou.github.io/d3sigma/data/frdept_hotels.json\", function(error, dataset) {\n\t\tif (error) throw error;\n\t});","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"{\n const larg = 600;\n const haut = 500;\n\n // Ici une projection conique conforme, qui ressemble à la Lambert-93\n const projection = d3.geoConicConformal()\n .center([2.454071, 46.279229]) // Center on France\n .scale(2600)\n .translate([larg / 2 - 50, haut / 2]);\n\n\tconst path = d3.geoPath()\n\t\t.projection(projection);\n\n\t//Création de l'élément SVG\n\tconst svg = d3.create('svg')\n\t\t.attr(\"width\", larg)\n\t\t.attr(\"height\", haut);\n \n // On dessine les polygones des départements, avec un style qui change selon le survol de la souris.\n\tsvg.append(\"path\")\n\t\t.datum(topojson.feature(france, france.objects.depts))\n\t\t.attr(\"class\", \"depts\")\n\t\t.attr(\"d\", path)\n .attr(\"stroke\", \"lightgrey\")\n .attr(\"fill\", \"beige\")\n .on(\"mouseover\", function(d) {\n d3.select(this).attr(\"fill\", \"grey\")\n })\n .on(\"mouseout\", function(d) {\n d3.select(this).attr(\"fill\", \"beige\")\n });\n \n //Dessin par rendu\n return svg.node();\n \n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"### Exercices :\n-\tChanger la couleur des départements, de leurs contours.\n- Changer de projection.","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"## Une carte thématique en symboles proportionnels\nLe nombre d'hôtels par département en 2017 (INSEE), la variable se trouvant dans les attributs du fichier fond de carte (\"properties\").","pinned":false,"hidden":false,"mode":"md"},{"id":440,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":772,"value":"## Une carte thématique différente, avec des étiquettes au survol de la souris\nEn utilisant le paramètre \"title\" des symboles dessinés.","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"### Exercices :\n-\tChanger la couleur du fond de carte et des cercles proprotionnels.\n- Ajouter de la transparence aux symboles.\n- Changer la taille de proportionnelité des symboles.\n- Ajouter une échelle graphique (en dessinant une ligne dans le référentiel projeté).\n- Ajouter un libellé pour certains départements, avec le nom et la valeur.","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"## Appendice, chargement des bibliothèques D3 et TopoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"d3 = require('d3@6');","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"topojson = require('topojson');","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}