Oprettelse af datadrevne kort

Hos Uber bruger vi kort til alt sammen - visualiserer millioner af geodatapunkter, overvåger vejforhold og går ind for politiske ændringer i byer rundt om i verden

I de sidste par år har vi oplevet en enorm vækst. Som et resultat har vi mange teams i hele organisationen, der producerer kortvisualiseringer til en lang række behov. Vi så et behov for at skabe et samlet system til at guide oprettelsen af ​​konsistente, datadrevne kort i høj kvalitet.

Udfordringen

At udforme geospatiale visualiseringer i skala er ikke din hverdagslige designopgave. Kompleksiteten og manglen på værktøj i dette rum gør det til noget af en sort kunst. Ikke desto mindre er der ikke mange virksomheder i verden, der har de rige geo-ressourcer, Uber har, så vi var glade for at udforske denne kreative avenue.

Mange hold, mange kort

Den måde, vi har lavet kort på tidligere, fungerede, da virksomheden var mindre. Hvert kort blev oprettet til specifikt formål. Da virksomheden voksede, var det imidlertid ikke længere nok at have individuelt gode kort. Vi havde brug for en ramme, der gav mening i en global skala.

Vi troede, det ville være nyttigt at have et udgangspunkt for hold på tværs af organisationen for at skalere op og lave bedre kort hurtigere.

Et knusende kort, der blev oprettet i 2016

Billedet ovenfor er ikke en udtømmende liste, men som du kan se, var vores kort godt - overalt på kortet. Individuelt er hvert kort vellykket, men som familie mangler de konsistens. Det var et kerneproblem, som vi ønskede at tage op.

Mangel på værktøj

Vi knækkede øjeblikkeligt åbent sketch, ivrig efter at komme i gang med dette kødfulde problem. Men efter at have stirret blankt på skærmen i et par minutter, startede spørgsmålene ind.

"Hvordan redigerer vi vektorkort i Sketch?", "Skal vi bruge Illustrator?", "Hvordan kan vi simulere tusinder af datapunkter?", "Skal vi håndtegne veje?"

"Vi kan ikke bruge noget af de værktøjer, vi kender ... dette vil tage evigt ..."

Det viser sig, at Sketch, Illustrator og praktisk talt alle de værktøjer, vi var komfortable med, ikke har meget støtte til almindelige GIS-filformater og almindelige kartografiske opgaver.

At ikke kunne bruge velkendte designværktøjer sætter os lidt uden for vores komfortzone. Vi har til sidst overvundet disse begrænsninger ved at lære nye værktøjer og bygge tilpasset software, som jeg kommer til lidt senere.

Global skala

For yderligere at forene kompleksiteten af ​​dette problem, havde vi brug for vores rammer for at skalere op til behovene i 400+ byer rundt om i verden. Den enorme samling af forskellige geografiske funktioner og datatyper sætter dette designproblem i en helt egen klasse.

Processen

Vores proces var i vid udstrækning præget af prøve og fejl og ved at samle et usandsynligt cast af værktøjer til at få jobbet gjort. Her er nogle af projektets højdepunkter.

Oprettelse af et fundament

En stor del af vores tid blev brugt på at definere basiskorttemaer. Vi vidste, at disse temaer ville tjene som grundlaget for hele projektet, så det var kritisk at få dem lige foran.

Basiskortstyling optimeret til datavisualisering

Vi optimerede disse basiskort til datavisualisering og fokuserede på tre hovedområder:

Detalje: Vi finjusterede mængden af ​​detaljer, du ser på et givet zoomniveau. Vi gik med en relativt minimal tilgang, så dataene ikke konkurrerede med basiskortet.

Farve: Fra Ubers brandfarver producerede vi forskellige nuancer og toner til forskellige kortelementer. Det mørke tema blev inspireret af det nat-kort, der blev brugt i vores driver-app. Den største udfordring var at skabe tilstrækkelig kontrast mellem alle de forskellige elementer, der holdt op for en række forskellige skærme og enheder.

Typografi: typesystemet bruger vores brand typeface (FF Clan) til at trække det hele sammen. I en ånd af konsistens gik vi med en relativt simpel rampe for at reducere variationen mellem vores kort.

Brugte værktøjer

Det meste af det tunge løft i denne fase blev udført i det fantastiske Mapbox Studio. Dette webbaserede værktøj gør det relativt smertefrit at vælge alle funktioner på et kort og indstille deres udfyldningsfarver, konturer, ikoner osv. Det har også fantastisk understøttelse til indstilling af stilarter baseret på zoomniveau.

Mapbox studio - bedst i klassen kortstil editor

Tag dataene med

Når vi havde en første udskæring af vores basiskort, begyndte vi at tilføje datalag. Heldigvis for os var det ikke svært at hente dataene, vi brugte vores interne systemer til at generere massive filer, der indeholdt alle de geodata, vi havde brug for. Med dataene i hånden startede vi med vores to mest almindeligt anvendte visualiseringer:

Spredepladser og sekskanter

Spredningsdiagrammerne viser individuelle datapunkter, mens hexbunkerne er gode til at vise densitet, når der er for mange overlappende punkter. Den vanskelige del finesser den passende størrelse, opacitet og slagtykkelse for punkter og hexes ved forskellige zoomniveauer.

Spredepladser og Hex-skraldespand, der viser koncentration af Uber-turaktivitet

