Skip to content

Commit

Permalink
Added line dotted chart and part of the story
Browse files Browse the repository at this point in the history
  • Loading branch information
@andresnowak
andresnowak committed Dec 20, 2024
1 parent 1241b42 commit 56100de
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 84 deletions.
87 changes: 87 additions & 0 deletions app/line_chart_dotted.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
"use client";

// Import Plotly if you're using modules
import dynamic from "next/dynamic";

// Dynamically import Plotly with no SSR
const Plot = dynamic(() => import("react-plotly.js"), {
ssr: false,
loading: () => <div>Loading Plot...</div>,
});

import Papa from "papaparse";
import { useEffect, useState } from "react";

function LineDottedPlotChart({ datapath, colors }) {
const [data, setData] = useState([]);
const [columns, setColumns] = useState([]);
const [xData, setXData] = useState([]);

useEffect(() => {
console.log("LinePlotChart component mounted with datapath:", datapath);

// Fetch and parse the CSV data
fetch(datapath)
.then((response) => response.text())
.then((csv) => {
Papa.parse(csv, {
complete: (result) => {
// Extract columns and data
const columns = result.data[0].map((col) => col.trim());
const parsedData = result.data.slice(1).map((row) =>
row.map((cell) => parseFloat(cell.trim()))
);
const xValues = result.data
.slice(1)
.map((row) => row[0].trim());
setColumns(columns);
setData(parsedData);
setXData(xValues);
},
header: false,
});
})
.catch((error) => console.error("Error loading CSV data:", error));
}, [datapath]);

if (colors === undefined) {
colors = ["#3e95cd"];
}

console.log("hello", data, columns, xData);

// Function to get a random color from the colors array
const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)];

return (
<div className="w-full max-w-2xl">
<Plot
data={columns.slice(1).map((col, index) => ({
x: xData,
y: data.map((row) => row[index + 1]),
type: "line",
name: `Line ${index + 1}: ${col}`,
line: {
color: getRandomColor(),
dash: index % 2 === 1 ? "dot" : "solid", // Alternate between solid and dotted lines
},
}))}
layout={{
title: { text: "Line Plot" },
xaxis: { title: { text: columns[0] } },
yaxis: { title: { text: "Values" } },
transition: {
duration: 1000,
easing: "ease-in-out",
},
frame: {
duration: 1000,
},
responsive: true,
}}
/>
</div>
);
}

