Using OpenAI for Data Analysis and Visualization

OpenAI API Setup

To set up the OpenAI API, follow these steps:

1. Visit the OpenAI API signup page and create an account.
2. Generate a new secret key on the API keys page.
3. Install the OpenAI npm package:

npm install openai

Next, import and configure in your JavaScript file:


import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
apiKey: 'YOUR_API_KEY',
});
const openai = new OpenAIApi(configuration);

For efficient API interactions, use this factory function:


import { Configuration, OpenAIApi } from 'openai';
const DEFAULT_MODEL = 'gpt-4';

const configuration = new Configuration({
apiKey: 'YOUR_API_KEY',
});
const openai = new OpenAIApi(configuration);

export default function createEndpoint(systemText, model = DEFAULT_MODEL) {
return async function (req, res) {
const command = `${req.body.text} using this data: ${JSON.stringify(req.body.data)}`;
try {
const response = await openai.createChatCompletion({
model: model,
max_tokens: 2048,
temperature: 0,
messages: [
{ role: 'system', content: systemText },
{ role: 'user', content: command },
],
});
const reply = response.data.choices[0].message;
res.status(200).json({ result: reply });
} catch (error) {
console.error(`Error with OpenAI API request: ${error}`);
res.status(500).json({
error: {
message: 'An error occurred during your request.',
},
});
}
};
}

Use this function to create custom endpoints based on different initial prompts.

Array Manipulation with Arrays-AI

Arrays-AI library simplifies JavaScript array manipulation using natural language commands and the OpenAI API. To use it:

1. Install the library:

npm install arrays-ai

2. Import and configure:


import { ArraysAi } from 'arrays-ai';
const arraysai = new ArraysAi();
arraysai.Configure({ apiKey: 'YOUR_API_KEY' });


3. Set the array data:


const myArray = [collection_1, collection_2, ...];
arraysai.SetData(myArray);


4. Use natural language queries:


arraysai.Ask("How many records have a null age in the first array?", true)
.then(answer => {
console.log(answer);
});


Arrays-AI supports various operations like filtering, sorting, and aggregation:

Arrays-AI also supports multilingual queries:

arraysai.SetLanguage(Languages.SPANISH);

This library simplifies complex array operations, enhancing productivity and code readability in JavaScript projects.¹

Data Visualization with ReGraph

ReGraph enables creating dynamic data visualizations in React applications. To use it with OpenAI:

1. Install ReGraph:

npm install regraph

2. Create an endpoint for graph queries:


import createEndpoint from './path_to_create_endpoint';

const SYSTEM_TEXT = `You are an intermediary between a human user and a graph visualization application. Respond to requests in a JSON format mentioned below:
- "nodes": [{ "id": string, "label": string }] - List of nodes with their properties.
- "links": [{ "id": string, "source": string, "target": string }] - List of links (connections) between nodes.
- "answer": string - Response message to be displayed to the user.
- "success": boolean - Indicates if the graph was successfully created.

Respond in JSON format only.`;

export default createEndpoint(SYSTEM_TEXT);

3. Integrate with a React component:


import React, { useState } from 'react';
import { Graph } from 'regraph';
import axios from 'axios';

const initialData = {
nodes: [
{ id: 'node1', label: 'Node 1' },
{ id: 'node2', label: 'Node 2' },
],
links: [],
};

function MyGraph() {
const [graphData, setGraphData] = useState(initialData);
const [message, setMessage] = useState('');

const handleUserCommand = async (command) => {
try {
const response = await axios.post('/api/gpt/graph', {
text: command,
data: graphData,
});

if (response.data.result.success) {
setGraphData(response.data.result);
setMessage(response.data.result.answer);
} else {
setMessage('Failed to process the command.');
}
} catch (error) {
console.error('Error processing command:', error);
setMessage('An error occurred while processing your command.');
}
};

return (
<>
<Graph data={graphData} />
<input 
type="text"
placeholder="Enter your command"
onKeyDown={(e) => {
if ( e.key === "Enter" ) handleUserCommand(e.target.value);
}}
/>
<div>{message}</div>
</>
);
}

