Next.js / D3js / Neo4j / OpenAI: Search Engine & Network Viz

Diana O

Data Visualizer
Web Developer
Database Specialist
D3.js
Neo4j
Next.js

Spotify Popular Korean and Japanese Artists and Tracks

Leveraging the power of LLMs and graphs to create an AI-driven Neo4j-backed search engine and interactive network visualization. The Neo4j database only includes the top 1,000 tracks and top 100 artists on Spotify, all labeled with at least one of the genres 'k-pop' or 'j-pop', as of June 2023. The purpose of this project is to enable users to easily find contextual information about and compare the Korean and Japanese music markets. Key features in top tracks: - song_name: name of the song - album_name: the album that the song is in - artist_name: name of the artist that produced the song - popularity: a popularity metric calculated by Spotify, ranging from 0-100 with 100 being the most popular, a song that is popular recently is more likely to have a higher score than a popular song in the past - release_date: release date of the song Key features in top artist datasets - artist_name: name of the artist - popularity: a popularity metric calculated by Spotify, ranging from 0-100 with 100 being the most popular followers: number of followers of the artist on Spotify - genres: list of genres that the artist is involved in For example, users may be curious about these issues: - Which k-pop girl group released albums 4 years ago? - Which hip hop songs from 2000 to 2010 remain popular today? - Songs with titles containing the words 'free' or 'money' - Top 5 most popular genres

LLM Strategy

I used OpenAI's GPT-4 to interpret queries & produce relevant search results. Based on how a user describes the search scenario, the LLM either generates a Cypher query directly or constructs an object from the user's input that is used to populate a predefined Cypher query template. This ensures accurate results can be extracted from Neo4j as often as possible.

Search form

Users can also choose to manually fill in form fields to conduct a search. Combination search of artist, track and album helps to narrows down the results. The search values formulate a data object, which is used to populate a Cypher query template. Next.js API route is created to connect to the Neo4j database, pass in parameters and then return extracted graph results to the dashboard component.

Network Visualization Features

1. Timeline - Unlike a typical timeline of regular date intervals, only ticks representing a track release date is shown. - When a new timestamp is selected, the entire network smoothly transitions into their new coordinates. The graph represents all filtered tracks with a release date at or before that selected timestamp. 2. Node Click -When a node is clicked, the Spotify embed allows users to have a listen to a track or album! 3. Drag/Reset - All nodes can be dragged around, but on release they are fixed at that position. - Clicking the ‘Reset’ button will re-arrange all nodes and links into their original positions.
Partner With Diana
View Services

More Projects by Diana