Unity Timeseries Plotting

2025-03-07 11:52 UTC o3-mini-high Open in ChatGPT ↗

You

I have a csv of timeseries and I want to plot it on Unity using the latest engine features. I want a line chart with the ability to interpolate through using time codes, which are interpolated using a single parameter t and a min - max time range. I want to be able to control the width of the line. I want to be able to display a dot at the current time of day. The line will be colored before the current time. and faded grey after the current time of day. just animating the parameter t should be enough to produce an animation of the chart

ChatGPT

Below is an approach you can take to create an animated timeseries line chart in Unity using modern engine features:

---

Overview

1. CSV Data Import:
   Read your CSV (using a TextAsset or file IO) and parse it into a list of data points. Each point should contain a time code and its associated value.

2. Line Rendering:
   Use Unity’s built‐in LineRenderer component to draw your chart. This component allows you to set the width (via its width properties) and positions (using an array of Vector3).

3. Interpolation with a Parameter (t):
   Animate your chart by updating a parameter t (ranging from 0 to 1) over time. Use this to interpolate between your minimum and maximum time values (using something like Mathf.Lerp(minTime, maxTime, t)) so that the “current” time moves along the timeseries.

4. Dynamic Coloring:
   Split the line into two visual segments:

   • Before the current time: Use a highlighted color (e.g., white or your chosen color).
   • After the current time: Use a faded grey.
     You can achieve this by using the LineRenderer’s color gradient property to blend colors at the point corresponding to your current time.

5. Current Time Indicator (Dot):
   Create a separate GameObject (like a small sprite or sphere) that represents the current time. As you update t, calculate the corresponding position on your line by interpolating between the two closest data points and move this dot accordingly.

6. Animation:
   With t being animated (e.g., using a timer or coroutine), the entire chart will update in real time, creating a dynamic visualization.

---

Sample Implementation

Below is a simplified C# script to illustrate these ideas:

using UnityEngine;
using System.Collections.Generic;
using System.IO;
using System.Globalization;

public class TimeseriesChart : MonoBehaviour
{
    [Header("Data Settings")]
    public TextAsset csvFile; // CSV file with time,value columns
    private List<Vector2> dataPoints = new List<Vector2>();
    private float minTime, maxTime;

    [Header("Chart Settings")]
    public LineRenderer lineRenderer;
    public float lineWidth = 0.1f;

    [Header("Animation Settings")]
    public float animationDuration = 5f; // total time for a full t animation

    [Header("Current Time Indicator")]
    public GameObject dotPrefab;
    private GameObject dotInstance;

    private float timer = 0f;

    void Start()
    {
        ParseCSV();
        if (dataPoints.Count > 0)
        {
            // Ensure data is sorted by time
            dataPoints.Sort((a, b) => a.x.CompareTo(b.x));
            minTime = dataPoints[0].x;
            maxTime = dataPoints[dataPoints.Count - 1].x;
        }

        // Set up LineRenderer positions and width
        lineRenderer.positionCount = dataPoints.Count;
        lineRenderer.widthMultiplier = lineWidth;
        UpdateLinePositions();

        // Instantiate the current time indicator
        dotInstance = Instantiate(dotPrefab, transform);
    }

    void Update()
    {
        // Animate t from 0 to 1 and back continuously
        timer += Time.deltaTime;
        float t = Mathf.PingPong(timer / animationDuration, 1f);
        float currentTime = Mathf.Lerp(minTime, maxTime, t);

        // Update the line's gradient and the dot's position
        UpdateLineColors(currentTime);
        UpdateDotPosition(currentTime);
    }

    void ParseCSV()
    {
        StringReader reader = new StringReader(csvFile.text);
        string line;
        while ((line = reader.ReadLine()) != null)
        {
            // Skip header or empty lines
            if (line.StartsWith("time") || string.IsNullOrWhiteSpace(line))
                continue;

            // Assuming CSV format: time,value
            string[] tokens = line.Split(',');
            float timeValue = float.Parse(tokens[0], CultureInfo.InvariantCulture);
            float value = float.Parse(tokens[1], CultureInfo.InvariantCulture);
            dataPoints.Add(new Vector2(timeValue, value));
        }
    }