export default MyGraph;

This integration allows users to interact with data visualizations using natural language commands, processed by OpenAI and rendered by ReGraph. ReGraph has been shown to improve data comprehension by up to 30% compared to traditional charting methods.²

Prompt Engineering for Data Analysis

Effective prompt engineering is key to maximizing OpenAI models’ potential in data analysis. Here are some tips for crafting precise prompts:

1. Be clear and specific: Define your exact goals and provide clear instructions.

Example for sentiment analysis:


Extract the sentiment from these customer reviews. Classify each as 'positive', 'negative', or 'neutral':
1. "The product quality is excellent, I'm very satisfied."
2. "I'm disappointed with the customer service."
3. "The experience is average, nothing special."


2. Provide context: Help the model understand the task scope.

Example for sales analysis:


Analyze the last quarter's sales data. The data includes product names, units sold, and revenue. Identify top-performing products, detect trends, and suggest improvement areas.


3. Include examples: Show the desired output format.

Example for data reformatting:


Reformat this raw data into a table with 'Product', 'Units Sold', and 'Revenue' columns:
Raw data: "Product A 20 units $200, Product B 15 units $150"
Formatted table example:
| Product | Units Sold | Revenue |
|----------|-------------|---------|
| Product A | 20 | $200 |


4. Set appropriate parameters: Keep temperature low (0.2-0.3) for precise tasks like data analysis.
5. Anticipate issues: Include data validation checks in your prompts.

Example for statistical queries:


Compute the average revenue per product. Ensure values are consistent and flag any entries with missing revenue data.


6. Break down complex tasks: Structure prompts sequentially for large datasets.
7. Validate outputs: Perform spot-checks and cross-references to ensure accuracy.

Continuously refine your prompts based on the results you receive to improve clarity and precision.

Multilingual Natural Language Processing

OpenAI models support multiple languages, enhancing accessibility in global applications. Here’s how to implement multilingual support:

1. Set up the OpenAI API:


import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
apiKey: 'YOUR_API_KEY',
});
const openai = new OpenAIApi(configuration);

2. Create a function to generate responses in specific languages:


async function generateResponse(prompt, languageCode) {
const systemPrompt = `Responde en ${languageCode}.`;

const response = await openai.createChatCompletion({
model: 'gpt-4',
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: prompt },
],
});
return response.data.choices[0].message.content;
}

generateResponse("How does a solar panel work?", "francés")
.then(answer => {
console.log(answer); // Response in French
});

3. Integrate language selection into a React component:


import React, { useState } from 'react';
import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
apiKey: 'YOUR_API_KEY',
});
const openai = new OpenAIApi(configuration);

const MultilingualChat = () => {
const [prompt, setPrompt] = useState('');
const [language, setLanguage] = useState('español');
const [response, setResponse] = useState('');

const handleChat = async () => {
try {
const systemPrompt = `Responde en $American English.`;
const aiResponse = await openai.createChatCompletion({
model: 'gpt-4',
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: prompt },
],
});

setResponse(aiResponse.data.choices[0].message.content);
} catch (error) {
console.error('Error generating response:', error);
}
};

return (

);
};

export default MultilingualChat;

This approach allows users to select their preferred language, enhancing usability and catering to a wider audience. Remember to validate responses, especially for critical applications, and stay updated with OpenAI’s supported languages to expand your application’s reach.

Did you know? As of 2023, OpenAI’s GPT-4 model supports over 100 languages, making it one of the most linguistically diverse AI models available.¹

By integrating OpenAI and ReGraph, you can transform data visualization into an engaging and accessible experience. This approach allows users to interact with their data naturally, making insights more intuitive and actionable.