Visualización de datos con mil millones de reconocimientos de música Shazam

Mientras estaba en la universidad, me uní a Shazam como desarrollador web a tiempo parcial. Me alojé en Shazam durante 5 años agradables. Esta publicación trata sobre un proyecto de hackday en el que trabajé. El proyecto implica trazar mil millones de reconocimientos de Shazam en un lienzo en blanco y luego observar el resultado.

Esta publicación también aborda el proceso que utilicé para crear las imágenes.

¿Qué es un 'reconocimiento Shazam'

Piense en un reconocimiento de Shazam como este. Abres Shazam, la aplicación móvil, y haces que 'escuche' una pieza musical que se está reproduciendo de fondo. Un reconocimiento es la identificación exitosa de la canción.

Datos de localización

Un usuario puede optar por compartir sus datos de ubicación con Shazam. Luego, Shazam pone a disposición de los empleados algunos de los datos de ubicación anonimizados (latitud y longitud), según su caso de uso.

Tener datos de ubicación anonimizados para visualizar fue una experiencia genial. Me enseñó mucho sobre el procesamiento de grandes conjuntos de datos, visualizaciones que cuentan una historia y visualizaciones que se ven bonitas pero que no hacen nada más.

La visualizacion

Una cosa que debe saber, todas las visualizaciones siguen esta idea: un punto representa un reconocimiento exitoso. Los puntos se trazan en un sistema de coordenadas geográficas. Esto no es lo mismo que tomar un mapa de Google y luego trazar marcadores de ubicación sobre él.

He usado el color para diferenciar entre Android e iOS. Puedes adivinar cual es cual? Sugerencia: mire las principales ciudades. ¿Qué tipo de dispositivo cree que prevalece allí?

  • Android : rojo
  • iOS : azul

Si observa de cerca los mapas de puntos, puede notar definiciones claras para las carreteras. Esto se puede explicar por los pasajeros que están escuchando música Shazam en los altavoces del automóvil.

También hice mapas con esquemas de colores alternativos.

Mapas interactivos

Pensé que sería divertido visualizar el mapa de forma interactiva. De la misma manera que arrastraría / acercaría un mapa de Google, ¿qué pasaría si también pudiera arrastrar / acercar un mapa de Shazam? Este elemento de interactividad es lo que anima a las personas a utilizar, explorar y aprender de los mapas. En lugar de ser algo estático que nunca vuelves a visitar.

Para hacer esto, necesitaba generar millones de 'mosaicos' de mapas. Por ejemplo, aquí hay algunos mosaicos de Londres, tomados de Google Maps.

Cada mosaico es una imagen separada. Toma nota de los diferentes niveles de zoom. Como puede adivinar, cuando arrastra y hace zoom en un mapa de Google, le presenta muchas imágenes diferentes, las imágenes se conocen como mosaicos de mapa.

Aquí están los mosaicos del mapa de Shazam.

En total, creé más de 40 GB de datos de mosaico. Esto se debe al nivel de zoom que había especificado. Un nivel de zoom alto significa que aquellos que ven el mapa pueden hacer zoom a un nivel mayor.

Al revisar las visualizaciones con los colegas, seguimos preguntándonos: ¿Qué "lugar" estaba en la ubicación de grandes grupos. Por ejemplo, ¿era un lugar de música donde la gente usaba Shazam con frecuencia?

Para ayudar a responder esta pregunta, tuve una idea: ¿Qué pasa si utilizo un servicio de ubicación para determinar qué lugares están presentes actualmente? Para hacer esto, utilicé la API de Google Maps Places. Cada vez que te desplazas a una nueva ubicación, consulto la API de Google Maps para hacer la pregunta: ¿Qué lugares hay dentro de esta ubicación?

Al utilizar esta función, comenzamos a darnos cuenta de que los grupos de puntos suelen ser el resultado de: cafés, clubes nocturnos, centros comerciales, tiendas de conveniencia y otros.

