The objective of this dataviz is to visualize on a map which are the sectors of activity of the companies of the metropolis of Lyon, how these sectors are distributed spatially, what size each represents. The project consists of producing a 3D map (3 dimensions: spatial, color and height) with the companies of the territory according to their sector of activity, visually encoded by color, and according to their size in turnover or HR (number of employees), encoded visually by height. It is also possible to take into account their capital (4th dimension) by applying a filter (to be developed).
Clone the git repo:
git clone https://github.com/bberthaud/Dataviz_Carte_3D-entreprises_Lyon.git
It is necessary to create a mapbox account to retrieve the maps. The account must be created here: https://www.mapbox.com/. Once created copy-paste your "default public token" and replace the value of mapboxgl.accessToken in script.js.
Start a local server with python from the parent folder:
python3 -m http.server
The dataviz is inspired by this one: https://bl.ocks.org/ryanbaumann/f4a2e6970eedd1948aca182d0f184968. It is an adaptation of the latter with the following features:
- 3D map to represent the size and sector of industrial companies
- aggregation of companies in order to offer a micro view and a macro view of the distribution of companies
- tooltip to provide details on the distribution of workforce by sector within a bar: we display the 3 most present sectors with their workforce (as well as the percentage) then the rest and finally the total workforce of the bar
- sliders to adjust radius, transparency and scale
- filter to keep companies within a range (min-max) of salaried workforce
- filter on capital, we only keep companies that exceed the selected threshold
- automatic display that adjusts the radius automatically according to the zoom
- legend on the colors of the sectors present with selection of sectors
- choice of base map (dark, light, outdoors, satellite)
- general information on the project with contact
The radius, expressed in meters, defines the size of the area that is aggregated. This area is then displayed in hexagonal form.
Opacity is a factor between 0 and 1: 0 for transparent and 1 for opaque.
Scale is a multiplicative factor.
The coverage is a multiplying factor between 0 and 1. The displayed radius corresponds to coverage * radius.
In script.js, filename contains the name of the csv data file. This data file is generated using the jupyter dataProcessed.ipynb script. SECTOR_RANGE is to be modified according to the sectors of the companies concerned. If SECTOR_RANGE is modified, make sure that COLOR_RANGE is of the same length since a color is assigned to a sector.
All the files necessary for the data and their preprocessing are located in the data / folder. The jupyter dataProcessed.ipynb script is used to switch from the SIRENE_GEO_122016.csv file of the SIRENE database of companies in the Lyon region (available here) to the data_processed.csv input file of the dataviz.
The input csv file should be in the following format:
- a "sector" column of categorical type with the indices attached to the sectors of the list SECTOR_RANGE;
- a column “RH” of numeric type;
- two columns "lng" (longitude) and "lat" (latitude) for the coordinates of the companies;
- and a capital column in% (from 0 to 100)
The app was developed for viewing on Chrome. It can also be used on Firefox but the style has not been worked on for this web browser.
The technical realization is made thanks to D3.js with mapbox. The hexagonal bar layer is developed by deck.gl.
During the automatic display, the radius is automatically calculated according to the zoom according to the following law: radius = (19 / zoom) ** 10. This is an inverse geometric law and it is set manually (adjustment of the constants ) in order to have a satisfactory rendering for the UX. Contact
For any technical questions or suggestions: datagora@lists.erasme.org
L'objectif de cette dataviz est de visualiser sur une carte quels sont les secteurs d'activités des entreprises de la métropole de Lyon, comment ces secteurs sont répartis spatialement, quelle taille chacun représente. Le projet consiste à réaliser une carte 3D (3 dimensions : spatiale, couleur et hauteur) avec les entreprises du territoire selon leur secteur d'activité, encodé visuellement par la couleur, et selon leur taille en CA (chiffre d'affaires) ou RH (nombre de salariés), encodée visuellement par la hauteur. Il est aussi possible de tenir compte de leurs capitaux (4e dimension) en appliquant un filtre.
Clonez le repo git :
git clone https://github.com/bberthaud/Dataviz_Carte_3D-entreprises_Lyon.git
Il est nécessaire de se créer un compte mapbox pour récupérer les cartes. Le compte doit être créé ici : https://www.mapbox.com/. Une fois créé copiez-collez votre "default public token" et remplacez la valeur de mapboxgl.accessToken dans script.js.
Lancez un serveur local avec python depuis le dossier parent :
python3 -m http.server
La dataviz s'inspire de celle-ci : https://bl.ocks.org/ryanbaumann/f4a2e6970eedd1948aca182d0f184968. Elle est une adaptation de cette dernière avec les fonctionnalités suivantes :
- carte 3D pour représenter la taille et le secteur des entreprises industrielles
- agrégation des entreprises afin d'offrir une vue micro et une vue macro de la répartition des entreprises
- tooltip pour apporter des précisions sur la répartition des effectifs par secteur au sein d'une barre : on affiche les 3 secteurs les plus présents avec leur effectif (ainsi que le pourcentage) puis le reste et enfin l'effectif total de la barre
- curseurs pour régler le rayon, la transparence et l'échelle
- filtre pour garder que les entreprises dans une fourchette (min-max) d'effectifs salariés
- filtre sur les capitaux, on ne conserve que les entreprises qui dépassent le seuil sélectionné
- affichage automatique qui règle le rayon automatiquement selon le zoom
- légende sur les couleurs des secteurs présents avec sélection des secteurs
- choix du fond de carte (dark, light, outdoors, satellite)
- information générale sur le projet avec contact
Le rayon (radius), exprimé en mètres, définit la taille de la zone qui est agrégée. Cette zone est ensuite affichée sous forme hexagonale.
L'opacité est un facteur compris entre 0 et 1 : 0 pour transparent et 1 pour opaque.
L'échelle est un facteur multiplicatif.
La couverture (coverage) est un facteur multiplicatif compris entre 0 et 1. Le rayon affiché correspond à coverage * radius.
Dans script.js, filename contient le nom du fichier de données csv. Ce fichier de données est généré grâce au script jupyter dataProcessed.ipynb . SECTOR_RANGE est à modifier en fonction des secteurs des entreprises concernés. Si SECTOR_RANGE est modifié il faut s'assurer que COLOR_RANGE est de la même longueur puisqu'une couleur est attribuée à un secteur.
Tous les fichiers nécessaires aux données et à leurs prétraitements se trouvent dans le dossier data/. Le script jupyter dataProcessed.ipynb permet de passer du fichier SIRENE_GEO_122016.csv de la base SIRENE des entreprises de la région lyonnaise (disponible ici) au fichier data_processed.csv d'entrée de la dataviz.
Le fichier csv d'entrée doit être au format suivant :
- une colonne "secteur" de type catégorielle avec les indices rattachés aux secteurs de la liste
SECTOR_RANGE; - une colonne "RH" de type numérique;
- deux colonnes "lng" (longitude) et "lat" (latitude) pour les coordonnées des entreprises;
- et une colonne capitaux en % (de 0 à 100)
L'application a été développée pour être affichée sur Chrome. Elle peut aussi être utilisée sur Firefox mais le style n'a pas été travaillé pour ce navigateur web.
La réalisation technique est faite grâce à D3.js avec mapbox. La couche de barres hexagonales est développée par deck.gl.
Lors de l'affichage automatique le rayon est automatiquement calculé en fonction du zoom selon la loi suivante :
rayon = (19 / zoom) ** 10. Il s'agit d'une loi géométrique inverse et elle est réglée manuellement (ajustement des constantes) afin d'avoir un rendu satisfaisant pour l'UX.
Pour toutes questions techniques ou suggestions : datagora@lists.erasme.org