تصور البيانات مع 1 مليار تقدير من Shazam الموسيقية

أثناء دراستي الجامعية ، انضممت إلى Shazam كمطور ويب بدوام جزئي. مكثت في Shazam لمدة 5 سنوات ممتعة. هذا المنشور يتعلق بمشروع اختراق واحد عملت عليه. يتضمن المشروع رسم مليار تقدير من Shazam على قماش فارغ ، ثم مراقبة النتيجة.

يتطرق هذا المنشور أيضًا إلى العملية التي استخدمتها لإنشاء الصور المرئية.

ما هو التعرف على Shazam

فكر في التعرف على Shazam مثل هذا. تفتح تطبيق الهاتف المحمول Shazam ، وتجعله "يستمع" لقطعة موسيقية يتم تشغيلها في الخلفية. الاعتراف هو التحديد الناجح للأغنية.

بيانات الموقع

يجوز للمستخدم الاشتراك في مشاركة بيانات الموقع الخاصة به مع Shazam. الصويغ ثم يجعل بعض من مجهول المصدر بيانات الموقع (خطوط الطول والعرض) المتاحة للموظفين، وهذا يتوقف على حالة استخدامها.

كان الحصول على بيانات الموقع مجهولة المصدر لتصور تجربة رائعة. لقد علمتني الكثير عن معالجة مجموعات البيانات الكبيرة ، والتصورات التي تحكي قصة ، والتصورات التي تبدو جميلة ولكنها لا تفعل أي شيء آخر.

التصور

شيء واحد تحتاج إلى معرفته ، كل التصورات تتبع هذه الفكرة: تمثل نقطة واحدة اعترافًا واحدًا ناجحًا. يتم رسم النقاط على نظام إحداثيات جغرافي. هذا لا يشبه أخذ خريطة جوجل ثم رسم علامات الموقع عليها.

لقد استخدمت الألوان للتمييز بين Android و iOS. هل يمكنك ان تخمن ماهذا؟ تلميح: انظر إلى المدن الكبرى. ما نوع الجهاز الذي تعتقد أنه منتشر هناك؟

  • Android : أحمر
  • iOS : أزرق

إذا نظرت عن كثب إلى الخرائط النقطية ، يمكنك ملاحظة تعريفات واضحة للطرق. يمكن تفسير ذلك من خلال الركاب الذين يشغلون موسيقى Shazam'ing من مكبرات الصوت في السيارة.

لقد صنعت أيضًا خرائط بأنظمة ألوان بديلة.

الخرائط التفاعلية

اعتقدت أنه سيكون من الممتع تصور الخريطة بشكل تفاعلي. بنفس الطريقة التي تسحب بها / تصغير خريطة Google ، ماذا لو كان بإمكانك أيضًا سحب / تكبير خريطة Shazam؟ عنصر التفاعل هذا هو ما يشجع الناس على استخدام الخرائط واستكشافها والتعلم منها. بدلاً من أن تكون شيئًا ثابتًا لا ترجع إليه أبدًا.

للقيام بذلك ، كنت بحاجة إلى إنشاء الملايين من "مربعات" الخرائط. على سبيل المثال ، إليك بعض مربعات لندن مأخوذة من خرائط Google.

كل بلاطة عبارة عن صورة منفصلة. لاحظ مستويات التكبير المختلفة. كما قد تتخيل ، عندما تقوم بسحب إحدى خرائط Google وتكبيرها / تصغيرها ، فإنها تقدم لك العديد من الصور المختلفة ، ويشار إلى الصور باسم مربعات الخرائط.

إليك بلاطات خريطة Shazam.

في المجموع ، قمت بإنشاء أكثر من 40 جيجابايت من بيانات البلاط. هذا بسبب مستوى التكبير الذي حددته. يعني مستوى التكبير المرتفع أن أولئك الذين يشاهدون الخريطة قادرون على التكبير إلى مستوى أعلى.

عند مراجعة التصورات مع الزملاء ، ظللنا نتساءل: ما هو "المكان" في موقع التجمعات الكبيرة. على سبيل المثال ، هل كان مكانًا للموسيقى يستخدم فيه الأشخاص تطبيق Shazam بشكل متكرر؟

للمساعدة في الإجابة على هذا السؤال ، كانت لدي فكرة: ماذا لو استخدمت خدمة الموقع لتحديد الأماكن الموجودة حاليًا. للقيام بذلك ، استخدمت واجهة برمجة تطبيقات أماكن خرائط Google. في كل مرة تقوم فيها بالتمرير إلى موقع جديد ، أستفسر عن Google Maps API لطرح السؤال: ما الأماكن الموجودة في هذا الموقع؟

عند استخدام هذه الميزة ، بدأنا ندرك أن مجموعات النقاط ستكون عادةً نتيجة: المقاهي والنوادي الليلية ومراكز التسوق والمتاجر وغيرها.

لقد قمت أيضًا بمزامنة خريطة Mapbox (على غرار خرائط Google) بحيث تقوم بالسحب والتكبير في خريطة Shazam ، ستتحرك الخريطة الأخرى "العادية" أيضًا. يتيح لك ذلك تحديد الموقع الجغرافي الذي تبحث عنه حاليًا بسرعة

الرمز

