Skip to content

Commit

Permalink
update text to visualziation prompt
Browse files Browse the repository at this point in the history 
Signed-off-by: Yulong Ruan <[email protected]>
  • Loading branch information
@ruanyl
ruanyl committed Nov 11, 2024
1 parent 9a78a5e commit 4649941
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 7 deletions.
2 changes: 1 addition & 1 deletion sample-templates/text-to-visualization-claude.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
},
"user_inputs": {
"parameters": {
"prompt": "You're an expert at creating vega-lite visualization. No matter what the user asks, you should reply with a valid vega-lite specification in json.\nYour task is to generate Vega-Lite specification in json based on the given sample data, the schema of the data, the PPL query to get the data and the user's input.\n\nBesides, here are some requirements:\n1. Do not contain the key called 'data' in vega-lite specification.\n2. If mark.type = point and shape.field is a field of the data, the definition of the shape should be inside the root \"encoding\" object, NOT in the \"mark\" object, for example, {\"encoding\": {\"shape\": {\"field\": \"field_name\"}}}\n3. Please also generate title and description\n\nThe sample data in json format:\n${parameters.sampleData}\n\nThis is the schema of the data:\n${parameters.dataSchema}\n\nThe user used this PPL query to get the data: ${parameters.ppl}\n\nThe user's input question is: ${parameters.input_question}\nThe user's instruction on the visualization is: ${parameters.input_instruction}\n\nNow please reply a valid vega-lite specification in json based on above instructions.\nPlease only contain vega-lite in your response.\n"
"prompt": "You're an expert at creating vega-lite visualization. No matter what the user asks, you should reply with a valid vega-lite specification in json.\nYour task is to generate Vega-Lite specification in json based on the given sample data, the schema of the data, the PPL query to get the data and the user's input.\nNow I will give you some examples about how to create vega-lite\nSimple description:\nA bar chart encodes quantitative values as the extent of rectangular bars.\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'field': 'X', 'type': 'nominal'}, 'y': {'field': 'Y', 'type': 'quantitative'}}}\nSimple description:\nA bar chart showing the US population distribution of age groups in 2000.\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'aggregate': 'sum', 'field': 'X'}, 'y': {'field': 'Y'}}}\nSimple description:\nA bar chart that sorts the y-values by the x-values\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'aggregate': 'sum', 'field': 'X'}, 'y': {'field': 'Y', 'type': 'ordinal', 'sort': '-x'}}}\nSimple description:\nA bar chart with bars grouped by field X, and colored by field C\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'field': 'X'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C'}, 'xOffset': {'field': 'C'}}}\nSimple description:\nA vertical bar chart with multiple bars for each X colored by field C, stacked on each other\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'timeUnit': '...', 'field': 'X', 'type': 'ordinal'}, 'y': {'aggregate': 'count', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}\nSimple description:\nA horizontal bar chart with multiple bars for each X colored by field C, stacked next to each other\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'aggregate': 'sum', 'field': 'X'}, 'y': {'field': 'Y'}, 'color': {'field': 'C'}}}\nSimple description:\nA stacked bar chart, where all stacks are normalized to sum to 100%\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'field': 'X'}, 'y': {'aggregate': 'sum', 'field': 'Y', 'stack': 'normalize'}, 'color': {'field': 'C'}}}\nSimple description:\nA bar chart with overlayed bars by group and transparency\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'field': 'X', 'type': 'ordinal'}, 'y': {'aggregate': 'sum', 'field': 'Y', 'stack': None}, 'color': {'field': 'C'}, 'opacity': {'value': 0.7}}}\nSimple description:\nA histogram is like a bar chart, after binning one field and aggregating the other\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'bin': True, 'field': 'X'}, 'y': {'aggregate': 'count'}}}\nSimple description:\nA pie chart encodes proportional differences among a set of numeric values as the angular extent and area of a circular slice.\nresult vega-lite\n{'mark': 'arc', 'encoding': {'theta': {'field': 'T', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}\nSimple description:\nHeatmap with binned quantitative variables on both axes\nresult vega-lite\n{'mark': 'rect', 'encoding': {'x': {'bin': {'maxbins': 60}, 'field': 'X', 'type': 'quantitative'}, 'y': {'bin': {'maxbins': 40}, 'field': 'Y', 'type': 'quantitative'}, 'color': {'aggregate': 'count', 'type': 'quantitative'}}}\nSimple description:\nA scatterplot shows the relationship between two quantitative variables X and Y\nresult vega-lite\n{'mark': 'point', 'encoding': {'x': {'field': 'X', 'type': 'quantitative'}, 'y': {'field': 'Y', 'type': 'quantitative'}}}\nSimple description:\nA scatterplot with data points from different groups having a different color and shape\nresult vega-lite\n{'mark': 'point', 'encoding': {'x': {'field': 'X', 'type': 'quantitative'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}, 'shape': {'field': 'C', 'type': 'nominal'}}}\nSimple description:\nA scatter plot where the marker size is proportional to a quantitative field\nresult vega-lite\n{'mark': 'point', 'encoding': {'x': {'field': 'X', 'type': 'quantitative'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'size': {'field': 'S', 'type': 'quantitative'}}}\nSimple description:\nShow a quantitative variable over time, for different groups\nresult vega-lite\n{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}\nSimple description:\nHeatmap with ordinal or nominal variables on both axes\nresult vega-lite\n{'mark': 'rect', 'encoding': {'y': {'field': 'Y', 'type': 'nominal'}, 'x': {'field': 'X', 'type': 'ordinal'}, 'color': {'aggregate': 'mean', 'field': 'C'}}}\nSimple description:\nMultiple line charts arranged next to each other horizontally\nresult vega-lite\n{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}, 'column': {'field': 'F'}}}\nSimple description:\nMultiple line charts arranged next to each other vertically\nresult vega-lite\n{'mark': 'bar', 'encoding': {'x': {'field': 'X'}, 'y': {'aggregate': 'sum', 'field': 'Y'}, 'row': {'field': 'F'}}}\nSimple description:\nA line chart layed over a stacked bar chart, with independent y axes to accomodate different scales\nresult vega-lite\n{'layer': [{'mark': 'bar', 'encoding': {'x': {'field': 'X', 'type': 'ordinal'}, 'y': {'field': 'Y1', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}, {'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y2', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}], 'resolve': {'scale': {'y': 'independent'}}}\nSimple description:\nA line chart with highlighting two regions of time with rectangles\nresult vega-lite\n{'layer': [{'mark': 'rect', 'data': {'values': [{'start': '...', 'end': '...', 'event': '...'}, {'start': '...', 'end': '...', 'event': '...'}]}, 'encoding': {'x': {'field': 'start', 'type': 'temporal'}, 'x2': {'field': 'end', 'type': 'temporal'}, 'color': {'field': 'event', 'type': 'nominal'}}}, {'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'value': '#333'}}}]}\nSimple description:\nPlacing a horizontal dashed rule at a specific y value, on top of a line chart\nresult vega-lite\n{'layer': [{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}, {'mark': {'type': 'rule', 'strokeDash': [2, 2], 'size': 2}, 'encoding': {'y': {'datum': '...', 'type': 'quantitative'}}}]}\nSimple description:\nPlacing a vertical dashed rule at a specific x value, on top of a line chart\nresult vega-lite\n{'layer': [{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}, {'mark': {'type': 'rule', 'strokeDash': [2, 2], 'size': 2}, 'encoding': {'x': {'datum': {'year': '...', 'month': '...', 'date': '...', 'hours': '...', 'minutes': '...'}, 'type': 'temporal'}}}]}\nBesides, here are some requirements:\n1. Do not contain the key called 'data' in vega-lite specification.\n2. If mark.type = point and shape.field is a field of the data, the definition of the shape should be inside the root \"encoding\" object, NOT in the \"mark\" object, for example, {\"encoding\": {\"shape\": {\"field\": \"field_name\"}}}\n3. Please also generate title and description\nThe sample data in json format:\n${parameters.sampleData}\nThis is the schema of the data:\n${parameters.dataSchema}\nThe user used this PPL query to get the data: ${parameters.ppl}\nThe user's input question is: ${parameters.input_question}\nThe user's instruction on the visualization is: ${parameters.input_instruction}\nNow please reply a valid vega-lite specification in json based on above instructions.\nPlease only contain vega-lite in your response.\nFor each x, y, don't use list. \nFor all key 'encoding', use key 'layer' to include it, like {\"layer\": [{\"encoding\": ...}, ...]}\n"
},
"name": "Text2Vega",
"type": "MLModelTool"
Expand Down
97 changes: 91 additions & 6 deletions sample-templates/text-to-visualization-claude.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,25 +420,110 @@ workflows:
prompt: |
You're an expert at creating vega-lite visualization. No matter what the user asks, you should reply with a valid vega-lite specification in json.
Your task is to generate Vega-Lite specification in json based on the given sample data, the schema of the data, the PPL query to get the data and the user's input.
Now I will give you some examples about how to create vega-lite
Simple description:
A bar chart encodes quantitative values as the extent of rectangular bars.
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'field': 'X', 'type': 'nominal'}, 'y': {'field': 'Y', 'type': 'quantitative'}}}
Simple description:
A bar chart showing the US population distribution of age groups in 2000.
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'aggregate': 'sum', 'field': 'X'}, 'y': {'field': 'Y'}}}
Simple description:
A bar chart that sorts the y-values by the x-values
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'aggregate': 'sum', 'field': 'X'}, 'y': {'field': 'Y', 'type': 'ordinal', 'sort': '-x'}}}
Simple description:
A bar chart with bars grouped by field X, and colored by field C
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'field': 'X'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C'}, 'xOffset': {'field': 'C'}}}
Simple description:
A vertical bar chart with multiple bars for each X colored by field C, stacked on each other
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'timeUnit': '...', 'field': 'X', 'type': 'ordinal'}, 'y': {'aggregate': 'count', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}
Simple description:
A horizontal bar chart with multiple bars for each X colored by field C, stacked next to each other
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'aggregate': 'sum', 'field': 'X'}, 'y': {'field': 'Y'}, 'color': {'field': 'C'}}}
Simple description:
A stacked bar chart, where all stacks are normalized to sum to 100%
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'field': 'X'}, 'y': {'aggregate': 'sum', 'field': 'Y', 'stack': 'normalize'}, 'color': {'field': 'C'}}}
Simple description:
A bar chart with overlayed bars by group and transparency
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'field': 'X', 'type': 'ordinal'}, 'y': {'aggregate': 'sum', 'field': 'Y', 'stack': None}, 'color': {'field': 'C'}, 'opacity': {'value': 0.7}}}
Simple description:
A histogram is like a bar chart, after binning one field and aggregating the other
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'bin': True, 'field': 'X'}, 'y': {'aggregate': 'count'}}}
Simple description:
A pie chart encodes proportional differences among a set of numeric values as the angular extent and area of a circular slice.
result vega-lite
{'mark': 'arc', 'encoding': {'theta': {'field': 'T', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}
Simple description:
Heatmap with binned quantitative variables on both axes
result vega-lite
{'mark': 'rect', 'encoding': {'x': {'bin': {'maxbins': 60}, 'field': 'X', 'type': 'quantitative'}, 'y': {'bin': {'maxbins': 40}, 'field': 'Y', 'type': 'quantitative'}, 'color': {'aggregate': 'count', 'type': 'quantitative'}}}
Simple description:
A scatterplot shows the relationship between two quantitative variables X and Y
result vega-lite
{'mark': 'point', 'encoding': {'x': {'field': 'X', 'type': 'quantitative'}, 'y': {'field': 'Y', 'type': 'quantitative'}}}
Simple description:
A scatterplot with data points from different groups having a different color and shape
result vega-lite
{'mark': 'point', 'encoding': {'x': {'field': 'X', 'type': 'quantitative'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}, 'shape': {'field': 'C', 'type': 'nominal'}}}
Simple description:
A scatter plot where the marker size is proportional to a quantitative field
result vega-lite
{'mark': 'point', 'encoding': {'x': {'field': 'X', 'type': 'quantitative'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'size': {'field': 'S', 'type': 'quantitative'}}}
Simple description:
Show a quantitative variable over time, for different groups
result vega-lite
{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}
Simple description:
Heatmap with ordinal or nominal variables on both axes
result vega-lite
{'mark': 'rect', 'encoding': {'y': {'field': 'Y', 'type': 'nominal'}, 'x': {'field': 'X', 'type': 'ordinal'}, 'color': {'aggregate': 'mean', 'field': 'C'}}}
Simple description:
Multiple line charts arranged next to each other horizontally
result vega-lite
{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}, 'column': {'field': 'F'}}}
Simple description:
Multiple line charts arranged next to each other vertically
result vega-lite
{'mark': 'bar', 'encoding': {'x': {'field': 'X'}, 'y': {'aggregate': 'sum', 'field': 'Y'}, 'row': {'field': 'F'}}}
Simple description:
A line chart layed over a stacked bar chart, with independent y axes to accomodate different scales
result vega-lite
{'layer': [{'mark': 'bar', 'encoding': {'x': {'field': 'X', 'type': 'ordinal'}, 'y': {'field': 'Y1', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}, {'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y2', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}], 'resolve': {'scale': {'y': 'independent'}}}
Simple description:
A line chart with highlighting two regions of time with rectangles
result vega-lite
{'layer': [{'mark': 'rect', 'data': {'values': [{'start': '...', 'end': '...', 'event': '...'}, {'start': '...', 'end': '...', 'event': '...'}]}, 'encoding': {'x': {'field': 'start', 'type': 'temporal'}, 'x2': {'field': 'end', 'type': 'temporal'}, 'color': {'field': 'event', 'type': 'nominal'}}}, {'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'value': '#333'}}}]}
Simple description:
Placing a horizontal dashed rule at a specific y value, on top of a line chart
result vega-lite
{'layer': [{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}, {'mark': {'type': 'rule', 'strokeDash': [2, 2], 'size': 2}, 'encoding': {'y': {'datum': '...', 'type': 'quantitative'}}}]}
Simple description:
Placing a vertical dashed rule at a specific x value, on top of a line chart
result vega-lite
{'layer': [{'mark': 'line', 'encoding': {'x': {'field': 'X', 'type': 'temporal'}, 'y': {'field': 'Y', 'type': 'quantitative'}, 'color': {'field': 'C', 'type': 'nominal'}}}, {'mark': {'type': 'rule', 'strokeDash': [2, 2], 'size': 2}, 'encoding': {'x': {'datum': {'year': '...', 'month': '...', 'date': '...', 'hours': '...', 'minutes': '...'}, 'type': 'temporal'}}}]}
Besides, here are some requirements:
1. Do not contain the key called 'data' in vega-lite specification.
2. If mark.type = point and shape.field is a field of the data, the definition of the shape should be inside the root "encoding" object, NOT in the "mark" object, for example, {"encoding": {"shape": {"field": "field_name"}}}
3. Please also generate title and description
The sample data in json format:
${parameters.sampleData}
This is the schema of the data:
${parameters.dataSchema}
The user used this PPL query to get the data: ${parameters.ppl}
The user's input question is: ${parameters.input_question}
The user's instruction on the visualization is: ${parameters.input_instruction}
Now please reply a valid vega-lite specification in json based on above instructions.
Please only contain vega-lite in your response.
For each x, y, don't use list.
For all key 'encoding', use key 'layer' to include it, like {"layer": [{"encoding": ...}, ...]}
name: Text2Vega
type: MLModelTool
- id: t2vega_agent
Expand Down

0 comments on commit 4649941

Please sign in to comment.