ວິທີການຂອງຜູ້ອອກແບບກາຟິກໃນການແຕ້ມແຜນທີ່ຂອງ Instagram

ການເບິ່ງເຫັນຂໍ້ມູນຂອງການ ສຳ ຫຼວດຂອງ Stefan Sagmeister ກ່ຽວກັບໂປສເຕີຮູບເງົາທີ່ມີຄວາມສຸກ

ກັບມາໃນລະດູໃບໄມ້ປົ່ງທີ່ຄວາມສົນໃຈຂອງຂ້ອຍຖືກ ນຳ ສະ ເໜີ ໂດຍການ ສຳ ຫຼວດ Instagram ຫຼາຍໆຊຸດໂດຍ Stefan Sagmeister, ເຊິ່ງ ກຳ ລັງແຕ້ມຫລາຍພັນຄົນ, ແລະຕັ້ງແຕ່ນັ້ນມາຂ້ອຍໄດ້ໃຊ້ລະຫັດ JavaScript ເພື່ອນັບແລະເບິ່ງເຫັນຜົນໄດ້ຮັບ.

ສຳ ລັບການ ສຳ ຫຼວດບາງຢ່າງ, ມັນ ໜ້າ ສົນໃຈທີ່ຈະເຫັນພາບທີ່ຕັ້ງພູມສາດຂອງການລົງຄະແນນສຽງແຕ່ລະຄັ້ງ, ແລະຊອກຫາຮູບແບບຕ່າງໆໃນຂົງເຂດຕ່າງໆຂອງໂລກ. ໜຶ່ງ ໃນນັ້ນແມ່ນຢູ່ໃນຕົວເລືອກໂປສເຕີທີ່ແຕກຕ່າງກັນ ສຳ ລັບຮູບເງົາ Happy.

ຮູບແບບໃບໂປດສະເຕີໄດ້ຖືກອອກແບບມາ ສຳ ລັບພື້ນທີ່ແຈກຢາຍຮູບເງົາທີ່ແຕກຕ່າງກັນ, ແລະຂ້ອຍຢາກຮູ້ຢາກເຫັນການແຈກຢາຍທາງພູມສັນຖານຂອງຮູບແບບທີ່ຄົນມັກ.

ສະຖານທີ່ຂອງຜູ້ລົງຄະແນນສຽງຖືກຄາດຄະເນຈາກສະຖານທີ່ທີ່ຖືກຕິດປ້າຍໂຄສະນາຫຼ້າສຸດຂອງພວກເຂົາ (ພາຍໃນອາທິດທີ່ຜ່ານມາ) ແລະເປັນຕົວແທນສະຖານທີ່ທີ່ເຂົາເຈົ້າມັກທີ່ສຸດໃນເວລາລົງຄະແນນສຽງ. ນີ້ ໝາຍ ຄວາມວ່າຄວາມມັກຂອງໂປສເຕີຮູບເງົາ ໜຶ່ງ ເລື່ອງອື່ນແມ່ນສະທ້ອນໃຫ້ເຫັນເຖິງສະພາບແວດລ້ອມທີ່ມັນມີປະສົບການ, ເຊິ່ງກົງກັນຂ້າມກັບບ່ອນທີ່ຜູ້ລົງຄະແນນສຽງມາຈາກຫຼືບ່ອນທີ່ພວກເຂົາຕັ້ງຢູ່.

ແຜນທີ່ນີ້ເອີ້ນວ່າແຜນທີ່ hexbin choropleth multivariate (ຂ້ອຍຄິດວ່າ). ມັນໄດ້ມີຜູ້ລົງຄະແນນເປັນກຸ່ມເຂົ້າຖັງທີ່ຕັ້ງພູມສາດແລະສີລະຫັດໂດຍອີງໃສ່ ຈຳ ນວນສຽງ ສຳ ລັບແຕ່ລະໂປດສະເຕີ (4 ຕົວແປ). (ມັນຖືກສ້າງຂຶ້ນດ້ວຍ D3.js ແລະ Mapbox, ຂ້ອຍໄດ້ເພີ່ມບາງຫຍໍ້ລະຫັດ, ຊັບພະຍາກອນແລະເຄດິດດ້ານລຸ່ມຖ້າທ່ານສົນໃຈ.)

