25:["$","title",null,{"children":"Can Deepseek AI agent create good visualization? | Yian Chen | Observable"}] 49:Tbfc,async function getVegaConfig() { try { const vegaPrompt = `Create a Vega-Lite configuration JSON for this visualization goal: ${tasks_input}. User persona: ${users_input}. Data schema columns: ${schema.map((d) => d.columnName).join(", ")}. Requirements: 1. Return ONLY valid JSON between tags with: { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "description": "...", "data": {"name": "data"}, "mark": "...", "encoding": {...}, "transform": [...] // If needed } 2. Strict rules: - Use ONLY these fields: ${schema.map((d) => `"${d.columnName}"`).join(", ")} - No explanations/comments in JSON - Validate using Vega-Lite v5 schema - Escape special characters - No markdown formatting 3. Required structure: - data.name must be "data" - Include axis titles and proper field types - Add tooltips for key fields - Handle numeric fields as "quantitative" - Temporal fields as "temporal" Example response: "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "description": "Compare fuel economy (mpg) across different car models", "data": { "values": [ // Your original data array here ] }, "mark": "bar", "encoding": { "x": { "field": "year", // Changed from 'name' to 'year' "type": "ordinal", "axis": {"title": "Model Year"} }, "y": { "field": "economy (mpg)", "type": "quantitative", "axis": {"title": "Fuel Economy (mpg)"} }, "color": { "field": "name", "type": "nominal", "legend": {"title": "Car Model"} }, "tooltip": [ {"field": "year", "type": "ordinal"}, {"field": "economy (mpg)", "type": "quantitative"}, {"field": "cylinders", "type": "quantitative"} ] }, "width": 360, "height": 240 `; const response = await ai_response(vegaPrompt); let result = response.choices[0].message.content; // 1. Improved JSON extraction with strict regex const vegaContent = result.match(/([\s\S]*?)<\/vega>/i); if (!vegaContent) throw new Error("No Vega-Lite config found between tags"); // 2. Enhanced cleaning pipeline const rawVega = vegaContent[1] .replace(/(\r\n|\n|\r)/gm, "") // Remove all newlines .replace(/\s+/g, " ") // Collapse whitespace .replace(/([{,])(\s*)([A-Za-z0-9_\-]+?)\s*:/g, '$1"$3":') // Add quotes to keys .replace(/'/g, '"') // Replace single quotes .replace(/,\s*}/g, "}") // Remove trailing commas in objects .replace(/,\s*]/g, "]"); // Remove trailing commas in arrays console.log("Cleaned JSON:", rawVega); console.log({ rawVega }); // 3. Validate with JSON.parse and handle special characters const config = JSON.parse(rawVega); // 4. add properties config.data = {"values":filtered_data1}; config.width = 360; console.log("Valid Config:", config); return config; } catch (error) { console.error("Error:", error); return { config: [] }; } }4a:[] 29:{"id":"17a521d6f7d16641","slug":null,"title":"Can Deepseek AI agent create good visualization?","thumbnail":"461e0eec41270dc104d9f2b9fe7959eb5aaafdd3c66acf354ef32469b5de1a25","access_level":"public","create_time":"$D2025-02-23T04:40:45.590Z","update_time":"$D2025-02-23T04:42:48.210Z","view_time":null,"first_public_time":"$D2025-02-23T04:40:45.590Z","has_unpublished_edits":null,"fork":{"id":"bc776238e962af53","slug":null,"title":"Can Deepseek AI agent create good visualization?","owner":{"id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7cbedea1f6459816","login":"02864ecdf909a1c2","name":"Yian Chen","avatar_url":"https://avatars-next.observableusercontent.com/f5c211532591ea6d22a37f1c0b8087283b5465d037993473711dbb7f73b0dc13","tier":"starter_2024","bio":"","following":false},"version":1155,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02864ecdf909a1c2","login":"yianchen261","name":"Yian Chen","avatar_url":"https://avatars-next.observableusercontent.com/f5c211532591ea6d22a37f1c0b8087283b5465d037993473711dbb7f73b0dc13","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"7cbedea1f6459816","login":"02864ecdf909a1c2","name":"Yian Chen","avatar_url":"https://avatars-next.observableusercontent.com/f5c211532591ea6d22a37f1c0b8087283b5465d037993473711dbb7f73b0dc13","tier":"starter_2024","role":"editor"},{"type":"individual","id":"02864ecdf909a1c2","login":"yianchen261","name":"Yian Chen","avatar_url":"https://avatars-next.observableusercontent.com/f5c211532591ea6d22a37f1c0b8087283b5465d037993473711dbb7f73b0dc13","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Can Deepseek AI agent create good visualization?","cells":[{"id":0,"value":"# Can Deepseek AI agent create good visualization?\n\n \"A good visualization enables users to complete tasks effectively on the data\" - [source](https://johnguerra.co/lectures/information_visualization_spring2023/01_Introduction/#/3/3/3) \n\nLet's feed to AI agent the data, users, and tasks...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"\n

Try with advance options?

\n
\n${viewof sampleRecords}\n\n${viewof filtered_data}\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"viewof API_KEY = {\n\nlet key = Inputs.text({label:\"API_KEY\"})\nlet localStorageValue = localStorage.getItem(\"API_KEY\")\nif(localStorageValue){\n key.value = localStorageValue\n}\nkey.addEventListener(\"input\", d=>{\n localStorage.setItem(\"API_KEY\", key.value)\n})\nreturn key\n}\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"Task : ${tasks_input}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":903,"value":" embed(vega_schema)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"---\n### 1. Data \nBy Default, using cars dataset for this experiment. Feel free to add your own dataset. Currently supports csv, json and jsonArray","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"viewof data = dataInput({\n value: cars,\n delimiter: ',', // Optional\n format: \"auto\" // Optional, one of MongoExport, JSON, CSV, CSVNoAutoType\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"viewof filtered_data = navio(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"filtered_data1 = filtered_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"filtered_data1","database":"$undefined"},{"id":445,"value":"Lets feed to AI the schema and ${sampleRecords} sample records","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"#### Schema","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"$${Inputs.table(schema)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"#### Sample data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"Inputs.table(sample_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"#### Prompt","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"data_feed = `Assume i have a data with following schema: \\n ${JSON.stringify(schema)}. \\n Following are ${sampleRecords} sample records: \\n ${JSON.stringify(sample_data)}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"### 2. Users\nLet's define the users that would need to analyze the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"viewof users_input = {\n let possible_users = users; \n console.log({possible_users})\n return Inputs.textarea({\"label\": \"Users\", value : JSON.stringify(possible_users.users[0]).replace(/[^a-zA-Z \\n]/g, '').replace(\"name\",\"\").replace(\"user\",\"\").replace(\"role\",\"\").replace(\"description\", \" - \") })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"

Users Generated by Deepseek

\n
\n${Inputs.table(users.users)}\n\n

Tasks Generated by Deepseek

\n
\n${Inputs.table(tasks.tasks)}\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":825,"value":"vega_schema = getVegaConfig()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"users = getUsers()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"tasks = getTasks()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"async function getTasks(){\n try {\n const response = await ai_response(` Assume you are expert in making good visualization (${visualization_def}). what could be tasks that help the user ${users_input} for the following data ${data_feed}. Just return the tasks in json format like {\"tasks\":[{task1, task2, task3,...]}`);\n let result = response.choices[0].message.content\n console.log({\"get_users_response\":result})\n const jsonMatch = result.match(/\\{\\s*\"tasks\"\\s*:\\s*\\[[^\\]]*\\]\\s*\\}/);\n if (!jsonMatch) throw new Error('No valid JSON found');\n return JSON.parse(jsonMatch[0]);\n } catch (error) {\n console.error('Error:', error);\n return { users: [] };\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"async function getUsers() {\n try {\n const response = await ai_response(` Assume you are expert in making good visualization (${visualization_def}). Who could be the potential users that could benefit for the following data ${data_feed}. Just return the Potential users in json format like {\"users\":[User1, User2, User3,...]}`);\n console.log({\"user_response\":response})\n let result = response.choices[0].message.content\n console.log({\"get_users_response\":result})\n const jsonMatch = result.match(/\\{\\s*\"users\"\\s*:\\s*\\[[^\\]]*\\]\\s*\\}/);\n if (!jsonMatch) throw new Error('No valid JSON found');\n return JSON.parse(jsonMatch[0]);\n } catch (error) {\n console.error('Error:', error);\n return { users: [] };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"sample_data = filtered_data1.slice(0,sampleRecords)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"viewof sampleRecords = Inputs.number({label:\"sample count to feed AI\", value:2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"visualization_def = \"A good visualization enables users to complete tasks effectively on the data.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"schema = filtered_data1.schema.map(({name, type})=>({\"columnName\":name, type}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"import {dataInput} from \"@john-guerra/data-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"// async function ai_response(prompt) {\n// let res= await fetch(\"http://localhost:3000/ask\", {\n// method: \"POST\",\n// headers: { \"Content-Type\": \"application/json\" },\n// body: JSON.stringify({ model: \"deepseek-r1:latest\", prompt: prompt })\n// }).then(res => res.json());\n// return res[\"response\"];\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"async function ai_response(prompt){\n const response = await fetch(\n \"https://openrouter.ai/api/v1/chat/completions\",\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${API_KEY}`,\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n model: \"deepseek/deepseek-r1-distill-llama-70b:free\",\n messages: [\n {\n role: \"user\",\n content: `${prompt}. \\n Provide only the final answer without any explanation, reasoning, or formatting. Just the answer.`\n }\n ],\n\n // 'response_format': {\n\n // 'type': 'json_object'\n\n // }\n })\n }\n );\n const data = await response.json();\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null