The avatar for @vvivanloc
Vincent VIVANLOC
Some viz for ToulouseDataViz
Published
Edited
Jun 12, 2022
Importers
6
Insert cell
Insert cell
intro = md`# <span style="color:Steelblue"> Introduction</span>

**Que peut-on raconter avec ce jeu de données sur les consommations électriques en France ? **

La source des données provient de [RTE](https://www.rte-france.com/eco2mix/telecharger-les-indicateurs).
Ce jeu de données contient la puissance consommée en France ainsi que le type de génération (nucléaire, charbon, éolien...) sur les années 2012 à 2020 avec un pas de 30 minutes.


Un [travail préparatoire](https://www.kaggle.com/vincentvivanloc/eco2-energy-mix/) a été effectué sur ces jeux de données :
- Concaténation des 9 fichiers "annuel définitif" des années 2012 à 2020.
- Un certain nombre de colonnes des fichiers originaux ont été supprimées.
- Les données sont regroupées par jour, mois ou année donnent la somme, la valeur moyenne, min et max par jour avec un fichier par regroupement.
`
Insert cell
intro
Insert cell
Insert cell
viewof table3 = Inputs.table(
dataParType.filter((d) => filterDate(d)),
{ locale: "FR-fr" }
)
Insert cell
viewof table4 = Inputs.table(
dataParTypeMois.filter((d) => filterDate(d)),
{ locale: "FR-fr" }
)
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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
heatmapFacet(production1,production2).legend("color",{label: "puissance (MW) →"})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
categoriesFilteredSortedPie = categoriesRolledUp
.filter((d) => d[0]!=="consommation")
.filter((d) => categoriesToShow.includes(d[0]))
.sort(sortOptions[selectedSortOption])
Insert cell
myPieData = categoriesFilteredSortedPie.reduce((accumulator, element, index) => {
return {...accumulator, [element[0]]: element[1]/consommationTotale};
}, {});
Insert cell
Insert cell
Insert cell
pie = chart
Insert cell
Insert cell
myBarData=Object.keys((myBarDataReduce)).map(item=>{return {type:item, puissance:myBarDataReduce[item]}})
Insert cell
# RAJOUTER DES Couleurs ?
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
heatmap(production2).legend("color" ,{label: "puissance (MW) →"})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
p_jour_max=FileAttachment("puissance_jour_max.csv").csv()
Insert cell
p_jour_min=FileAttachment("puissance_jour_min.csv").csv()
Insert cell
p_jour_moy=FileAttachment("puissance_jour_moy.csv").csv()
Insert cell
p_mois_moy=FileAttachment("puissance_mois_moy.csv").csv()
Insert cell
p_annee_moy=FileAttachment("puissance_annee_moy.csv").csv()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Ces mêmes données ventilées par type.
Insert cell
Insert cell
dataParType = getDataPerType
Insert cell
dataParTypeWithoutConsumption = getDataPerType.filter((d) => d.type != "consommation")
Insert cell
dataParTypeMois= buildDatePerType(typeData(getSelectedFileMonthYear()))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dateExtent1 = d3.extent(data.map((d) => d.date))
Insert cell
slider1Dates = slider1.map((d) => d3.timeDay.offset(dateExtent1[0], d))
Insert cell
Insert cell
Insert cell
categories = categoriesRolledUp.map((d) => d[0])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
import { rasterize, serialize } from "@mbostock/saving-svg"
Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"
Insert cell
import {toFrenchNumber} from "3084cf5b1d2439cf"
Insert cell
import { rangeSlider as rangeSlider } from "@mootari/range-slider"
Insert cell
Insert cell
md`
## <span style="color:orange">Annexes </span>

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

https://observablehq.com/@d3/d3-group

lineMultiFacette réalisé à partir de l'exemple https://observablehq.com/@zanarmstrong/instead-of-a-stacked-area-chart-try-an-ordered-faceted-chart


heatmap https://observablehq.com/@observablehq/plot-cell

`
Insert cell
//dateExtent2 = d3.extent(dataParType.map((d) => d.date))
Insert cell
//puissanceExtent2 = d3.extent(dataParType.map((d) => d.puissance))
Insert cell
/*graph_dom = DOM.download(
await rasterize(graph_simple),
"grapheSimple.png",
"Récupérer le lien pour intégrer le graphique dans un site web"
) */
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