view(input), display(value), invalidation, visibility, width, nowfunction*() { ... yield x }), promises auto-awaited, top-level awaitwidth, height
translate(x, y), rotate(deg), scale(k))
M (move), L (line), H/V (lignes horizontales/verticales), C/S (cubique Bézier), Q/T (quadratique Bézier), A (arc), Z (close)
x, y (origine : la baseline par défaut),
dx, dy (offsets, listes par caractère possibles),
font-size, font-family
x reset + dy="1.2em" par ligne)
select, selectAll.style, .attr, .classed, .property, .text, .html(d, i) => ....append, .insert, .remove.filter, .sort.on("click"), mouseenter, mouseover, mouseleave, mouseout, mousemove.data(array), .join("rect")(d, i).data(arr, d => d.id)$0.__data__ dans les devtools.join(enter, update, exit) : forme à trois argumentsscaleLinear, scaleSqrt, scalePow, scaleLog, scaleTime, scaleSequential
scaleQuantize, scaleQuantile, scaleThreshold
scaleOrdinal, scaleBand, scalePoint
.domain, .range, .invert, .nice, .clampaxisLeft, axisRight, axisTop, axisBottom.ticks(n), .tickValues([...]), .tickFormat(fn).tickSize, .tickSizeInner, .tickSizeOuter, .tickPadding.tickSize(-innerW).transition(), .duration(ms), .delay(ms), .ease(fn)easeLinear, easeCubic, easeCubicIn, easeCubicOut, easeCubicInOut, easeBounce, easeBounceOut, easeBounceInOut.tween, .attrTween, .styleTween.on("start" / "end" / "interrupt"), .end() (Promise), .interrupt()function*() { while (true) yield performance.now() },
d3.timer
stroke-dasharray + stroke-dashoffset,
node().getTotalLength()
(notebook 06)
d3.json,
d3.csv,
d3.tsv
.enter().append())
Tout graphique avec un agenda laisse quelque chose de côté. Choisissez-en un qui essaie de vous convaincre dans n'importe quelle source qui porte un message, et reproduisez-le en D3 (pas pixel-perfect, juste les mêmes données ; les retrouver fait partie du travail). Créez ensuite une seconde visualisation qui propose une lecture plus complète du même sujet : variable cachée, échelle trompeuse, période, comparaison absente. Le passage d'une lecture à l'autre peut se faire par une transition animée (clic, scroll, boucle) ou par les deux graphiques en parallèle, selon ce qui sert mieux le propos. Contextualiser et analyser les choix. Cas d'étude d'actualité : « Pas de Suisse à 10 millions ».