html`<div id="exemple1"></div>`
{
// Création d'une fonction de passage entre [-1000,1000] vers [100, 400]
var echelle1 = d3.scaleLinear().domain([-1000, 1000]).range([100, 400]);
// Création d'une échelle de couleur entre -1000 ("rouge") et 1000 ("bleu")
var echelle2 = d3.scaleLinear().domain([-1000, 1000]).range(["red", "steelblue"]);
// Sélection de la div cible, vidage du contenu (utile si plusieurs exécutions du code et ajout du SVG
var svg = d3.select("#exemple1").html("").append("svg")
.attr("width", 600)
.attr("height", 100)
.style("border", "solid 1px black");
// Ajout d'un rectangle pour voir le début et la fin de l'échelle1
svg.append("rect")
.attr("x", echelle1(-1000))
.attr("y", 10)
.attr("width", echelle1(1000) - echelle1(-1000))
.attr("height", 20)
.attr("fill", "lightgray");
// Ajout de quelques données pour voir le placement et la couleur de celles-ci, générés par les échelles
var donnees = [-1000, 0, 500, 1000]
svg.selectAll("text")
.data(donnees)
.enter()
.append("text")
.attr("x", d => echelle1(d))
.attr("y", 50)
.html(d => d)
.style("text-anchor", "middle")
.style("fill", d => echelle2(d));
svg.selectAll("circle")
.data(donnees)
.enter()
.append("circle")
.attr("cx", d => echelle1(d))
.attr("cy", 20)
.attr("r", 5)
.style("fill", d => echelle2(d));
}
html`<div id="exemple2"></div>`
{
// Création du passage entre les modalités A, B et C vers 3 bandes entre 100 et 400
var echelle1 = d3.scaleBand().domain(["A", "B", "C"]).range([100, 400]);
// Création du passage des modalités à des couleurs (schéma Set1 de Color Brewer)
var echelle2 = d3.scaleOrdinal(d3["schemeSet1"]).domain(echelle1.domain());
// Sélection de la div cible, vidage du contenu (utile si plusieurs exécutions du code et ajout du SVG
var svg = d3.select("#exemple2").html("").append("svg")
.attr("width", 500)
.attr("height", 100)
.style("border", "solid 1px black");
// ajout des trois bandes, avec chacune sa propre couleur donc
svg.selectAll("rect")
.data(echelle1.domain())
.enter()
.append("rect")
.attr("x", d => echelle1(d))
.attr("y", 10)
.attr("width", echelle1.bandwidth())
.attr("height", 10)
.style("fill", d => echelle2(d));
// ajout des modalités, placées au milieu de la bande (début de la bande + moitié de la largeur de la bande)
svg.selectAll("text")
.data(echelle1.domain())
.enter()
.append("text")
.attr("x", d => echelle1(d) + echelle1.bandwidth() / 2)
.attr("y", 50)
.html(d => d)
.style("text-anchor", "middle")
.style("fill", d => echelle2(d))
}
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.