SVGQuartet d'AnscombeMarkdownIntroduction à D3Graphiques en bâtonsD3 - Joindre des données à des élémentsTypes de visualisation de donnéesMéthodes sur une liste (Array)Structures de données javascriptFonctions RamdaD3 - définir les axesD3-shapeReprésenter un réseau avec D3Données cartographiquesLa cartographie avec D3Leaflet et fonds de carte en tuilesCanvasGraphiques camembertTransitions avec D3BillboardApprentissage automatiqueTopojsonD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Observable
tag1 = (...args) => args
nom = 'Alice'
tag1`Salut ${nom}, comment vas-tu?`
tag2 = (partiesTexte, ...variables) => partiesTexte[0] + variables[0].toUpperCase() + partiesTexte[1]
tag2`Salut ${nom}, comment vas-tu?`
md`Markdown`
html`<p>HTML</p>`
svg`
<svg width="100" height="30">
<text x="50" y="20" text-anchor="middle">SVG</text>
</svg>
`
d3 = require('d3')
import {svg as cheery} from "@mbostock/cheery-observable"
cheery
{
const context = DOM.context2d(width, 33)
context.fillText('Je suis un canvas!', 0, 20)
return context.canvas
}
{
const div = DOM.element('div')
const p = document.createElement('p')
p.textContent = 'Un élément <p> à l\'intérieur d\'un élément <div>'
div.appendChild(p)
return div
}
slider = html`<input type="range">`
valeurSlider = Generators.input(slider)
svg`
<svg width="100" height="100">
<circle cx="50" cy="50" r="${valeurSlider / 2}" />
</svg>
`
function* integers() {
// deux valeurs qui peuvent être mutées
let i = 0
let up = true
// tant que oui est oui, donc pour toujours
while (true) {
if (up && i > 50) {
up = false
}
if (!up && i < 0) {
up = true
}
// générer une valeur entre 0 et 50
// si up = true la nouvelle valeur est la valeur précédente incrémentée
// sinon la valeur précédente moins un
yield up ? ++i : --i
}
}
radius = integers()
svg`
<svg width="100" height="100">
<circle cx="50" cy="50" r="${radius}" />
</svg>
`
viewof valeurInput = html`<input />`
html`<p>La valeurInput est: <span style="color:red">${valeurInput}</span></p>`
viewof valeurSlider2 = html`<input type="range" />`
valeurSlider2
viewof a = html`<input type="number" value="1" />`
viewof b = html`<input type="number" value="2" />`
html`
<p>${a} + ${b} = ${a + b}</p>
<p>${a} - ${b} = ${a - b}</p>
<p>${a} * ${b} = ${a * b}</p>
<p>${a} / ${b} = ${a / b}</p>
<br />
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
