Published
Edited
Sep 20, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof table = Inputs.table(
dataEx.filter((d) => filterDate(d)),
{ locale: "FR-fr" }
)
Insert cell
Insert cell
import { SummaryTable } from "@observablehq/summary-table"
Insert cell
SummaryTable(dataEx.filter((d) => filterDate(d)))
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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
types = [
"consommation",
"fioul",
"charbon",
"gaz",
"nucléaire",
"eolien",
"solaire",
"hydraulique",
"pompage",
"bioénergies"
]
Insert cell
typesEx = [
"consommation",
"fioul",
"charbon",
"gaz",
"nucléaire",
"eolien",
"solaire",
"hydraulique",
"bioénergies"
]
Insert cell
dataFiltered = dataParTypeEx.filter((d) =>
categoriesFilteredSorted.includes(d[categoriesName])
)
Insert cell
getSelectedFile = {
return getSelectedFileMonthYear();
}
Insert cell
dataEx = typeDataEx(getSelectedFile)
Insert cell
dataParTypeEx = getDataPerTypeEx
Insert cell
getDataPerTypeEx = buildDatePerType(dataEx, false)
Insert cell
dataParTypeFilteredByDate = dataParTypeEx.filter((d) => filterDate(d))
Insert cell
dataParTypeFilteredByYear = buildDatePerType(
typeDataEx(p_annee_moy).filter((d) => d.année === yearselect)
)
Insert cell
dataParTypeMoisEx = buildDatePerType(
typeDataEx(getSelectedFileMonthYear()),
false
)
Insert cell
categoriesRolledUp = d3.rollups(
dataParTypeFilteredByYear,
(v) => d3.mean(v, (d) => d[metricName]),
(d) => d[categoriesName]
)
Insert cell
// filter and sort the categorical strings based on the selections from the checkboxes and radio buttons
categoriesFilteredSorted = categoriesRolledUp
.filter((d) => categoriesToShow.includes(d[0]))
.sort(sortOptions[selectedSortOption])
.map((d) => d[0])
Insert cell
Insert cell
consommationTotale = categoriesRolledUp.filter(
(d) => d[0] === "consommation"
)[0][1]
Insert cell
categoriesFilteredSortedPie = categoriesRolledUp
.filter((d) => d[0] !== "consommation")
.filter((d) => categoriesToShow.includes(d[0]))
.sort(sortOptions[selectedSortOption])
Insert cell
categoriesFilteredSortedPie2 = categoriesFilteredSortedPie.map((item) => {
return { name: item[0], value: item[1] };
})
Insert cell
Insert cell
Insert cell
myBarData = Object.keys(myBarDataReduce).map((item) => {
return { type: item, puissance: myBarDataReduce[item] };
})
Insert cell
// a few functions to choose from for sorting the categories
sortOptions = ({
alphabétique: (a, b) => (a[0] > b[0] ? 1 : -1),
décroissant: (a, b) => b[1] - a[1],
croissant: (a, b) => a[1] - b[1]
})
Insert cell
Insert cell
formatDate = d3.timeFormat("%Y-%m-%d")
Insert cell
function capitalize(string) {
return string[0].toUpperCase() + string.slice(1);
}
Insert cell
Insert cell
categoriesName = "type"
Insert cell
metricName = "puissance"
Insert cell
Insert cell
Insert cell
Insert cell
dateExtent1 = d3.extent(dataEx.map((d) => d.date))
Insert cell
slider1Dates = slider1.map((d) => d3.timeDay.offset(dateExtent1[0], d))
Insert cell
function filterDate(d) {
return (d.date >= slider1Dates[0]) & (d.date <= slider1Dates[1]);
}
Insert cell
function getSelectedFileMonthYear() {
let fileName = p_mois_moy;
if (sampling === "mois") {
fileName = p_mois_moy;
}

if (sampling === "annee") {
fileName = p_annee_moy;
}
return fileName;
}
Insert cell
//import { WSJPieSorting } from "@alainro/rte2012-2020";
// WSL recommended sorting for pie chart
function WSJPieSorting(array) {
let WSJproportion = [array[0]]
.concat(array.slice(2).reverse())
.concat(array[1]);
return WSJproportion;
}
Insert cell
function filterPieColor() {
let myPieColorPreFiltered = [];
for (let i = 0; i < myPieData2.length; i++) {
myPieColorPreFiltered.push(getColor(myPieData2[i].name));
}
return myPieColorPreFiltered;
}
Insert cell
myPieColors = filterPieColor()
Insert cell
function buildDatePerType(dataSource, addPompage) {
const dataParType = [];
dataSource.forEach((d) => {
const dataArray = addPompage ? types : typesEx;
dataArray.forEach((t) => {
dataParType.push({
date: d.date,
année: d.année,
mois: d.mois,
jour: d.jour,
type: t,
puissance: +d[t]
});
});
});

return dataParType;
}
Insert cell
Insert cell
import { colorOpacity } from "@mootari/color-opacity"
Insert cell
import { rangeSlider } from "@mootari/range-slider"
Insert cell
Insert cell
import { PieChart } from "@d3/pie-chart"
Insert cell
Insert cell
Insert cell
Insert cell
p_mois_moy = FileAttachment("puissance_mois_moy.csv").csv()
Insert cell
p_annee_moy = FileAttachment("puissance_annee_moy.csv").csv()
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