- {/*
*/}
+
+
+
+
Tune
Graph
+
+
+
Interpreting Data from 250+ Songs for Common Themes
+
+
+
+
+
);
}
\ No newline at end of file
diff --git a/frontend/src/app/components/Graph.tsx b/frontend/src/app/components/Graph.tsx
index 69c7227..e4c6d06 100644
--- a/frontend/src/app/components/Graph.tsx
+++ b/frontend/src/app/components/Graph.tsx
@@ -1,38 +1,26 @@
import { Chart } from "react-google-charts";
+import GraphInfo from "./GraphInfo";
interface props {
- title?: string;
- color?: string;
- legend?: string;
-
+ chartName?: string;
+ chartType?: string;
+ data?: object;
+ options?: object;
+ info?: string;
}
-export default function Graph() {
-
- const data = [
- ["Liveliness", "Loudness"], // Column headers (X, Y)
- [8, 9],
- [4, 5.5],
- [2, 8],
- [4, 5],
- [3, 3.5],
- [6.5, 7],
- ];
-
- const options = {
- title: "Liveliness vs Loudness for 3 groupings of Tempo",
- hAxis: { title: "Liveliness", minValue: 0, maxValue: 10 },
- vAxis: { title: "Loudness", minValue: 0, maxValue: 10 },
- legend: "none",
- colors: ["#593c3c"], // Optional: Custom color
- };
-
+export default function Graph({chartName, chartType, data, options, info}: props) {
return(
-
+
-
Scatter Plot
-
+
+
{chartName}
+
+
+
+
+
diff --git a/frontend/src/app/components/GraphInfo.tsx b/frontend/src/app/components/GraphInfo.tsx
new file mode 100644
index 0000000..9ccf874
--- /dev/null
+++ b/frontend/src/app/components/GraphInfo.tsx
@@ -0,0 +1,13 @@
+interface props {
+ info?: string;
+}
+
+export default function GraphInfo({info}:props) {
+ return (
+
+
{info}
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/Graphs.tsx b/frontend/src/app/components/Graphs.tsx
index 34e0822..479ae75 100644
--- a/frontend/src/app/components/Graphs.tsx
+++ b/frontend/src/app/components/Graphs.tsx
@@ -1,24 +1,224 @@
'use client';
+import { useState, useEffect } from "react";
import Graph from "./Graph";
+import Image from "next/image";
-interface props {
- handleClick?: () => void;
- isExpanded?: boolean;
- }
+interface Props {
+ handleClick?: () => void;
+ isExpanded?: boolean;
+ info?: string;
+}
+
+export default function Graphs({ handleClick, isExpanded }: Props) {
+ const [formattedData, setFormattedData] = useState([
+ ["Liveliness", "Loudness", { role: "style" }],
+ ]);
+ const [boxData, setBoxData] = useState([
+ ["Energy", "Low", "Open", "Close", "High"],
+ ]);
+ const [correlationData, setCorrelationData] = useState([
+ ["Tempo", "Energy", { role: "style" }],
+ ]);
+ const [danceabilityBarData, setDanceabilityBarData] = useState([
+ ["Danceability Range", "Number of Tracks"],
+ ]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ async function fetchData() {
+ try {
+ const response = await fetch("http://localhost:8000/api/data");
+ const jsonData = await response.json();
+
+ const timeSignatureColors: Record
= {
+ 3: "#FF5733",
+ 4: "#33FF57",
+ 5: "#3357FF",
+ 6: "#FFD700",
+ };
+
+ const data = [["Liveliness", "Loudness", { role: "style" }]];
+ Object.values(jsonData)
+ .slice(0, 400)
+ .forEach((track: any) => {
+ if (
+ track.liveness !== null &&
+ track.loudness !== null &&
+ track.liveness < 6
+ ) {
+ const color =
+ timeSignatureColors[track.time_signature] || "#808080";
+ data.push([track.liveness, track.loudness, color]);
+ }
+ });
+ setFormattedData(data);
+
+ const data2 = [["Energy", "Low", "Open", "Close", "High"]];
+ Object.values(jsonData)
+ .slice(0, 100)
+ .forEach((track: any) => {
+ if (
+ track.energy !== null &&
+ track.valence !== null &&
+ track.danceability !== null
+ ) {
+ const low = track.valence * 0.8;
+ const open = track.valence * 0.9;
+ const close = track.valence * 1.1;
+ const high = track.valence * 1.2;
+ data2.push([track.energy, low, open, close, high]);
+ }
+ });
+ setBoxData(data2);
+
+ const data3 = [
+ ["Energy", "Tempo"],
+ ...Object.values(jsonData)
+ .slice(0, 200)
+ .map((track: any) => [track.energy, track.tempo]),
+ ["Danceability", "Tempo"],
+ ...Object.values(jsonData)
+ .slice(0, 200)
+ .map((track: any) => [track.danceability, track.tempo]),
+ ["Acousticness", "Loudness"],
+ ...Object.values(jsonData)
+ .slice(0, 200)
+ .map((track: any) => [track.acousticness, track.loudness]),
+ ["Speechiness", "Energy"],
+ ...Object.values(jsonData)
+ .slice(0, 200)
+ .map((track: any) => [track.speechiness, track.energy]),
+ ];
+
+ setCorrelationData(data3);
+
+ const danceabilityData: number[] = [];
+ Object.values(jsonData)
+ .slice(0, 100)
+ .forEach((track: any) => {
+ if (track.danceability !== null) {
+ danceabilityData.push(track.danceability);
+ }
+ });
+
+ const danceabilityBins: Record = {};
+ danceabilityData.forEach((value) => {
+ const bin = (Math.floor(value / 0.1) * 0.1).toFixed(1);
+ danceabilityBins[bin] = (danceabilityBins[bin] || 0) + 1;
+ });
+
+ const danceabilityBar = [["Danceability Range", "Number of Tracks"]];
+ Object.keys(danceabilityBins)
+ .sort((a, b) => parseFloat(a) - parseFloat(b))
+ .forEach((bin) => {
+ danceabilityBar.push([bin, danceabilityBins[bin]]);
+ });
-export default function Graphs({ handleClick, isExpanded }: props ) {
-
- return (
-
-
+ setDanceabilityBarData(danceabilityBar);
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ } finally {
+ setLoading(false);
+ }
+ }
+ fetchData();
+ }, []);
+
+ const optionsScat = {
+ title: "Track Liveliness vs Loudness (Colored by Time Signature)",
+ hAxis: { title: "Track Liveliness" },
+ vAxis: { title: "Track Loudness (dB)", minValue: -10, maxValue: 0 },
+ legend: "none",
+ pointSize: 3,
+ };
+
+ const optionsBox = {
+ title: "Energy vs Mood (Valence)",
+ hAxis: { title: "Track Energy" },
+ vAxis: { title: "Track Mood (Valence)", minValue: 0, maxValue: 10 },
+ legend: "none",
+ };
+
+ const optionsCorrelation = {
+ title: "Correlation Between Energy and Tempo",
+ hAxis: { title: "Energy" },
+ vAxis: { title: "Tempo (BPM)" },
+ legend: "none",
+ };
+
+ const optionsDanceabilityBarChart = {
+ title: "Danceability Distribution",
+ hAxis: { title: "Danceability Range" },
+ vAxis: { title: "Number of Tracks" },
+ legend: "none",
+ };
+
+ if (loading) {
+ return
Loading Graphs...
;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
-
- );
-}
\ No newline at end of file
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 262b7d8..7b04dd5 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -11,7 +11,7 @@
:root {
--background: #1f1f1f;
--foreground: #ededed;
- background-image: url('/frontend/public/background.png');
+ --backgroundImage: url('/frontend/public/background.png');
background-image: cover;
background-position: center;
background-repeat: no-repeat;
@@ -21,5 +21,14 @@
body {
color: var(--foreground);
background: var(--background);
+ background-image: var(--backgroundImage);
font-family: Arial, Helvetica, sans-serif;
}
+
+.bgImage {
+ object-fit: cover;
+ z-index: -1;
+}
+.mainHome {
+ position: relative;
+}
\ No newline at end of file
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 77c047e..ec957e2 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState } from 'react';
+import { useState, useEffect} from 'react';
import Graphs from "./components/Graphs";
import FrontHeader from "./components/FrontHeader";
import Image from "next/image";
@@ -9,14 +9,32 @@ import Image from "next/image";
export default function Home() {
const [isExpanded, setIsExpanded] = useState(false);
+ const [songData, setSongData] = useState(null);
console.log(isExpanded);
function handleClick() {
setIsExpanded(!isExpanded);
}
+ const triggerDownloadAndFetchData = async () => {
+ try {
+ await fetch('http://localhost:8000/api/download_dataset');
+
+ const response = await fetch('http://localhost:8000/api/data');
+ const data = await response.json();
+
+ setSongData(data);
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ }
+ };
- return (
-
+
+ useEffect(() => {
+ triggerDownloadAndFetchData();
+ }, []);
+
+
+ return (
@@ -34,6 +52,27 @@ export default function Home() {
alt="x"/>
);
}
\ No newline at end of file