ມະນຸດແມ່ນ trichromats ແລະສາມາດຮັບຮູ້ສາມສີທີ່ແຕກຕ່າງກັນ, ເຊິ່ງເຮັດໃຫ້ມັນສາມາດອ່ານນິທານສີສາມສີໄດ້. ໂດຍປົກກະຕິ, ແຜນທີ່ choropleth ຈະໃຊ້ພຽງແຕ່ຕົວແປ ໜຶ່ງ ເສັ້ນທີ່ມີເສັ້ນລະຫວ່າງສອງສີ (ຕົວຢ່າງອັດຕາອາຊະຍາ ກຳ ຈາກສີຟ້າຫາສີແດງ). ການປະສົມສາມສີສາມາດເຮັດໃຫ້ແຜນທີ່ຍາກທີ່ຈະອ່ານ…ແຕ່ມັນກໍ່ຄ້າຍຄືກັບການປະສົມສີປະຖົມໃນໂຮງຮຽນຊັ້ນ! (ຫຼືປະສົມສີ CMYK ໃນໂຄງການພິມ).

ໃນທີ່ສຸດຂ້ອຍເລືອກທີ່ຈະໃຊ້ຮູບແບບສີ CMYK ເພາະວ່າສີເຫຼົ່ານີ້ງ່າຍກວ່າທີ່ຈະ ຈຳ ແນກໄດ້ໃນ ໜ້າ ຈໍຄອມພິວເຕີ. ນີ້ອາດຈະເປັນຄວາມ ລຳ ອຽງທີ່ຂ້ອຍມີຈາກການເຮັດວຽກກັບເອກະສານກົນຈັກ ສຳ ລັບການພິມດິຈິຕອລ, ແຕ່ວ່າສີຂີ້ເຖົ່າຂອງສີປະຖົມແມ່ນເຮັດໃຫ້ເຂົ້າໃຈຜິດໃນ ໜ້າ ຈໍ (ຕົວຢ່າງ: ສີຟ້າມີການ ສຳ ພັດຂອງສີແດງ, ເຊິ່ງອາດຈະສັບສົນກັບສຽງສີແດງ). ຮູບແບບສີທີ່ງາມທີ່ສຸດ (ແລະງ່າຍທີ່ສຸດ) ທີ່ຈະໃຊ້ໃນເວບໄຊທ໌ແມ່ນ RGB ເພາະວ່າມັນຖືກ ນຳ ໃຊ້ໂດຍອິນເຕີເນັດ browser ແລະ ໜ້າ ຈໍຄອມພິວເຕີ້, ແຕ່ການປະສົມສີເຫຼົ່ານີ້ແມ່ນບໍ່ ທຳ ມະດາ ສຳ ລັບຂ້ອຍທີ່ຂ້ອຍບໍ່ເຄີຍເຮັດແບບນີ້. ຂໍຂອບໃຈອັນໃຫຍ່ຫຼວງຕໍ່ໂປໂລ ສຳ ລັບການແນະ ນຳ ໃຫ້ປະສົມສີສັນໃນຄັ້ງ ທຳ ອິດ.

CMYK ແມ່ນຮູບແບບສີທີ່ຖືກ ນຳ ໃຊ້ຢ່າງກວ້າງຂວາງໃນການພິມດິຈິຕອນ, ເຊິ່ງມີ 4 ສີຄື: Cyan, Magenta, Yellow ແລະ Key ສີ ດຳ - ຖືກປະສົມເພື່ອໃຫ້ມີການປະສົມສີທີ່ຕ້ອງການ. ສິ່ງນີ້ເຮັດວຽກໄດ້ດີ ສຳ ລັບຈຸດປະສົງຂອງຂ້ອຍ, ຄືວ່າມີໂປດສະເຕີ 3 ສະບັບ (ຄະແນນສຽງ 1 ເຖິງ 3), ເຊັ່ນດຽວກັນກັບ "ບໍ່ມີຂໍ້ມູນຂ້າງເທິງ" (ລົງຄະແນນສຽງ 0).

ນີ້ຫມາຍຄວາມວ່າ hexagon ສີຂຽວມີຄະແນນສຽງປະມານເຄິ່ງ 1 (cyan) ແລະເຄິ່ງສຽງ (ສີເຫຼືອງ) ເຄິ່ງ ໜຶ່ງ ແລະອື່ນໆ. ນີ້ຍັງ ໝາຍ ຄວາມວ່າສີຂີ້ເຖົ່າສີນ້ ຳ ຕານສະແດງໃຫ້ເຫັນວ່າບໍ່ມີຄວາມມັກຫລາຍ, ເພາະວ່າບໍ່ມີການລົງຄະແນນສຽງເດັ່ນ. ມີສອງຄະແນນສຽງ ໜ້ອຍ (ສີ ດຳ ສຳ ຄັນ), ດັ່ງນັ້ນຄວາມແຕກຕ່າງແມ່ນມີ ໜ້ອຍ, ແຕ່ພວກມັນກໍ່ເຮັດໃຫ້ຖັງນ້ອຍໆເລັກນ້ອຍ. (ສຳ ລັບການພິມ nerds: ບໍ່ມີຄວາມສັບສົນໃດໆລະຫວ່າງສີ ດຳ ແລະສີ ດຳ ທີ່ລ້ ຳ ລວຍເພາະວ່າຄະແນນສຽງຈະເພີ່ມເປັນ“ ການປົກຫຸ້ມຂອງຫມຶກສູງສຸດ” ພຽງແຕ່ 100%, ເບິ່ງບັນທຶກຂ້າງລຸ່ມນີ້.)

