გრაფიკული დიზაინერის მიდგომა Instagram ხმების შედგენაში

სტეფან საგმეისტერის კვლევის მონაცემების ვიზუალიზაცია ბედნიერი ფილმის პლაკატებზე

გაზაფხულზე დაბრუნდა ჩემი ინტერესი სტეფან საგმეისტერის მიერ Instagram- ის გამოკითხვის სერიის მიერ, რომლებიც ათასობით ხმას იღებდნენ, და მას შემდეგ მე JavaScript– ის კოდს ვიყენებდი შედეგების დათვლისა და ვიზუალიზაციისთვის.

ზოგიერთი გამოკითხვისთვის საინტერესო იყო თითოეული ხმის გეოგრაფიული ადგილმდებარეობის ვიზუალიზაცია და მსოფლიოს სხვადასხვა რეგიონში ნიმუშების ძებნა. ერთი მათგანი იყო სხვადასხვა ფილმის სხვადასხვა ვარიანტებზე, ბედნიერი ფილმისთვის.

პლაკატის ვერსიები განკუთვნილი იყო ფილმისთვის სხვადასხვა განაწილების ადგილისთვის და მე მაინტერესებდა ხალხის სასურველი დიზაინის გეოგრაფიული განაწილება.

ამომრჩეველთა ადგილმდებარეობა შეაფასეს უახლესი პოსტების მონიშნული ადგილებიდან (ბოლო ერთი კვირის განმავლობაში) და წარმოადგენს მათ სავარაუდო ადგილს კენჭისყრის დროს. ეს ნიშნავს, რომ ერთი ფილმის პლაკატის უპირატესობა სხვაზეა ასახული იმ გარემოში, რომელშიც იგი განიცდის გამოცდილებას, იმ განსხვავებით, თუ საიდან არის ამომრჩეველი ან საიდან დგას ისინი.

ამ რუქას ჰქვია მრავალმხრივი ჰექსბინის ქოროპლეტის რუქა (ვფიქრობ ). მან ამომრჩეველთა ჯგუფებად აქცია ჯგუფის გეოგრაფიული ყუთები და კოდირებული ფერი, თითოეული პლაკატისთვის ხმების რაოდენობის საფუძველზე (4 ცვლადი). (ის აშენებულია D3.js და Mapbox- ით, მე დაამატეთ რამდენიმე კოდი, ჩანაწერი, რესურსები და კრედიტები, თუ დაინტერესებული ხართ.)

ადამიანები ტრიქრომატები არიან და შეუძლიათ აღვიქვათ სამი განსხვავებული ფერის იერსახე, რაც შესაძლებელს გახდის ტრიკოლური ფერის ლეგენდის წაკითხვას. როგორც წესი, ქოროპლეტების რუქები გამოიყენებენ მხოლოდ ერთ ცვლას, რომელზეც ხაზოვანი დიაპაზონი ორ ფერს შორისაა (მაგ. დანაშაულის მაჩვენებლები ცისფერიდან წითლამდე). სამი ფერის შერევით რუქა უფრო რთულია წაკითხვა… მაგრამ ეს იგივეა, რაც საშუალო სკოლაში დაწყებითი ფერების შერევა! (ან ბეჭდვით პროექტზე CMYK ფერების შერევა).

საბოლოოდ მე არჩია CMYK ფერის მოდელის გამოყენება, რადგან ეს ფერები კომპიუტერის ეკრანზე გაცილებით მარტივია. ეს ალბათ მიკერძოება მაქვს, ციფრული ბეჭდვისთვის მექანიკურ ფაილებთან მუშაობისას, მაგრამ პირველადი ფერების მგრძნობიარეობა შეცდომაში შეჰყავთ ეკრანზე (მაგ., ლურჯ ფერს აქვს შეხება წითელი, რაც შეიძლება წითელი ხმით იყოს დაბნეული). ინტერნეტში გამოყენებული ყველაზე ჭეშმარიტი (და ყველაზე მარტივი) ფერის მოდელი არის RGB, რადგან იგი ბრაუზერის და კომპიუტერის ეკრანის გამოყენებას ბუნებრივად იყენებს, მაგრამ ამ ფერების შერევა ჩემთვის არაბუნებრივია, რადგან მე ამ გზით არასდროს გამიკეთებია. დიდი მადლობა პავლეს იმისთვის, რომ პირველ რიგში ფერები შეურიოთ.

CMYK ციფრული ბეჭდვით ფართოდ გამოიყენება ფერადი მოდელი, სადაც ოთხი ფერი - Cyan, Magenta, Yellow და Key black - შერეულია ნებისმიერი სასურველი ფერის კომბინაციის მისაღებად. ეს საუკეთესო გამოვიდა ჩემი მიზნებისათვის, რადგანაც გამოქვეყნდა პლაკატის სამი ვერსია (1 – დან 3 – დან 3), ასევე „არც ერთი ზემოთ” (ხმის მიცემა 0).

ეს ნიშნავს, რომ მწვანე ფერის ექვსკუთხედს აქვს დაახლოებით 1 (ციანი) რაოდენობა, ხოლო ნახევარი 3 (ყვითელი) ხმა და ა.შ. ეს ასევე ნიშნავს, რომ რუხი-ყავისფერი ფერი გვიჩვენებს, რომ უპირატესობა აქვს მცირე, რადგან დომინანტი ხმა არ არსებობს. სულ ცოტა 0 ხმა იყო (მთავარი შავი), ამიტომ განსხვავება დახვეწილია, მაგრამ ისინი ზოგი ურნებს ოდნავ მუქს ხდიან. (დაბეჭდვის საკითხზე: მდიდარი შავკანიან და მთავარ შავებს შორის არ არის დაბნეულობა, რადგან ხმებს მხოლოდ 100% –ით მეტი მელნის დაფარვა უმატებს. იხ. ქვემოთ).

