La bibliothèque d3js / Nicolas Lambert

Hi. I'm Nicolas Lambert, research engineer in geographic information science at CNRS (France). My job is to draw maps and teach cartography at the university. I am a geographer 🌎, and not really a developer 🖥️

Workspace

Public

Observable pour les geographes

Edited

Nov 18

Observable pour les geographes

Sommaire Petite histoire (incomplète et subjective) de la cartographie et la dataviz Et pourquoi pas le JavaScript ?Observable kezako ?Les tableaux de données Les données géographiques Le format SVG

La bibliothèque d3js

Faire des graphiques avec plot (mais pas que)Faire du SIG dans la navigateur Faire des cartes avec bertin Faire des cartes avec geoviz L'écosystème spatial du JavaScript

<html>

<body>

</svg>

</body>

</html>

{

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, 500, 60])

.style("background-color", "#CCC");

svg

.append("circle")

.attr("cx", 50)

.attr("cy", 30)

.attr("r", 25)

.style("fill", "#e04a28");

svg

.append("rect")

.attr("x", 100)

.attr("y", 5)

.attr("height", 50)

.attr("width", 50)

.style("fill", "#5277bf");

return svg.node();

}

{

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, 500, 60])

.style("background-color", "#CCC");

svg.append("circle").attr("id", "mycircle");

svg.append("rect").attr("class", "mysquare");

let mysquare2 = svg.append("rect");

svg

.select("#mycircle")

.attr("fill", "#5277bf")

.attr("cx", 50)

.attr("cy", 30)

.attr("r", 25);

svg

.select(".mysquare")

.attr("fill", "#e04a28")

.attr("height", 50)

.attr("width", 50)

.attr("x", 100)

.attr("y", 5);

mysquare2

.attr("stroke", "#3c803f")

.attr("stroke-width", 2)

.attr("height", 30)

.attr("width", 30)

.attr("x", 180)

.attr("y", 15);

return svg.node();

}

myData = [10, 30, 20, 30, 25]

{

const width = 500;

const height = 75;

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("background-color", "#CCC");

svg

.append("g")

.attr("fill", "#e04a28")

.selectAll("circle")

.data(myData)

.join("circle")

.attr("cx", (d, i) => 50 + i * 100)

.attr("cy", height / 2)

.attr("r", (d) => d);

return svg.node();

}

viewof play = Inputs.button("Play")

{

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, 500, 60])

.style("background-color", "#CCC");

let moncercle = svg

.append("circle")

.attr("cx", 50)

.attr("cy", 30)

.attr("r", 25)

.attr("fill", "#e04a28");

if (play) {

moncercle

.transition()

.duration(2000)

.attr("cx", 450)

.transition()

.delay(2000)

.duration(3000)

.attr("cx", 50)

.attr("r", 10)

.attr("fill", "blue")

.transition()

.attr("r", 25)

.attr("fill", "#e04a28");

}

return svg.node();

}

{

let width = 500;

let height = 75;

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("background-color", "#CCC");

svg

.append("g")

.attr("fill", "#e04a28")

.selectAll("circle")

.data(myData)

.join("circle")

.attr("cx", (d, i) => 50 + i * 100)

.attr("cy", height / 2)

.attr("r", 10);

if (play2) {

svg

.selectAll("circle")

.transition()

.duration(2000)

.attr("r", (d) => d);

}

return svg.node();

}