ລອງໃຊ້ແຜນທີ່ສົດແລະບອກຂ້ອຍວ່າເຈົ້າຄິດແນວໃດ!

ຖ້າທ່ານຍັງບໍ່ທັນໄດ້ເບິ່ງຮູບເງົາ Happy, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ມັນ:

0110101001110011

D3.js

ຂ້ອຍໄດ້ໃຊ້ Leaflet D3 ຂອງ Asymmetrik ພ້ອມກັບແຜນທີ່ຂອງ Mapbox ທີ່ ກຳ ຫນົດເອງ. ປັ'sກອິນຂອງ Asymmetrik ແມ່ນອີງໃສ່ວຽກງານຂອງ Steven Hall, ເຊິ່ງມັນກໍ່ເປັນການອ້າງອິງທີ່ເປັນປະໂຫຍດແທ້ໆ.

ເພື່ອ ກຳ ນົດສີທີ່ຂ້າພະເຈົ້າໄດ້ຄິດໄລ່ເປີເຊັນຂອງແຕ່ລະສີທີ່ອອກຈາກການນັບຄະແນນສຽງທັງ ໝົດ ສຳ ລັບແຕ່ລະຖັງ.

function voteSums (d) {categories = {} var sum = d3.sum (d, function (data) {vote = ສະຕິງ (data.o.vote) ຖ້າ (ລົງຄະແນນສຽງໃນ ໝວດ ຕ່າງໆ) {ໝວດ [ລົງຄະແນນ] ++} ອີກ { ໝວດ [ລົງຄະແນນສຽງ] = 1} ກັບຄືນ +1}) ກັບຄືນ {'ສຽງ': ປະເພດ, 'ຜົນບວກ': ຜົນລວມ}}
// ແລະໃນ d3.csv ຂອງທ່ານ (). ຕື່ມຂໍ້ມູນໃສ່ () ... ກັບມາ getColor (voteSums (d) .votes, voteSums (d) .sum)

ການປ່ຽນໃຈເຫລື້ອມໃສ CMYK ແມ່ນງ່າຍດາຍໃນການທີ່ມັນບໍ່ໄດ້ ຄຳ ນຶງເຖິງໂປຼໄຟລ໌ສີໃດໆ, ແຕ່ມັນກໍ່ເຮັດໄດ້ຍາກ.

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

ບັນທຶກກ່ຽວກັບສີ ດຳ: CMYK ເປັນຕົວແບບສີທີ່ ໜ້າ ຕື່ນຕາຕື່ນໃຈ, ສີ ດຳ ສາມາດບັນລຸໄດ້ທັງມີສ່ວນປະສົມຂອງ CMY ຫຼືສີ ດຳ ສຳ ຄັນ (ເຊັ່ນ: ລະຄອນສີ ດຳ ທີ່ອຸດົມສົມບູນ). ເຖິງຢ່າງໃດກໍ່ຕາມ, ຍ້ອນວ່າຄະແນນສຽງເພີ່ມເຖິງ 100%, 'ການປົກຫຸ້ມຂອງຫມຶກສູງສຸດ' ກໍ່ຈະເປັນໄປໄດ້ 100% ເຊັ່ນກັນ, ເຊິ່ງເບິ່ງຄືວ່າເປັນສີຂີ້ເຖົ່າສີນ້ ຳ ຕານໃນເບົາເຊີແລະດັ່ງນັ້ນຈະບໍ່ສັບສົນກັບສີ ດຳ ຫຼັກ.

ເພື່ອຫຼີກລ້ຽງການມີເນື້ອທີ່ກ້ວາງຂອງແຜນທີ່ທີ່ຄອບ ງຳ ໂດຍສີທີ່ມີຄະແນນສຽງ ໜ້ອຍ ເກີນໄປ, ຂ້າພະເຈົ້າໄດ້ຍ້າຍສີ ສຳ ລັບຖັງລົງເປັນສອງສາມສຽງ, ປັບປ່ຽນແບບເຄື່ອນໄຫວໂດຍອີງໃສ່ການຂະຫຍາຍແຜນທີ່.

var getMinBin = () => {ກັບຄືນ 2 + 11 / (map.getZoom () + 1)}

