In this assignment, you will build a data visualization assistant that can create charts based on users' questions and a dataset.

Assignment-Demo.mp4

Technical Guidelines

Interface Design

The chatbot interface should be extended to support a CSV data upload. You don’t have to handle multiple data files. If the user uploads a different data file, it will replace the existing one. The chatbot will only generate charts about the dataset. If the dataset is not uploaded yet, it will say the user needs to upload a dataset. To render a chart in the chat response, the assistant will use Vega-lite which uses a JSON specification to generate visualizations. Here is an example JSON and the rendered chart.

{
  "$schema": "<https://vega.github.io/schema/vega-lite/v5.json>",
  "data": {
    "values": [
      {"category":"A", "group": "x", "value":0.1},
      {"category":"A", "group": "y", "value":0.6},
      {"category":"A", "group": "z", "value":0.9},
      {"category":"B", "group": "x", "value":0.7},
      {"category":"B", "group": "y", "value":0.2},
      {"category":"B", "group": "z", "value":1.1},
      {"category":"C", "group": "x", "value":0.6},
      {"category":"C", "group": "y", "value":0.1},
      {"category":"C", "group": "z", "value":0.2}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category"},
    "y": {"field": "value", "type": "quantitative"},
    "xOffset": {"field": "group"},
    "color": {"field": "group"}
  }
}

Data Load

• Implement a file upload component that supports both drag-and-drop and click-to-upload.
• Display an error message when a non-CSV file is uploaded
• Use the d3-dsv package to parse the file into a Javascript object. You may also want to use d3.autoType to automatically convert values to appropriate types.
• Upon loading the data, display a table preview to confirm to the user that the data has been successfully loaded. The preview might only show 5-10 rows similar to the panda data frame’s head() function.

Prompt Construction

• Upon receiving a question from the user, you will construct a prompt to generate a Vega-lite specification.
• When constructing the prompt, you will need to provide information about the dataset so that the GPT can specify data transformations and visual encoding fields.
• Attaching the full dataset in the prompt may not be feasible due to the limited input context window.