Vi tager vores databeskyttelse og sikkerhed meget alvorligt hos Uber. For de fleste offentlige (og mange interne) sager, vi foretrækker, foretrækker vi hex-skraldepladser eller en eller anden form for klyngesamling for at skjule eventuelle privatlivspolitiske problemer, der følger med at vise individuelle datapunkter.

Farve skalaer

En anden komponent i vores ramme er farve. Vores interne teams udfører omfattende dataanalyse og er afhængige af kort for at hjælpe dem med at tage beslutninger. Farveskala hjælper med at finde outliers, trends og 'nåle i høstakken'.

Vi bruger en af ​​vores kernemærkefarver (Aqua) som den primære farvetone i de fleste tilfælde, men nogle datasæt krævede en sekventiel farveskala for at fremhæve omfanget (højder og lavt niveau). Vi har også oprettet en divergerende farveskala, der er god, når du vil fremhæve gennemsnittet af dit datasæt og udsætte data, der markant 'afviger' fra normen.

Brugte værktøjer

Mens Mapbox leverede alt, hvad vi havde brug for for at style kortet selv, fandt vi Carto have bedre støtte til at skabe brugerdefinerede datadrevne stilarter (selvom jeg tror, ​​dette kommer snart til Mapbox). Carto er også mere fleksibel med hensyn til de typer data, du kan uploade til visualisering. Når tingene blev virkelig intense, måtte vi læne os på QGIS til brugerdefineret filtrering, fremspring og manipulation.

Carto (venstre) brugt til datadrevet styling og QGIS (til højre) brugt til dybere analyse og manipulation

At tage det et skridt videre

På dette tidspunkt var vi glade for den samlede kreative retning, men det var trættende og langsomt at skabe en enkelt kortvisualisering. Dernæst havde vi brug for en måde at fremskynde processen og skalere den op.

Trip linjer

Triplinjer er en af ​​signaturvisualiseringerne, der vises i vores administrerende direktørs TED Talk, og de er vist i en række publikationer. Udfordringen er, at den faktiske tursti ikke bages i rå data. Det skal genereres i kode, der er baseret på en række bredde- og breddegrader. Vi håbede, at der ville være en afkrydsningsfelt for "Generer linjer" i et af vores ny fundne værktøjer, men det var ikke tilfældet.

Triplinevisualiseringer, der viser unikke træk ved forskellige byer

For at generere linjerne oprettede vi et brugerdefineret værktøj med JavaScript, D3.js og Mapbox-instruktionens API. Dette værktøj gjorde det muligt for os at tage vores massive CSV-filer og generere geobaserede stardata med et enkelt træk og slip. Nu kan vi generere 50.000 individuelle turstier på cirka tre minutter og derefter importere dem til CARTO eller QGIS til styling.

Choropleths

Choropleths hjælper med at visualisere, hvordan en måling eller værdi varierer på tværs af et geografisk område. I dette tilfælde brugte vi amerikanske postnumre som vores geografiske grænser og tilføjede forskellige datasæt for at skabe farvevariationen.

Choropleths baseret på postnumre genereret i D3.js

Choropleths og Hex Bins har begge polygonal karakter, så vi gav dem den samme visuelle behandling. Den største kamp med denne type visualisering var at finde geografiske grænsefiler at eksperimentere med.

Brugerdefinerede værktøjer

Vi skabte brugerdefineret værktøj til at lette hurtigere styling-iterationer og hurtigt skalere vores designbeslutninger til hundreder af steder rundt om i verden.

Tilpassede værktøjer skrevet i javascript og d3.js hjalp os med at generere komplekse scener hurtigt

Vi fandt os selv i at bruge en masse tid på at købe geo-grænsefiler og spore turlinjer, hvilket gjorde det smerteligt langsomt at skabe en enkelt kortvisualisering.

Disse værktøjer hjalp med at fremskynde vores arbejdsgang ved at eksportere komplekse scener med tusinder af individuelt gengivne stier direkte til GeoJSON- og SVG-filer. Vi ville derefter tage disse filer og importere dem til andre værktøjer som Carto, Mapbox og QGIS for yderligere styling og manipulation.

Resultaterne

I løbet af dette projekt producerede vi hundredvis af kort for at finjustere detaljerne - farver, typografistørrelser, opacitet, linjetykkelser og mange flere. I sidste ende blev disse retningslinjer leveret som en intern ramme, som hold på tværs af Uber kan bruge som et fælles udgangspunkt for at skabe, datadrevet kort i høj kvalitet.

Elementer fra den endelige ramme

Afsked tanker

Skønt det kan være afskrækkende at tackle problemer med denne skala og kompleksitet, er det en af ​​de største fordele ved at designe på Uber at have en sådan forbløffende samling data.

For mig personligt fik dette projekt mig til at føle mig som et barn i en databehandler. Tidligere ville det være næsten umuligt at finde en mulighed for at undersøge, hvad der er muligt med denne datamængde. At sætte denne ramme på plads gjorde det muligt for os at udforske mange kreative veje og visualisere dataene på så mange nye og interessante måder. Der var aldrig et kedeligt øjeblik fra start til slut.

Vi ansætter - Vores kartografiteam er på udkig efter talentfulde designere og designingeniører til at blive medlem af teamet! Hvis du er interesseret i at lære mere om Uber Design, send mig en note eller tjek vores åbne designroller på vores karriereside.