También sincronicé un mapa de Mapbox (similar a Google Maps) para que, al arrastrar y acercar el mapa de Shazam, el otro mapa "normal" se moviera también. Esto le permite identificar rápidamente qué ubicación geográfica está mirando actualmente

El código

Como con todo lo que hago, solo me estoy beneficiando del trabajo arduo realizado por otros en nuestra comunidad. Todo el crédito es para Eric Fischer por su excelente trabajo en mapas de datos. Si sigue las instrucciones en ese repositorio de Github, podrá hacer sus propias visualizaciones. Necesitará un conjunto de datos que consta de puntos de longitud y latitud, puede encontrar algo en Github, por ejemplo, conjuntos de datos públicos impresionantes.

Si termina probándolo: aquí hay algunas notas que hice para mí y que pueden resultarle útiles.

Primero, necesita una gran lista de latitudes y longitudes. Sin embargo, incluso para obtener esos datos, es posible que tenga que hacer un trabajo adicional. En mi caso, lo obtuve de una API interna de Shazam. Usé un módulo de nodo llamado fast-csv para analizar datos. El uso de transmisiones de esta manera hace que el análisis de datos grandes (por valor de gigabytes) sea sencillo.

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

La función handleRecord hace esto:

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

La salida se parece a:

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

En este punto, puede comenzar a conectarlo a mapas de datos (hay instrucciones detalladas dentro de la documentación del proyecto).

Siguiendo la documentación el tiempo suficiente, llegué a un punto en el que podía crear la imagen final. Para crear un mapa de datos de Londres, especifique el cuadro delimitador como coordenadas de ubicación que desea capturar:

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

Debido a que creé los mismos mapas estáticos con tanta frecuencia (al experimentar con el color, por ejemplo), decidí escribir el proceso completo. Como desarrollador web, hice todo esto en Node.js, sin embargo, un simple script de Bash habría estado bien. Primero, creé un objeto que contenía todos los mapas que quería renderizar.

Luego se trató de construir el comando que vio anteriormente, pero para cada entrada de ubicación en ese bloque JSON que ve en la imagen de arriba.

Presentación

En Shazam, hubo varios días de piratería. Luego, después de unos meses, fue un día de demostración. Presentó su trabajo del día de pirateo en el día de la demostración. Mostrarle a la gente este proyecto en particular fue bien recibido.

Para aquellos desarrolladores que crean aplicaciones de línea de comandos o se embarcan en aventuras de refactorización de código durante los días de pirateo, consideren que la audiencia del día de demostración puede preferir demostraciones más visuales que técnicas (esta ha sido mi experiencia). Una forma de evitar esto es: bloguear sobre lo que ha hecho y compartir los recursos después, omitiendo una demostración en vivo por completo. O incluso mejor, descubra cómo destilar conceptos técnicos a una audiencia no técnica, introducir más imágenes y continuar ofreciendo su demostración a una audiencia en vivo. Es más difícil, pero más gratificante.

Imágenes de alta resolución de los mapas de datos

Nota: puede ampliar estas imágenes con la interfaz de Google Fotos

  • Mundo: observe qué países / ciudades tienen un alto uso de iOS
  • Reino Unido - Fíjate en las ciudades
  • Toronto
  • San Francisco
  • París

Conclusión

Estoy agradecido con Shazam por animarnos a aprender nuevas habilidades y tecnologías. ¡También gracias a Eric Fischer por desarrollar el proyecto de mapas de datos en primer lugar! Si tiene acceso a los datos de ubicación, considere las muchas formas interesantes de visualizarlos. También puede intentar usar Tweets de la API de Twitter, solo asegúrese de que tengan datos de ubicación adjuntos.

¿Quieres ver más como este?

Sígueme en Twitter: @umaar y avísame! Intento y twitteo muchos recursos de desarrollo web.

Por favor, haga clic en Me gusta y comparta si disfrutó leyendo mi artículo y deje un comentario con sus experiencias en visualización de datos.