სცადეთ ცოცხალი რუკა და გაცნობეთ რას ფიქრობთ!

თუ თქვენ ჯერ არ გინახავთ ბედნიერი ფილმი, გირჩევთ გირჩევთ:

0110101001110011

D3.js

მე გამოვიყენე ასიმეტრიკის Leaflet D3 და რუქაზე მორგებული რუკა. ასიმეტრიკის დანამატები ემყარება სტივენ ჰოლს, რომელიც ასევე ნამდვილად გამოსადეგი მინიშნება იყო.

ფერების დასადგენად მე გამოვთვალე თითოეული ფერის პროცენტული რაოდენობა თითოეული ყუთის რაოდენობადან.

ფუნქცია votSums (d) {კატეგორიები = {} var sum = d3.sum (d, ფუნქცია (მონაცემები) {ხმის მიცემა = სიმებიანი (data.o.vote) თუ (ხმის მიცემა კატეგორიებში) {კატეგორიები [ხმის მიცემა] ++} სხვა კატეგორიები [ხმა] = 1} დაბრუნება +1}) დაბრუნება votes 'ხმები': კატეგორიები, 'ჯამი': თანხა}
// და თქვენს d3.csv– ში () შეავსეთ () ... დააბრუნეთ getColor (ხმის მიცემა (დ). ხმა, რაოდენობაSums (d) .sum)

CMYK კონვერტაცია მარტივია იმით, რომ იგი არ ითვალისწინებს რაიმე ფერის პროფილებს, მაგრამ ამით ხატავს.

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

შენიშვნა შავი ფერების შესახებ: CMYK არის subtractive ფერადი მოდელი, შავი მიღწევა შესაძლებელია CMY- ს მდიდარი ნაზავით, ან გასაღებით შავი (მაგ., მდიდარი შავი დრამა). ამასთან, იმის გამო, რომ ხმები 100% -მდე იმატებს, ”მაქსიმალური მელნის დაფარვა” ასევე იქნება 100%, რაც ბრაუზერში გამოიყურება რუხი ყავისფერით და, შესაბამისად, არ იქნება დაბნეული კლავიშთან.

იმისათვის, რომ რუქაზე დიდი ტერიტორიები არ ჰქონდეს გაბატონებული ფერით, ძალიან მცირე ხნით, მე ამოიღეს ყუთები ფერი რამდენიმე ხმით, დინამიურად შევასწორე იგი რუკის მასშტაბის საფუძველზე.

var getMinBin = () => {დაბრუნება 2 + 11 / (რუკა.getZoom () + 1)

მე შემეძლო ბინდის რადიუსის გამოყენება, რომელიც ხმების რაოდენობის პროპორციულია, მაგრამ დიდ ქალაქებს არაპროპორციულად მეტი ხმა ჰქონდათ და მე უფრო მაინტერესებდა გეოგრაფიული რეგიონის ზოგადი უპირატესობის ტენდენციები, ვიდრე სიმკვრივის განაწილება.

ზონის დაყენება პროპორციული იქნება ხმების რაოდენობაზე

მე ასევე მივიღე მოსაზრება, რომ რუქა უფრო ადვილი გასაგები იქნება, თუ ფერები იყო პირველადი (RYB) CMYK– ის ნაცვლად. გასაკვირი იყო, რომ რთული იყო მისი შესრულება, რადგან RYB– ში გადაყვანა მოითხოვდა ტრილერიული ინტერპოლის გადაწყვეტას ... მაგრამ, საბედნიეროდ, დეივ ედს უკვე ჰქონდა დაწერილი ლამაზი ფუნქცია. საბოლოო ჯამში, უპირატესობა მიანიჭა თავდაპირველ რუქას, რადგან აღმოვაჩინე, რომ პირველადი ცისფერი, როგორც კომპიუტერულ ეკრანებზეა ნათქვამი, შერეული ფერი ჰგავს და კარგად არ მუშაობს ფერადი ლეგენდისთვის.

იგივე რუკა, RYB ფერის მოდელი

Იხილეთ ასევე

როგორ შევცვალო ჩემი სახელი Instagram- ზე "ელიზაში"?სად შემიძლია ვირტუალური მობილური ნომრების მიღება WhatsApp- სთვის, რომელიც ასევე მიიღებს დამადასტურებელ SMS- ს უხვად გააქტიურების მიზნით?საკმარისი იქნება თუ არა 100MB ინტერნეტ პაკეტი ჩემი სმარტფონისთვის მხოლოდ WhatsApp ტექსტური ტექსტისთვის, იმის გათვალისწინებით, რომ ყოველდღიურად დაახლოებით 150 შეტყობინებას ვგზავნი და ვიღებ? რამდენ კბს იღებს შეტყობინება?ნიშნავს თუ არა შემოთავაზებული მომხმარებლის სია, რომელიც Instagram– ზე ძებნისას ჩნდება, რომ მათ წარსულში ეძებთ?შეიძლება ვინმემ გითხრათ \ u2019 ნახე თუ არა Instagram- ზე მათი ინსტაგრამის ამბავი, თუ მათ არ მიყვები?SnapChat- ზე, თუ ვინმე არის თქვენი საუკეთესო მეგობრების სიაში, ასევე არიან თქვენი საუკეთესო მეგობრების სიაში?შეგიძლიათ Snapchat- ზე დაამატოთ ვინმე მათ გარეშე იცოდეთ?რატომ არ იძლევა iOS Facebook Messenger- ის აპლიკაცია ტექსტის კოპირების საშუალებას?