{

let width = 500;

let height = 75;

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("background-color", "#CCC");

let tooltip = svg.append("g").append("text").text("");

svg

.append("g")

.attr("fill", "#e04a28")

.selectAll("circle")

.data(myData)

.join("circle")

.attr("cx", (d, i) => 50 + i * 100)

.attr("cy", height / 2)

.attr("r", (d) => d)

.attr("fill", "#e04a28")

.on("touchmove mousemove", function (e, d) {

d3.select(this)

.transition()

.duration(500)

.attr("fill", "#26374a")

.attr("r", 25)

.style("cursor", "pointer");

d3.select("#info").text(`Le cercle sélectionné a un rayon de ${d}`);

})

.on("touchend mouseleave", function (event, d) {

d3.select(this)

.transition()

.attr("fill", "#e04a28")

.attr("r", (d) => d);

d3.select("#info").text("");

});

// Tooltip

let info = svg

.append("g")

.append("text")

.attr("id", "info")

.attr("font-family", "sans-serif")

.attr("font-size", 7)

.attr("fill-opacity", 1)

.attr("x", 2)

.attr("y", 8)

.text("");

return svg.node();

}

sipri = FileAttachment("sipri.csv").csv({ typed: true })

test = {

// Dimensions du graphique et marges

const width = 928;

const height = 500;

const marginTop = 30;

const marginRight = 0;

const marginBottom = 30;

const marginLeft = 70;

// document svg

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

// Axe des x

var x = d3

.scaleBand()

.domain(sipri.map((d) => d.Supplier))

.range([marginLeft, width - marginRight])

.padding(0.1);

svg

.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x).tickSizeOuter(0));

// Axe des y

const y = d3

.scaleLinear()

.domain([0, d3.max(sipri, (d) => d.TIV20202024)])

.range([height - marginBottom, marginTop]);

svg

.append("g")

.attr("transform", `translate(${marginLeft},0)`)

.call(d3.axisLeft(y).tickFormat((y) => (y * 100).toFixed()))

.call((g) => g.select(".domain").remove())

.call((g) =>

.append("text")

.attr("x", -marginLeft)

.attr("y", 10)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.text("↑ TIV of arms exports (2020-2022)")

);

// Dessin des rectangles

svg

.append("g")

.attr("fill", "#55a37c")

.selectAll()

.data(sipri)

.join("rect")

.attr("x", (d) => x(d.Supplier))

.attr("y", (d) => y(d.TIV20202024))

.attr("height", (d) => y(0) - y(d.TIV20202024))

.attr("width", x.bandwidth());

return svg.node();

}

world = FileAttachment("countries.json").json()

projection = d3.geoNaturalEarth1()

width

height = 500

path = d3.geoPath(projection)

sphere = ({ type: "Sphere" })

{

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("width", "100%")

.style("height", "auto");

// La sphère

svg

.append("g")

.append("path")

.datum(sphere)

.attr("fill", " #a9daeb")

.attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner

// Les graticules

svg

.append("g")

.append("path")

.datum(d3.geoGraticule10())

.attr("d", path) // En SVG, l'attribut d définit un tracé à dessiner

.style("fill", "none")

.style("stroke", "white")

.style("stroke-width", 0.8)

.style("stroke-opacity", 0.5)

.style("stroke-dasharray", 2);

// DATUM

svg

.append("g")

.append("path")

.datum(world) // Datum lit le tableau de données d'un coup => affiche tout de la même façon.

.attr("fill", "#508bab")

.attr("fill-opacity", 0.9)

.attr("stroke", "white")

.attr("stroke-width", 0.2)

.attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner

return svg.node();

}

regions = FileAttachment("regions.csv").csv()

types = Array.from(new Set(regions.map((d) => d["Region Code"])))

colors_typo = d3.schemeTableau10.slice(0, 5).concat("white")

getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)

getcolor("Africa")

cols = new Map(regions.map((d) => [d.ISO3, getcolor(d["Region Code"])]))

cols.get("FRA")

