En grafisk formgivares strategi för att kartlägga Instagram-röster

En datavisualisering av Stefan Sagmeister's undersökning av affischer The Happy Film

Till våren fick jag intresse av en serie Instagram-undersökningar av Stefan Sagmeister, som fick tusentals röster, och sedan dess har jag använt JavaScript-kod för att räkna och visualisera resultaten.

För vissa undersökningar var det intressant att visualisera den geografiska platsen för varje omröstning och att leta efter mönster i olika regioner i världen. En av dessa var på de olika affischalternativen för Happy Film.

Affischversionerna var designade för filmens olika distributionsområden, och jag var nyfiken på att se den geografiska fördelningen av människors föredragna mönster.

Väljarnas placering uppskattades från taggade platser för deras senaste inlägg (inom den senaste veckan) och representerar deras mest sannolika plats vid omröstningen. Detta innebär att preferensen för en filmaffisch framför en annan återspeglar den miljö som den upplevs i motsats till var väljaren är ifrån eller var de är baserade.

Denna karta kallas en multivariat hexbin-koropletskarta (jag tror ). Den har väljare grupperade i geografiska fack och färgkodade baserat på antalet röster för varje affisch (4 variabler). (Det är byggt med D3.js och Mapbox, jag har lagt till några kodavsnitt, resurser och krediter nedan om du är intresserad.)

Människor är trikromater och kan uppfatta tre olika färgtoner, vilket gör det möjligt att läsa en tricolor färglegend. Vanligtvis använder choropleth-kartor bara en variabel med ett linjärt intervall mellan två färger (t.ex. brottsfrekvenser från blått till rött). Att blanda tre färger kan göra kartan svårare att läsa ... men det är precis som att blanda grundfärger i klassskolan! (Eller blanda CMYK-färger på ett tryckprojekt).

I slutändan valde jag att använda en CMYK-färgmodell eftersom dessa färger är mycket lättare att skilja på en datorskärm. Detta är förmodligen en förspänning som jag har från att arbeta med mekaniska filer för digitala utskrifter, men nyckeln till primärfärgerna är vilseledande på skärmen (t.ex. den blå färgen har en touch av rött, vilket kan förväxlas med röda röster). Den sannaste (och enklaste) färgmodellen att använda på webben är RGB eftersom den används naturligt av webbläsaren och datorskärmen, men att blanda dessa färger är onaturligt för mig eftersom jag aldrig har gjort det på det här sättet. Ett stort tack till Paul för att ha föreslagit att blanda färger i första hand.

CMYK är en allmänt använd färgmodell i digitalt tryck, där fyra färger - Cyan, Magenta, Gul och Nyckelsvart - blandas för att få önskad färgkombination. Detta fungerade bra för mina ändamål, eftersom det fanns tre posterversioner (röster 1 till 3), såväl som "inget av ovanstående" (omröstning 0).

Detta innebär att en hexagon med grön färg har ungefär hälften 1 (cyan) röster och halva 3 (gul) röster och så vidare. Detta innebär också att en gråbrun färg visar att det är lite att föredra, eftersom det inte finns någon dominerande omröstning. Det fanns få 0 röster (nyckelsvart), så skillnaden är subtil, men de gör vissa fack något mörkare. (För tryck nördar: det finns ingen förvirring mellan den rika svarta och nyckelsvart eftersom rösterna ger upp till en "maximal bläcktäckning" på bara 100%, se anmärkningar nedan.)

Prova livekartan och låt mig veta vad du tycker!

Om du inte har sett Happy Film ännu rekommenderar jag det starkt:

0110101001110011

d3.js

Jag använde Asymmetriks Broschyr D3 tillsammans med en anpassad Mapbox-karta. Asymmetriks plugins är baserade på Steven Halls arbete, som också har varit en riktigt bra referens.

För att bestämma färgerna beräknade jag procenten av varje färg ur det totala röstantalet för varje fack.

function voteSums (d) {kategorier = {} var sum = d3.sum (d, funktion (data) {vote = String (data.o.vote) if (omröstning i kategorier) {kategorier [omröstning] ++} annars { kategorier [omröstning] = 1} return +1}) return {'röster': kategorier, 'summa': summa}}
// och i din d3.csv (). fyll () ... returnera getColor (voteSums (d). röster, voteSums (d) .sum)

CMYK-konverteringen är enkel på så sätt att den inte tar hänsyn till några färgprofiler, men den gör susen.

r = Math.round (255 * (1-c) * (1-k)) g = Math.round (255 * (1-m) * (1-k)) b = Math.round (255 * (1) -y) * (1-k))

En anmärkning om de svarta färgerna: CMYK är en subtraktiv färgmodell, svart kan uppnås med både en rik blandning av CMY eller med nyckeln svart (dvs. det rika svarta dramaet). Eftersom rösterna lägger till 100%, skulle den "maximala bläcktäckningen" också vara 100%, vilket ser ut som en gråbrun i webbläsaren, och därför inte förväxlas med nyckeln svart.

För att undvika att stora områden på kartan dominerades av en färg med för få röster, tog jag bort färgen för fack till få röster och justerade den dynamiskt baserat på kartan.

var getMinBin = () => {returnera 2 + 11 / (map.getZoom () + 1)}

Jag kunde ha använt en bin radie som är proportionell mot antalet röster, men de större städerna hade oproportionerligt fler röster och jag var mer intresserad av de allmänna preferensstendenserna efter geografisk region än densitetsfördelningen.

Ställa in området som proportionellt mot antalet röster

Jag hade också fått feedback om att kartan skulle vara lättare att förstå om färgerna var primära (RYB) istället för CMYK. Det var förvånansvärt svårt att få det att fungera, eftersom konvertering till RYB krävde att lösa en trilinär interpolering ... men tack och lov hade Dave Eddy redan skrivit en fin funktion för det. I slutändan föredrog jag den ursprungliga kartan, eftersom jag upptäckte att den primära blå som den läser på en datorskärm ser ut som en blandad färg och inte fungerar bra för en färglegend.

Samma karta, RYB-färgmodell