```
Récupération de la sélection, ajout d'une directive
```
let index = 0;
let currentData = {};
const selectData = () => currentData = datasets[index];
selectData();
bind:value={index} on:change={selectData}
* Passage des arguments au composant
## D3 - Part 1 : LineChart
* Ajout des modules D3
npm install d3-axis d3-scale d3-time-format d3-shape d3-selection
* Normes D3
import {scaleTime, scaleLinear} from 'd3-scale';
import {axisBottom, axisLeft} from 'd3-axis';
import {timeFormat, timeParse} from 'd3-time-format';
import {select} from 'd3-selection';
import {line} from 'd3-shape';
import {afterUpdate} from 'svelte';
const margin = {top: 20, right: 25, bottom: 20, left: 35};
const red = '#b21e3e';
const xScale = scaleTime()
.domain([new Date(2000, 0, 1), new Date(2000, 11, 31)])
.range([margin.left, width - margin.right]);
const yScale = scaleLinear()
.domain([0, 5])
.range([height - margin.bottom, margin.top]);
const xAxis = axisBottom().scale(xScale)
.tickFormat(timeFormat('%b'));
const yAxis = axisLeft().scale(yScale);
const parse = timeParse("%Q");
* Ajout des Axes au SVG et translation
afterUpdate(() => {
select('g[ref="xAxis"]').call(xAxis);
select('g[ref="yAxis"]').call(yAxis);
});
```
Affichage des données
```
const getDay = timestamp => {
const day = parse(timestamp);
day.setYear(2000);
return day;
};
const path = line().x(d => xScale(getDay(d.date)))
.y(d => yScale(d.level));
afterUpdate(() => {
cleanedData = data.hasOwnProperty('data')
? data.data
: [];
});
* Tri des données
cleanedData = data.hasOwnProperty('data')
? data.data.sort((a,b) => a.date - b.date)
: [];
* Ajout d'une légende , mettre les styles dans le composant !
Niveau de pollen :
0: 😃
1: 😐
2: 🤧
3: 😰
4: 😱
5: 💀
.container {
width: min;
width: -moz-min-content;
width: -webkit-min-content;
}
.container .legend {
width: 100%;
display: flex;
justify-content: space-evenly;
margin: 1rem 0;
}
## D3 - Part 2 : Radial bar chart
* copier le linechart, nettoyer, supprimer :
svg > path + g
Axis, Path, scales, getDay
* Définir l'angle correspondant à un jour et l'échelle des rayons
const dayAngle = 2 * Math.PI / 365;
const radiusScale = scaleLinear()
.domain([0,5])
.range([0, width/2 - margin.left]);
* Transformer les données en arc et afficher dans le svg
slices = cleanedData.map((d,i) => {
const shape = arc().startAngle(i * dayAngle)
.endAngle((i+1) * dayAngle)
.innerRadius(radiusScale(0))
.outerRadius(radiusScale(d.level))();
return {shape, fill:red};
})
{#each slices as {shape, fill}}
```
Décaler le contenu et supprimer le paramètre de hauteur
<g transform="translate({width/2},{width/2})">
Ajouter les mois (tranches + noms)
```
const months = ['jan', 'fev', 'mars', "avr", 'mai', 'juin', 'juil', 'aout', 'sep', 'oct', 'nov', 'dec'];
const monthAngle = 2 * Math.PI / 12;
const monthSlices = months.map((d,i) => {
const shape = arc().startAngle(i * monthAngle)
.endAngle((i+1) * monthAngle)
.innerRadius(radiusScale(0))
.outerRadius(radiusScale(5))();
return {shape, name: d};
});
{#each monthSlices as {shape, name}, i}
{name}
{/each}
.months path {
fill:none;
stroke: lightgray;
stroke-width: 1px;
stroke-dasharray: 5 2;
}
* Ajout de l'échelle des pollens
const levels = [1, 2, 3, 4, 5];
{#each levels as level }
{level}
{/each}
.levels circle {
fill: none;
stroke: lightblue;
stroke-width: 1px;
stroke-dasharray: 5;
}
* Touche finale : la couleur avec Chroma.js
npm install chroma-js
import chroma from 'chroma-js';
const colors = chroma.scale(['green', 'orange', 'red']);
const colorScale = scaleLinear()
.domain([0, 5]);
fill: colors(colorScale(d.level))
* Montrer les 2 viz en même temps
.group-viz {
display: flex;
flex-wrap: wrap;
}
## D3 - Bundle !
* Modifier le nom du bundle js et css dans `rollup.config.js`.
* Créer un conteneur et l'indiquer en target de l'App :
document.querySelector('div#viz')
* Ajouter une section et la même div dans la presentation Reveal
* Custom.css de REveal doit avoir :
.reveal #viz {
font-family: 'Roboto', sans-serif;
font-size: 0.8rem;
color: black;
background: whitesmoke;
}
.reveal #viz h2, .reveal #viz h1 {
color: black;
}
.group-viz {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