    void UpdateLinePositions()
    {
        for (int i = 0; i < dataPoints.Count; i++)
        {
            Vector2 point = dataPoints[i];
            // Convert 2D point to 3D (with z = 0)
            lineRenderer.SetPosition(i, new Vector3(point.x, point.y, 0));
        }
    }

    void UpdateLineColors(float currentTime)
    {
        // Calculate the ratio of current time along the overall time range
        float ratio = (currentTime - minTime) / (maxTime - minTime);

        // Create a gradient that changes color at the ratio point
        Gradient gradient = new Gradient();
        GradientColorKey[] colorKeys = new GradientColorKey[2];
        GradientAlphaKey[] alphaKeys = new GradientAlphaKey[2];

        // Before current time: highlighted color (white)
        // After current time: faded grey
        colorKeys[0] = new GradientColorKey(Color.white, ratio);
        colorKeys[1] = new GradientColorKey(Color.grey, ratio);
        alphaKeys[0] = new GradientAlphaKey(1f, ratio);
        alphaKeys[1] = new GradientAlphaKey(1f, ratio);

        gradient.SetKeys(colorKeys, alphaKeys);
        lineRenderer.colorGradient = gradient;
    }

    void UpdateDotPosition(float currentTime)
    {
        // Find the segment where currentTime falls between two data points
        for (int i = 0; i < dataPoints.Count - 1; i++)
        {
            if (dataPoints[i].x <= currentTime && dataPoints[i + 1].x >= currentTime)
            {
                float segmentT = (currentTime - dataPoints[i].x) / (dataPoints[i + 1].x - dataPoints[i].x);
                Vector2 interpolated = Vector2.Lerp(dataPoints[i], dataPoints[i + 1], segmentT);
                dotInstance.transform.position = new Vector3(interpolated.x, interpolated.y, 0);
                break;
            }
        }
    }
}

---

Explanation

• CSV Parsing:
  The ParseCSV() method reads each line (skipping headers) and converts the time and value columns into Vector2 points.

• LineRenderer Setup:
  The UpdateLinePositions() method assigns each data point to the LineRenderer. The width is controlled via widthMultiplier.

• Interpolation and Animation:
  In Update(), a parameter t (ranging from 0 to 1) is animated using Mathf.PingPong. This parameter is mapped to the actual time using Mathf.Lerp(minTime, maxTime, t).

• Dynamic Coloring:
  The UpdateLineColors() method creates a gradient that switches color at the ratio corresponding to the current time. Points before this ratio appear in a highlighted color, and those after appear grey.

• Dot Indicator:
  The UpdateDotPosition() method locates the two data points between which the current time falls and linearly interpolates between them to position the dot indicator.

---

Leveraging Latest Unity Features

• Custom Shaders & Shader Graph:
  For more advanced visuals (such as smoother color transitions or effects), you might create a custom shader with Shader Graph that reads in the parameter t and applies a more sophisticated gradient along the line.

• DOTS and Burst:
  If you plan to handle large datasets or require extra performance, Unity’s Data-Oriented Technology Stack (DOTS) with the Burst Compiler could be used to optimize the data processing and rendering.

• UI Toolkit:
  For UI-based charts, consider using Unity’s UI Toolkit to integrate interactive elements (like sliders to control t) or additional chart annotations.

---

This example should give you a strong starting point. You can further refine the code by:

• Adding error handling for CSV parsing.
• Smoothing the gradient transitions.
• Integrating interactive controls for the animation parameter.

By animating the parameter t, you’ll see your chart “reveal” itself over time—with the part before the current time highlighted and the future data points fading into grey—providing a clear, dynamic visualization of your timeseries data.