Data Analysis, Data Viz
Javascript, python, QGIS, Tableau, illustrator...
note = md`
# <span style="color:#41ab5d"> Hackaviz 2021 tidy tree</span>
## Quartiers Prioritaires (QP) d’Occitanie : caractéristiques et transactions immobilières..
Version 1.0
This notebook is using 2 csv files about poor neighborhoods of cities in Occitania region in France.
The fist one describe the attributs of the neighborhoods, the second one the 28825 real estate transactions in the neighborhoods between 2016 and 2020.
A calculation of the number of transactions (houses and appartments) is performed for each neighborhoods and then a merge with some attributs of neighborhoods.
The user could then select the attribute to be displayed in the tidy tree
I save the tidy tree as svg for 3 significant attributs in order to create using illustrator a "tree layer tidy tree" as shown in note 2
See note 1 for more data informations <sup>[[1](#footnote1)]</sup>
See note 2 for references <sup>[[2](#footnote2)]</sup>
see note 3 for to do list <sup>[[3](#footnote3)]</sup>
`
md``
md`
### <span style="color:#636363"> Foncier qp H2021 </span>
`
raw_data_foncier_qp = FileAttachment("foncier_qp.csv").csv()
raw_data_qp = FileAttachment("qp.csv").csv()
md`
## <span style="color:orange"> DATA TREATMENT </span>
`
md`
### <span style="color:#636363"> ex : déclaration du nom de la région </span>
`
select_region = "Occitanie"
md`
### <span style="color:#636363"> Calcul du nombre de ventes de maisons et d'appartements dans les QP sur les 5 ans </span>
`
raw_count_transaction_qp = d3
.nest()
.key(d => d.code_qp)
.key(d => d.type_local)
.rollup(v => ({
count: v.length
}))
.entries(
raw_data_foncier_qp.filter(
d => d.type_local != "Local industriel. commercial ou assimilé"
)
)
md`
### <span style="color:#636363"> Reconstruction du jeu de données </span>
`
count_transaction_qp = {
const temp = raw_count_transaction_qp.map((row) => ({
code_qp: row.key,
count_maison:
row.values[1] != undefined
? +Object.values(row.values[1].value).toString()
: 0,
count_appartement:
row.values[0] != undefined
? +Object.values(row.values[0].value).toString()
: 0
}));
return temp;
}
merge = (a1, a2) =>
a1.map((itm) => ({
...a2.find((item) => item.code_qp === itm.code_qp),
...itm
}))
md`
### <span style="color:#636363"> Merge du fichier traité avec celui des caractéristiques de QP </span>
`
merge_data_foncier_qp = merge(raw_data_qp, count_transaction_qp)
md`
### <span style="color:#636363"> Mise en forme du fichier pour realisation du graphique </span>
`
md`
### <span style="color:#636363"> Visualisation du tableau des données traitées </span>
`
printTable(data_foncier_qp.slice(1, 5))
md`
## <span style="color:orange"> CONFIGURATION </span>
`
format = d3.format(".1f")
md`#### Recherche de la liste des noms de départements de la region Occitanie
`
MapDept = new Map(raw_data_foncier_qp.map(c => [c.nom_departement, c]))
dept_liste = Array.from(MapDept.keys())
MapNumDept = new Map(raw_data_foncier_qp.map(c => [c.code_departement, c]))
num_dept_liste = Array.from(MapNumDept.keys())
md`#### Affectation du numéro de département
`
md`#### Affectation d'une couleur en fonction de la variable selectionnée
`
radius = 700 //517
graphicheight = 800
label_value = d3
.scaleOrdinal()
.domain([
"population",
"ratio_population",
"ratio_etranger",
"nb_transaction_maison",
"nb_transaction_appart",
"nb_transaction",
"transactionParHab"
])
//.range(["hab", "%", "%", "", "", "", "%"])
.range(["", "%", "%", "", "", "", "%"])
.unknown("")
md`
## <span style="color:orange"> IMPORT </span>
`
import { select, color, radio, slider, checkbox } from "@jashkenas/inputs"
import { printTable } from '@uwdata/data-utilities'
import { rasterize, serialize } from "@mbostock/saving-svg"
d3 = require("d3@5")
html`<style>
.number {
text-align: right;
font-feature-settings: 'tnum';
}
</style>`
md`
## <span style="color:orange"> NOTES </span>
`
footnote = (referencingCellName, number, text) => {
return html`<span style="color:orange"><ol start=\"${number}"><li><a href="#${referencingCellName}">^</a> ${text}</li></ol> </span>`;
}
footnote1 = footnote("note", 1, "Data informations")
md`Les jeux de données proviennent de l'hachackaviz #2021 de l'association Toulouse-DataViz
voir github https://github.com/ToulouseDataViz/Hackaviz2021
`
footnote2 = footnote("note", 2, "References")
md`voir github https://github.com/ToulouseDataViz/Hackaviz2021
Exemple d'un tidy tree à 3 couches réalisé avec illustrator
`
FileAttachment("tidy_tree(2).png").image()
md`
inspiré de https://observablehq.com/d/9f5e46526508d568
https://observablehq.com/@khxu/radial-tree-of-bay-area-cities-and-counties
https://observablehq.com/@ptomlinsongti/d3-collapsible-tree-and-radial-tidy-tree
https://stackoverflow.com/questions/19317115/convert-flat-json-file-to-hierarchical-json-data-like-flare-json-d3-example-fil
https://observablehq.com/@idris-maps/methodes-sur-une-liste-array
https://observablehq.com/@observablehq/inputs
https://observablehq.com/@jasonxu1244/radial-dendrogram-circus-data-v-2
`
footnote3 = footnote("note", 3, "To Do List")
md`La fonction "Download radial tree as svg" n'exporte pas les tracés reliant les couches`
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.