ຂ້າພະເຈົ້າສາມາດໃຊ້ຖັງລັດສະ ໝີ ທີ່ມີອັດຕາສ່ວນກັບ ຈຳ ນວນສຽງ, ແຕ່ວ່າບັນດາຕົວເມືອງໃຫຍ່ມີຄະແນນສຽງຫລາຍຂື້ນແລະຂ້າພະເຈົ້າສົນໃຈແນວໂນ້ມຄວາມມັກທົ່ວໄປໂດຍເຂດພາກພື້ນທີ່ກ່ວາການແຈກຢາຍຄວາມ ໜາ ແໜ້ນ.

ການ ກຳ ນົດພື້ນທີ່ໃຫ້ເປັນສັດສ່ວນກັບ ຈຳ ນວນສຽງ

ຂ້າພະເຈົ້າຍັງໄດ້ຮັບ ຄຳ ຕິຊົມທີ່ວ່າແຜນທີ່ຈະເຂົ້າໃຈງ່າຍຂື້ນຖ້າວ່າສີພື້ນຖານ (RYB) ແທນ CMYK. ມັນເປັນເລື່ອງແປກທີ່ຍາກທີ່ຈະເຮັດໃຫ້ມັນເຮັດວຽກໄດ້, ເພາະວ່າການປ່ຽນເປັນ RYB ຕ້ອງການແກ້ໄຂການຕີຄວາມສາມຫລ່ຽມ…ແຕ່ໂຊກດີທີ່ Dave Eddy ໄດ້ຂຽນ ໜ້າ ທີ່ທີ່ດີ ສຳ ລັບມັນແລ້ວ. ໃນທີ່ສຸດຂ້ອຍມັກແຜນທີ່ເດີມ, ເພາະວ່າຂ້ອຍພົບວ່າສີຟ້າຫຼັກໃນຂະນະທີ່ມັນອ່ານຢູ່ ໜ້າ ຈໍຄອມພິວເຕີ້ເບິ່ງຄືວ່າມີສີປະສົມແລະບໍ່ມີຜົນດີຕໍ່ນິທານສີ.

ແຜນທີ່ດຽວກັນ, ແບບສີ RYB

ເບິ່ງຕື່ມອີກ

ຂ້ອຍຈະປ່ຽນຊື່ຜູ້ໃຊ້ໃນ Instagram ເປັນ "Eliza" ໄດ້ແນວໃດ?ຂ້ອຍສາມາດເອົາເບີໂທລະສັບມືຖື virtual ສຳ ລັບ WhatsApp ເຊິ່ງຍັງໄດ້ຮັບ SMS ຢັ້ງຢືນ ສຳ ລັບການເປີດໃຊ້ງານເປັນ ຈຳ ນວນຫລາຍ?ແພັກເກດອິນເຕີເນັດຂະ ໜາດ 100 MB ຈະພຽງພໍ ສຳ ລັບໂທລະສັບສະຫຼາດຂອງຂ້ອຍ ສຳ ລັບການສົ່ງຂໍ້ຄວາມ WhatsApp ເທົ່ານັ້ນ, ພິຈາລະນາວ່າຂ້ອຍສົ່ງແລະຮັບປະມານ 150 ຂໍ້ຄວາມຕໍ່ມື້ບໍ? ມີຂໍ້ຄວາມ ຈຳ ນວນເທົ່າໃດຂອງ KB?ບັນຊີລາຍຊື່ຜູ້ໃຊ້ທີ່ຖືກແນະ ນຳ ທີ່ປາກົດໃນເວລາຄົ້ນຫາໃນ Instagram ໝາຍ ຄວາມວ່າທ່ານເຄີຍຄົ້ນຫາໃນອະດີດບໍ?ມີຜູ້ໃດຜູ້ ໜຶ່ງ ບອກທ່ານໄດ້ບໍວ່າທ່ານບໍ່ຕິດຕາມເລື່ອງ Instagram ຂອງພວກເຂົາ?ໃນ SnapChat, ຖ້າມີຄົນຢູ່ໃນລາຍຊື່ເພື່ອນທີ່ດີທີ່ສຸດຂອງທ່ານ, ພວກເຂົາກໍ່ຢູ່ໃນລາຍຊື່ເພື່ອນທີ່ດີທີ່ສຸດຂອງທ່ານເຊັ່ນກັນບໍ?ທ່ານສາມາດເພີ່ມຜູ້ໃດຜູ້ຫນຶ່ງໃນ Snapchat ໂດຍບໍ່ມີພວກເຂົາຮູ້ບໍ?ເປັນຫຍັງແອັບ the Facebook Messenger iOS ບໍ່ອະນຸຍາດໃຫ້ ສຳ ເນົາຂໍ້ຄວາມ?