export { LineDottedPlotChart };
200 changes: 116 additions & 84 deletions app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ import {
import { BoxPlotChart } from "./box_plot_chart.js";
import { LinePlotChart } from "./line_chart.js";
import { BarPlotChart } from "./bar_chart.js";
import { RacingChartComponent } from "./racing_chart.js"
import { RacingChartComponent } from "./racing_chart.js";
import { HeatMapChart } from "./heatmap.js";
import { NavBar } from "./nav.js";
import { Footer, LandingPage } from "./home_layout.js";
import { IframeChart } from "./iframe_charts.js";
import { BubbleChart } from "./bubble_chart.js";
import { SankeyChart } from "./sankey_chart.js";
import { LineDottedPlotChart } from "./line_chart_dotted.js";

function SubTitleText({ title, text }) {
return (
Expand All @@ -27,48 +28,26 @@ function SubTitleText({ title, text }) {
);
}

function VariableChooserComponent({ Title, variables, children }) {
const [selectedVariable, setSelectedVariable] = useState(
variables[0].datapath
);

const handleChange = (e) => {
setSelectedVariable(e.target.value);
};

function Paragraph({ text }) {
return (
<div className="flex flex-col space-y-2 p-4 max-w-4xl">
<h3 className="text-2xl font-bold mb-2">{Title}</h3>
{variables.length > 1 && (
<select
value={selectedVariable}
onChange={handleChange}
className="p-2 border border-gray-300 rounded-md"
>
{variables.map((variable, index) => (
<option key={index} value={variable.datapath}>
{variable.name}
</option>
))}
</select>
)}
{children(selectedVariable)}
<div className="flex flex-col space-y-2 p-4 w-full max-w-4xl">
<p className="text-lg text-left">{text}</p>
</div>
);
}

function VariableChooserComponentLDA({ Title, variables, children }) {
const [selectedVariable, setSelectedVariable] = useState(
variables[0].datapath
);
function VariableChooserComponent({ Title, variables, children }) {
const [selectedVariable, setSelectedVariable] = useState(
variables[0].datapath
);

const handleChange = (e) => {
setSelectedVariable(e.target.value);
};
const handleChange = (e) => {
setSelectedVariable(e.target.value);
};

return (
<div className="flex justify-center w-full max-w-7xl align-center flex-col">
<h3 className="text-2xl font-bold mb-2 text-center">{Title}</h3>
return (
<div className="flex flex-col space-y-2 p-4 max-w-4xl">
<h3 className="text-2xl font-bold mb-2">{Title}</h3>
{variables.length > 1 && (
<select
value={selectedVariable}
Expand All @@ -82,14 +61,42 @@ function VariableChooserComponentLDA({ Title, variables, children }) {
))}
</select>
)}
<div className="flex justify-center w-full align-center flex-col">
{children(selectedVariable)}
</div>
</div>
);
}

function VariableChooserComponentLDA({ Title, variables, children }) {
const [selectedVariable, setSelectedVariable] = useState(
variables[0].datapath
);

const handleChange = (e) => {
setSelectedVariable(e.target.value);
};

return (
<div className="flex justify-center w-full max-w-7xl align-center flex-col">
<h3 className="text-2xl font-bold mb-2 text-center">{Title}</h3>
{variables.length > 1 && (
<select
value={selectedVariable}
onChange={handleChange}
className="p-2 border border-gray-300 rounded-md"
>
{variables.map((variable, index) => (
<option key={index} value={variable.datapath}>
{variable.name}
</option>
))}
</select>
)}
<div className="flex justify-center w-full align-center flex-col">
{children(selectedVariable)}
</div>
</div>
);
}

export default function Home() {
return (
Expand Down Expand Up @@ -124,6 +131,30 @@ export default function Home() {
As sports content on YouTube continues to grow, it becomes a vital indicator of global sports trends and fan interests. Below, our first plot showcases the delta views of various sports channels over the years, illustrating the evolving patterns of viewer engagement."
></SubTitleText>
<ChartComponent loading={<LoadingSpinner />} />
<Paragraph text="Next, let’s delve into the distribution of different sports within the YouTube community. "></Paragraph>
<VariableChooserComponent
title="Line plot of delta view"
variables={[
{
datapath:
"data/second_plot/fre_popular_sports_tags.csv",
name: "Delta Subs",
},
]}
>
{(variable) => (
<BarPlotChart
datapath={variable}
colors={["#165B33"]}
loading={<LoadingSpinner />}
/>
)}
</VariableChooserComponent>
<Paragraph
text="Football, basketball, and wrestling reign supreme on YouTube, showcasing their immense global popularity and passionate fan bases. These sports attract millions of views and countless dedicated channels, creating vibrant communities where fans engage, share highlights, and celebrate their favorite moments!
Now, let’s dive into the most frequently featured elements in sports content and discover what truly captivates fans around the world! Our Wordcloud visualizes the top keywords and trends that drive engagement on YouTube."
></Paragraph>
<SubTitleText
title="Create Next App"
text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam autem quibusdam, delectus in corrupti, ab impedit magni iure eveniet aliquid soluta neque quisquam ducimus dolores ex suscipit pariatur. Voluptatibus, exercitationem? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis repellat iure tenetur similique nemo soluta velit voluptate."
Expand Down Expand Up @@ -188,71 +219,51 @@ export default function Home() {
)}
</VariableChooserComponent>
<VariableChooserComponent
title="Line plot of delta view"
Title="Line plot of delta view"
variables={[
{
datapath:
"data/second_plot/fre_popular_sports_tags.csv",
datapath: "data/barplot_data.csv",
name: "Delta Subs",
},
]}
>
{(variable) => (
<BarPlotChart
datapath={variable}
colors={["#165B33"]}
colors={[
"#165B33",
"#FF5733",
"#33FF57",
"#3357FF",
]}
loading={<LoadingSpinner />}
/>
)}
</VariableChooserComponent>
<VariableChooserComponent
Title="Line plot of delta view"
<VariableChooserComponentLDA
Title="Topic modeling LDA"
variables={[
{
datapath: "data/barplot_data.csv",
name: "Delta Subs",
datapath: "lda_world_cup_football.html",
name: "LDA World Cup Football",
},
{
datapath: "lda_olympics.html",
name: "LDA Olympics",
},
{
datapath: "lda_nba.html",
name: "LDA NBA",
},
]}
>
{(variable) => (
<BarPlotChart
datapath={variable}
colors={[
"#165B33",
"#FF5733",
"#33FF57",
"#3357FF",
]}
<IframeChart
src={variable}
loading={<LoadingSpinner />}
/>
)}
</VariableChooserComponent>
<VariableChooserComponentLDA
Title="Topic modeling LDA"
variables={[
{
datapath: "lda_world_cup_football.html",
name: "LDA World Cup Football",
},
{
datapath: "lda_olympics.html",
name: "LDA Olympics",
},
{
datapath: "lda_nba.html",
name: "LDA NBA",
},
]}
>

{(variable) => (
<IframeChart
src={variable}
loading={<LoadingSpinner />}
/>
)}

</VariableChooserComponentLDA>
</VariableChooserComponentLDA>
<VariableChooserComponent
Title="Line plot of delta view"
variables={[
Expand All @@ -275,8 +286,7 @@ export default function Home() {
Title="User comment flow chart for soccer before and after World Cup 2018"
variables={[
{
datapath:
"data/sankey_plot/sankey_diagram_.json",
datapath: "data/sankey_plot/sankey_diagram_.json",
name: "Sankey soccer",
},
]}
Expand All @@ -300,7 +310,29 @@ export default function Home() {
{(variable) => (
<BubbleChart
dataPath={variable}
colors={["#165B33"]}
colors={["#165B33"]}
loading={<LoadingSpinner />}
/>
)}
</VariableChooserComponent>
<VariableChooserComponent
Title="Line plot of delta view"
variables={[
{
datapath: "data/lineplot_data.csv",
name: "LIne Chart",
},
]}
>
{(variable) => (
<LineDottedPlotChart
datapath={variable}
colors={[
"#165B33",
"#FF5733",
"#33FF57",
"#3357FF",
]}
loading={<LoadingSpinner />}
/>
)}
Expand Down

0 comments on commit 56100de

Please sign in to comment.