AI Assisted Coding

VizHub’s “AI Assisted Coding” feature lets you request help from artificial intelligence, which types directly into the editor. Powered by GPT-4. This feature is only available with VizHub Premium.

Use Cases

Solve Technical Problems

Forgot the API? Just write a comment describing what you want and click “AI Assist”. The AI will complete the task for you. For example, type

// Align the text horizontally

and the AI will type the solution directly into your editor. It uses the rest of the code for context and writes code in the appropriate style, such as by using D3 to set inline styles.

From YouTube: Solar System.

You can even just provide partially completed code and no instructions! In this example, the AI infers what attributes to add based on the data present:

From YouTube: Circles with D3.

Parsing Data

Writing code to parse rows from CSV data is one of the most common activities when developing data visualizations. You can leverage AI Assist to help figure out how to parse the data. All you need to do is provide a sample of the raw data, as in this snippet here:

import data from './data.csv';

for (const d of data) {
  // Sample value of d:
  // {
  //   "Date": "1880-01-01",
  //   "Anomaly": "-0.3"
  // }
  // TODO parse rows to numbers and dates
  d.

Then AI will fill in the rest!

  d.Date = new Date(d.Date);
  d.Anomaly = +d.Anomaly;

From GISTEMP Dataset.

Gather Data

Working with data about well known things? Prompt the AI to fill out the rest of the data, and it will probably do a decent job. In this example, we prompt:

// TODO fill in the rest of the plants

and it fills in the rest of the data about the planets. It even picks appropriate colors as well!

From YouTube: Solar System.

Feedback

We look forward to see more ways that this feature can provide value! What do you think? How has this feature been useful to you?

1 Like