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 />
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.