Public
Edited
3 forks
Importers
32 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mavariable = 27
Insert cell
montableau = ["a", "b", "c"]
Insert cell
{
let a = 15;
let b = 12;
return a + b;
}
Insert cell
montableau.length
Insert cell
toto1 = function (a, b) {
return a + b;
}
Insert cell
toto2 = (a, b) => a + b
Insert cell
toto2(2, 10)
Insert cell
Insert cell
\textit{Hello World}
Insert cell
\sqrt[4]{x^4} = |x|
Insert cell
\sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
Insert cell
Insert cell
Example de *markdown* text avec [lien](https://daringfireball.net/projects/markdown/) et du texte en **gras**.
Insert cell
Insert cell
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
Insert cell
Insert cell
Insert cell
Insert cell
<canvas id="myCanvas2" width="100", height = "100" style="border:1px solid #000000; background-color: steelblue;"></canvas>
Insert cell
Insert cell
<svg viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100px" height="100px" fill="#F2CD3B" stroke="#06000C" />
</svg>
Insert cell
Insert cell
result = {
let a = 10;
let b = 13;
return a * b;
}
Insert cell
html`Le résultat de mon calcul est <b>${result}</b> !`
Insert cell
Insert cell
Insert cell
c = a * b
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
button = Inputs.button("Click me", {})
Insert cell
checkboxes = Inputs.checkbox(["A", "B"], { label: "Select some" })
Insert cell
range = Inputs.range([0, 100], { label: "Amount" })
Insert cell
textarea = Inputs.textarea({ placeholder: "Type here" })
Insert cell
Insert cell
Insert cell
viewof range2 = Inputs.range([0, 100], { label: "Amount", step: 1 })
Insert cell
The value of my slider is <b>${range2}</b>
Insert cell
viewof w = Inputs.range([1, 1000], { label: "Width", value: 250, step: 1 })
Insert cell
viewof h = Inputs.range([1, 300], { label: "Height", value: 100, step: 1 })
Insert cell
viewof color = Inputs.color({ label: "Color", value: "#6ddf95" })
Insert cell
viewof mytext = Inputs.text({
value: "C'est trop cool, hein ?"
})
Insert cell
html`<svg viewBox="0 0 1000 ${h}" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="${w}px" height="${h}px" fill="${color}" stroke="#06000C" />
<text x=${w / 2} y=${
h / 2
} text-anchor="middle" alignment-baseline = "middle">${mytext}</text>
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
mydata = [
{ year: 2005, value: 10 },
{ year: 2006, value: 20 },
{ year: 2007, value: 30 },
{ year: 2008, value: 40 },
{ year: 2009, value: 50 },
{ year: 2010, value: 60 },
{ year: 2011, value: 70 },
{ year: 2012, value: 80 },
{ year: 2013, value: 90 }
]
Insert cell
import { bars as bars2 } with { mydata as data } from "@thetylerwolf/day-5-our-first-bar-chart"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { athletes } from "@observablehq/plot"
Insert cell
Insert cell
Insert cell
dotplot = Plot.dot(athletes, { x: "weight", y: "height", fill: "sex" }).plot()
Insert cell
Insert cell
Plot.rectY(
athletes,
Plot.binX({ y: "count" }, { x: "weight", fill: "sex" })
).plot()
Insert cell
Plot.plot({
grid: true,
facet: {
data: athletes,
y: "sex"
},
marks: [
Plot.rectY(
athletes,
Plot.binX({ y: "count" }, { x: "weight", fill: "sex" })
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<html>
<body>
<svg viewBox="0 0 500 60" style="background-color:#CCC">
<circle cx="50" cy="30" r="25" fill="#e04a28"/>
<rect x="100" y="5" height="50" width="50" fill="#5277bf"/>
</svg>
</body>
</html>
Insert cell
Insert cell
{
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)
.attr("fill", "#e04a28");

svg
.append("rect")
.attr("x", 100)
.attr("y", 5)
.attr("height", 50)
.attr("width", 50)
.attr("fill", "#5277bf");

return svg.node();
}
Insert cell
Insert cell
{
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("fill", "none")
.attr("stroke", "#3c803f")
.attr("stroke-width", 2)
.attr("height", 30)
.attr("width", 30)
.attr("x", 180)
.attr("y", 15);

return svg.node();
}
Insert cell
Insert cell
myData = [10, 20, 1, 20, 28]
Insert cell
{
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", (d) => d);

return svg.node();
}
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, 500, 60])
.style("background-color", "#CCC");

let monrectangle = svg
.append("circle")
.attr("cx", 50)
.attr("cy", 30)
.attr("r", 25)
.attr("fill", "#e04a28");

monrectangle
.transition()
.duration(2000)
.attr("cx", 450)
.transition()
.delay(2000)
.duration(3000)
.attr("cx", 30)
.attr("r", 10)
.attr("fill", "blue");

return svg.node();
}
Insert cell
{
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)
.transition()
.duration(2000)
.attr("r", (d) => d);

return svg.node();
}
Insert cell
Insert cell
{
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);
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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
world = FileAttachment("countries.json").json()
Insert cell
Insert cell
projection = d3.geoBertin1953()
Insert cell
Insert cell
height = 500
Insert cell
Insert cell
path = d3.geoPath(projection)
Insert cell
Insert cell
sphere = ({ type: "Sphere" })
Insert cell
Insert cell
{
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", "#de81d3")
.attr("fill-opacity", 0.9)
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
regions = FileAttachment("continants.csv").csv()
Insert cell
Inputs.table(regions)
Insert cell
Insert cell
colors_typo = d3.schemeTableau10.slice(0, 5).concat("white")
Insert cell
types = Array.from(new Set(regions.map((d) => d["Region Code"])))
Insert cell
getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)
Insert cell
getcolor("Europe")
Insert cell
cols = new Map(regions.map((d) => [d.ISO3, getcolor(d["Region Code"])]))
Insert cell
{
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) => cols.get(d.properties.ISO3))
.attr("d", path);

return svg.node();
}
Insert cell
import { Legend, Swatches } from "@d3/color-legend"
Insert cell
Swatches(d3.scaleOrdinal(types, colors_typo))
Insert cell
Insert cell
Insert cell
gdpppc = FileAttachment("gdpppc.csv").csv({ typed: true })
Insert cell
quantile = d3
.scaleQuantile()
.domain(gdpppc.map((d) => d.gdppc2018))
.range(d3.schemeReds[6])
Insert cell
colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))
Insert cell
{
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();
}
Insert cell
Legend(
d3.scaleQuantile(
gdpppc.map((d) => Math.round(d.gdppc2018)),
d3.schemeReds[6]
),
{
title: "PIB par habitant en 2018"
}
)
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(gdp)
Insert cell
Insert cell
radius = d3.scaleSqrt([0, d3.max(gdp, (d) => d.pib2018)], [0, k])
Insert cell
Insert cell
Insert cell
Insert cell
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)])
)
Insert cell
Insert cell
Insert cell
{
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) => radius(d.pib2018));

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
newproj = d3.geoPolyhedralWaterman()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
epsg3035 = "+proj=laea +lat_0=52 +lon_0=10 +x_0=4321000 +y_0=3210000 +ellps=GRS80 +units=m +no_defs"
Insert cell
laea = proj4d3(epsg3035).fitExtent(
[
[0, 0],
[width, height]
],
{
type: "FeatureCollection",
features: europe.features.filter((d) => d.properties.NUTS_ID != "FR")
}
)
Insert cell
Insert cell
Insert cell
Insert cell
topojson = require("topojson-client@3", "topojson-server@3", "topojson-simplify@3")
Insert cell
Insert cell
worldtopo = topojson.topology({ world: world })
Insert cell
Insert cell
topojson.feature(worldtopo, "world")
Insert cell
Insert cell
worldtopo
Insert cell
borders = topojson.mesh(worldtopo, worldtopo.objects.world, (a, b) => a !== b)
Insert cell
Insert cell
Insert cell
merged = topojson.merge(worldtopo, worldtopo.objects.world.geometries)
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");

svg
.append("path")
.datum(merged)
.attr("fill", "#fae6f2")
.attr("stroke", "#ed87c8")
.attr("stroke-width", 1)
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
neighbors = topojson.neighbors(worldtopo.objects.world.geometries)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");

// Sphere

svg
.append("path")
.datum(world)
.attr("fill", "#eeeeee")
.attr("stroke", "white")
.attr("stroke-width", 0.4)
.attr("d", path);

svg
.append("path")
.data(world.features.filter((d) => d.properties.ISO3 == mycountry))
.attr("fill", "#ed87c8")
.attr("stroke", "white")
.attr("stroke-width", 0.4)
.attr("d", path);

svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(neighborhood)
.join("path")
.attr("fill", "#f0d175")
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
world_simplified = {
let world_simplified = topojson.presimplify(worldtopo);
let min_weight = topojson.quantile(world_simplified, minArea);
world_simplified = topojson.simplify(world_simplified, min_weight);
return world_simplified;
}
Insert cell
minArea
Insert cell
countries2 = topojson.feature(world_simplified, world_simplified.objects.world)
.features
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
usa = world.features.find((d) => d.properties.ISO3 == "USA")
Insert cell
Insert cell
Insert cell
Insert cell
mybuffer = turf.rewind(
turf.buffer(usa, 50, { units: "kilometers", endCapStyle: "round" }),
{ reverse: true }
)
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 500])
.style("width", "100%")
.style("height", "auto");

let path = d3.geoPath(d3.geoAlbers());

svg
.append("path")
.datum(mybuffer)
.attr("fill", "#9debb8")
.attr("stroke", "#498c60")
.attr("d", path);

svg
.append("path")
.datum(usa)
.attr("fill", "none")
.attr("stroke", "#498c60")
.attr("stroke-width", 1)
.attr("stroke-dasharray", 3)
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
myDiff = turf.rewind(turf.difference(mybuffer, usa), { reverse: true })
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 500])
.style("width", "100%")
.style("height", "auto");

let path = d3.geoPath(d3.geoAlbers());

svg
.append("path")
.datum(myDiff)
.attr("fill", "#9debb8")
.attr("stroke", "#498c60")
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
NY = turf.point([-73.97104533120057, 40.78634539342028]) // lon, lat
Insert cell
NY650km = turf.rewind(
turf.buffer(NY, 650, { units: "kilometers", endCapStyle: "round" }),
{ reverse: true }
)
Insert cell
myIntersect = turf.rewind(turf.intersect(NY650km, myDiff), { reverse: true })
Insert cell
Insert cell
Insert cell
myUnion = turf.rewind(turf.union(NY650km, myDiff), { reverse: true })
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 500])
.style("width", "100%")
.style("height", "auto");

let path = d3.geoPath(d3.geoAlbers());

svg
.append("path")
.datum(myUnion)
.attr("fill", "#9debb8")
.attr("stroke", "#498c60")
.attr("stroke-width", 1.4)
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
Paris = turf.point([2.335042434318193, 48.85859730057634])
Insert cell
Shangai = turf.point([121.5685920321606, 31.557068992422167])
Insert cell
distance = Math.round(turf.distance(Paris, Shangai, { units: "kilometers" })) +
" km"
Insert cell
greatCircle = turf.greatCircle(Paris, Shangai, {
properties: { name: "Paris to Shangai" }
})
Insert cell
{
let width = 1000;
let height = 400;
let projection = d3
.geoMercator()
.scale(400)
.translate([width / 2 - 400, height / 2 + 390]);
let path = d3.geoPath(projection);

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

svg
.append("path")
.datum(world)
.attr("fill", "#9debb8")
.attr("stroke", "#498c60")
.attr("stroke-width", 1)
.attr("d", path);

svg
.append("path")
.datum(greatCircle)
.attr("fill", "none")
.attr("stroke", "#3d3d3d")
.attr("stroke-width", 2)
.attr("stroke-dasharray", 4)
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
delaunay = d3.Delaunay.from(
cities.slice(0, n1),
(d) => d.x,
(d) => d.y
)
Insert cell
delaunay.points
Insert cell
Insert cell
Insert cell
Insert cell
voronoi = d3.Delaunay.from(
cities.slice(0, n2),
(d) => d.x,
(d) => d.y
).voronoi([0, 0, width, height])
Insert cell
viewof n2 = Inputs.range([100, cities.length], {
step: 1,
value: 1000,
label: "Number of cities"
})
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");

svg
.append("path")
.datum(world)
.attr("fill", "#CCC")
.attr("stroke", "none")
.attr("d", d3.geoPath(patterson));

svg
.append("path")
.attr("stroke", "#652e70")
.attr("fill", "none")
.attr("stroke-width", 0.75)
.attr("d", voronoi.render());

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
geovoronoi = d3.geoVoronoi(coords.slice(0, 1000))
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@7", "d3-geo-projection@4", "d3-geo-voronoi@1")
Insert cell

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.
Learn more