كما هو الحال مع كل ما أفعله ، أستفيد فقط من العمل الجاد الذي يقوم به الآخرون في مجتمعنا. كل الفضل يعود إلى إريك فيشر لعملهم الممتاز على خرائط البيانات. إذا اتبعت الإرشادات الموجودة في مستودع Github هذا ، فستتمكن من إنشاء تصوراتك الخاصة. ستحتاج إلى مجموعة بيانات تتكون من نقاط خطوط الطول والعرض ، وقد تجد شيئًا ما على Github ، على سبيل المثال ، مجموعات البيانات العامة الرائعة.

إذا انتهيت من تجربة ذلك: فإليك بعض الملاحظات التي كتبتها لنفسي والتي قد تجدها مفيدة.

أولاً ، أنت بحاجة إلى قائمة طويلة كبيرة من خطوط العرض وخطوط الطول. ولكن حتى تحصل على هذه البيانات ، قد تضطر إلى القيام بعمل إضافي. في حالتي ، حصلت عليه من واجهة برمجة تطبيقات Shazam الداخلية. لقد استخدمت وحدة عقدة تسمى fast-csv لتحليل البيانات. إن استخدام التدفقات بهذه الطريقة يجعل من السهل تحليل البيانات الكبيرة (التي تستحق الجيجابايت).

csv.fromStream(stream,{headers : true}).on(‘data’, handleRecord);

تقوم وظيفة handleRecord بما يلي:

function handleRecord(record) { const location = tag.location.latitude + ‘,’ + tag.location.longitude; console.log(location);}

يبدو الإخراج مثل:

lat,lon
-22.1028,166.1833
29.8075,-95.4113
51.2168,-0.8045
27.3007,-82.5221
20.5743,-100.3793
-36.0451,146.9267
26.7554,-81.4237

في هذه المرحلة ، يمكنك البدء في توصيله بخرائط البيانات (توجد إرشادات مفصلة في وثائق المشروع).

بعد التوثيق لفترة كافية ، وصلت إلى نقطة يمكنني فيها إنشاء الصورة النهائية. لإنشاء خريطة بيانات للندن ، حدد المربع المحيط باعتباره إحداثيات الموقع التي ترغب في التقاطها:

./render -A -- output 14 51.641353 -0.447693 51.333508 0.260925 > london.png

نظرًا لأنني قمت بإنشاء نفس الخرائط الثابتة كثيرًا (عند تجربة الألوان على سبيل المثال) ، فقد قررت كتابة العملية برمتها. لكوني مطور ويب ، قمت بهذا كله في Node.js ، ولكن كان من الممكن أن يكون نص Bash بسيطًا. أولاً ، صنعت كائنًا يحتوي على جميع الخرائط التي أردت عرضها.

ثم كان الأمر يتعلق بإنشاء الأمر الذي رأيته سابقًا ، ولكن لكل إدخال موقع في كتلة JSON التي تراها في الصورة أعلاه.

تقديم

في Shazam ، كانت هناك عدة أيام اختراق. ثم بعد بضعة أشهر ، كان يومًا تجريبيًا. لقد قدمت عملك في يوم الاختراق في يوم العرض. أظهر للناس أن هذا المشروع بالذات قد تم استقباله جيدًا.

بالنسبة لهؤلاء المطورين الذين ينشئون تطبيقات سطر أوامر أو يخوضون مغامرات إعادة بناء التعليمات البرمجية خلال أيام الاختراق ، ضع في اعتبارك أن جمهور اليوم التجريبي قد يفضل المزيد من العروض المرئية بدلاً من التقنية (كانت هذه تجربتي). إحدى الطرق للتغلب على ذلك هي: مدونة حول ما قمت به ومشاركة الموارد بعد ذلك ، تخطي العرض التوضيحي المباشر تمامًا. أو حتى الأفضل ، اكتشف كيفية استخلاص المفاهيم التقنية لجمهور غير تقني ، وتقديم المزيد من العناصر المرئية ، والاستمرار في تقديم العرض التوضيحي إلى الجمهور المباشر. إنه أصعب ، لكنه أكثر إفادة.

صور عالية الدقة لخرائط البيانات

ملاحظة: يمكنك تكبير هذه الصور من خلال واجهة صور Google

  • العالم - لاحظ البلدان / المدن التي تستخدم نظام iOS عاليًا
  • المملكة المتحدة - لاحظ المدن
  • تورنتو
  • سان فرانسيسكو
  • باريس

استنتاج

أنا ممتن لـ Shazam لتشجيعنا على تعلم مهارات وتقنيات جديدة. وأيضًا بفضل إريك فيشر لتطوير مشروع خرائط البيانات في المقام الأول! إذا كان لديك حق الوصول إلى بيانات الموقع ، ففكر في العديد من الطرق المثيرة للاهتمام لتصورها. يمكنك أيضًا محاولة استخدام التغريدات من Twitter API ، فقط تأكد من أن لديهم بيانات الموقع المرفقة بها.

تريد أن ترى المزيد مثل هذا؟

تابعوني على Twitter:umaar وأخبرني! أحاول وأغرّد الكثير من موارد تطوير الويب.

يرجى الإعجاب والمشاركة إذا كنت قد استمتعت بقراءة مقالتي وترك تعليقًا بتجاربك في تصور البيانات.