url = "https://docs.google.com/spreadsheets/d/1F1DWsOR4s_St31g_qpzG2PYyGqmXgKcANaiXVX8cfQ4/edit?gid=818095728#gid=818095728"
data = d3.csv(getCsvUrl(url),d3.autoType);
// d3.ascending
dataLong = data.flatMap(d =>
["4M", "Sans", "HMH", "Somfy", "Nice Home"].map(fournisseur => ({
Mois: d.Mois,
Fournisseur: fournisseur,
Valeur: d[fournisseur]
}))
)
Plot.plot({
y: {label: "Montant (€)"},
x: {label: "Mois"},
color: {legend: true},
marks: [
Plot.barY(dataLong, {
x: "Mois",
y: "Valeur",
fill: "Fournisseur"
}),
Plot.ruleY([0])
]
})
// data.sort((a, b) => d3.ascending(a.Mois, b.Mois)); // ou par "date"
/* Plot.plot({
marks: [
Plot.barY(data, {x: "Mois", y: "HMH"}),
Plot.ruleY([0])
]
}) */
Plot.plot({
marks: [
Plot.barY(data, {x: "Mois", y: "4M"}),
//Plot.ruleY([0])
]
})
data
X
Mois
Y
4M
Color
#9d5bf3
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
SummaryTable(data)
// Converts a Google Sheets website URL to its CSV URL. You can also go to “File → Publish to web”, select the “Comma-separated values (.csv)” type, select the sheet with your data, and use that CSV URL directly with `d3.csv` above. If you need data to update faster, try the Google Sheets API: https://stackoverflow.com/questions/30082277/accessing-a-new-style-public-google-sheet-as-json/44479726#44479726
getCsvUrl = url => {
url = new URL(url);
const id = url.pathname.split("/")[3]
const gid = new URLSearchParams(url.hash.slice(1)).get("gid") || 0;
return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`
}
import { SummaryTable } from "@observablehq/summary-table"
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.
