Published
Edited
May 19, 2021
Insert cell
Insert cell
d3.csv("https://fxjollois.github.io/donnees/tips.csv")
Insert cell
Insert cell
{
var data = d3.csv("https://fxjollois.github.io/donnees/tips.csv");
return data[0];
}
Insert cell
Insert cell
{
var data = await d3.csv("https://fxjollois.github.io/donnees/tips.csv");
return data[0];
}
Insert cell
Insert cell
{
var data = await d3.csv(
"https://fxjollois.github.io/donnees/tips.csv",
l => {
l.total_bill = parseFloat(l.total_bill);
l.tip = parseFloat(l.tip);
l.size = parseInt(l.size);
return l;
}
);
return data[0];
}
Insert cell
Insert cell
html`<table id="tableau"></table>`
Insert cell
d3.csv(
await "https://fxjollois.github.io/donnees/tips.csv",
l => {
l.total_bill = parseFloat(l.total_bill);
l.tip = parseFloat(l.tip);
l.size = parseInt(l.size);
return l;
}).then(data => {
// Ajout des noms des variables
d3.select("#tableau").append("thead").append("tr").selectAll("th")
.data(Object.keys(data[0]))
.enter()
.append("th").html(d => d);
// Ajout des données (seulement les 10 premières)
d3.select("#tableau").append("tbody").selectAll("tr")
.data(data.slice(0, 10))
.enter()
.append("tr")
.selectAll("td")
.data(d => Object.values(d))
.enter()
.append("td")
.html(d => d);
});
Insert cell
Insert cell
Insert cell

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