{

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("width", "100%")

.style("height", "auto");

// La sphère

svg

.append("g")

.append("path")

.datum(sphere)

.attr("fill", " #a9daeb")

.attr("d", path);

// Les graticules

svg

.append("g")

.append("path")

.datum(d3.geoGraticule10())

.attr("d", path)

.style("fill", "none")

.style("stroke", "white")

.style("stroke-width", 0.8)

.style("stroke-opacity", 0.5)

.style("stroke-dasharray", 2);

svg

.append("g")

//.attr("fill", "white")

.selectAll("path")

.data(world.features) // data lit chaque features pour itérer dessus

.join("path")

.attr("stroke", "white")

.attr("stroke-width", 0.5)

.attr("fill", (d) => cols.get(d.properties.ISO3))

.attr("d", path);

return svg.node();

}

Swatches(d3.scaleOrdinal(types, colors_typo))

gdpppc = FileAttachment("gdpppc.csv").csv({ typed: true })

quantile = d3

.scaleQuantile()

.domain(gdpppc.map((d) => d.gdppc2018))

.range(d3.schemeReds[6])

colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))

{

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("width", "100%")

.style("height", "auto");

// La sphère

svg

.append("g")

.append("path")

.datum(sphere)

.attr("fill", " #a9daeb")

.attr("d", path);

// Les graticules

svg

.append("g")

.append("path")

.datum(d3.geoGraticule10())

.attr("d", path)

.style("fill", "none")

.style("stroke", "white")

.style("stroke-width", 0.8)

.style("stroke-opacity", 0.5)

.style("stroke-dasharray", 2);

svg

.append("g")

.selectAll("path")

.data(world.features)

.join("path")

.attr("stroke", "white")

.attr("stroke-width", 0.5)

.attr("fill", (d) =>

colbyid.get(d.properties.ISO3) == undefined

? "white"

: colbyid.get(d.properties.ISO3)

)

.attr("d", path);

return svg.node();

}

Legend(

d3.scaleQuantile(

gdpppc.map((d) => Math.round(d.gdppc2018)),

d3.schemeReds[6]

{

title: "PIB par habitant en 2018"

}

)

gdp = FileAttachment("gdp2018.csv").csv({ typed: true })

Inputs.table(gdp)

rayon = d3.scaleSqrt([0, d3.max(gdp, (d) => d.pib2018)], [0, size])

// To put circles in the largest polygon (from @xangregg/proportional-geographic-scatterplot-by-country)

largestPolygon = function (d) {

var best = {};

var bestArea = 0;

d.geometry.coordinates.forEach(function (coords) {

var poly = { type: "Polygon", coordinates: coords };

var area = d3.geoArea(poly);

if (area > bestArea) {

bestArea = area;

best = poly;

}

});

return best;

}

coordsbyid = new Map(

world.features

.map((d) => {

d.properties.position = d3.geoCentroid(

d.geometry.type == "Polygon" ? d : largestPolygon(d)

);

return d;

})

.map((d) => [d.properties.ISO3, projection(d.properties.position)])

)

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

{

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("width", "100%")

.style("height", "auto");

// La sphère

svg

.append("g")

.append("path")

.datum(sphere)

.attr("fill", " #a9daeb")

.attr("d", path);

// Les graticules

svg

.append("g")

.append("path")

.datum(d3.geoGraticule10())

.attr("d", path)

.style("fill", "none")

.style("stroke", "white")

.style("stroke-width", 0.8)

.style("stroke-opacity", 0.5)

.style("stroke-dasharray", 2);

// Les pays

svg

.append("g")

.selectAll("path")

.data(world.features)

.join("path")

.attr("stroke", "white")

.attr("stroke-width", 0.5)

.attr("fill", "#d6b987")

.attr("d", path);

// Les cercles

svg

.append("g")

.attr("fill", "#e04a28")

.attr("fill-opacity", 0.9)

.attr("stroke", "#fff")

.attr("stroke-width", 0.5)

.selectAll("circle")

.data(gdp.sort((a, b) => d3.descending(a.pib2018, b.pib2018)))

.join("circle")

.attr("transform", (d) => `translate(${coordsbyid.get(d.id)})`)

.attr("r", (d) => rayon(d.pib2018));

return svg.node();

}

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.

Learn more