Spaces:

znation
/

visualization-studio

Running

znation HF Staff commited on 20 days ago

Commit

8e5c2f5

1 Parent(s): b2d40c3

claude: add vega-lite vis

prompt: Let's add a new feature. When a dataaset is selected, use DuckDB wasm to identify the column names and column types. Then build up a dropdown list of possible 2D plots, with
1 column on the X axis, and 1 other column on the Y axis. When the user selects one of the 2D plots, use a pre-built Vega-Lite spec to render the plot using Vega-Lite and
vega-embed. The Vega-Lite specs used should be as follows:
* A numeric column on both the X and Y axes should use a scatter plot like on https://vega.github.io/vega-lite/examples/point_2d.html
* A numeric column on the X axis and a text column on the Y axis should use a bar chart like https://vega.github.io/vega-lite/examples/bar_aggregate.html, where the aggregate
operator is "count" on the text field.
* A text column by a text column should not be able to be visualized -- upon further thought, let's remove those from the dropdown.
* Any other column types should result in an error when used describing the type(s).

Files changed (2) hide show

index.html +263 -1
style.css +33 -5

index.html CHANGED Viewed

@@ -8,6 +8,9 @@
 		<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-mvp.wasm.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-browser-mvp.worker.js"></script>
 		<script type="module" src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-browser-mvp.worker.js"></script>
 	</head>
 	<body>
 		<div class="container">
@@ -56,6 +59,18 @@
 			<div id="status" class="status"></div>
 			<div id="resultsContainer" class="results-container" style="display: none;">
 				<h2>Results</h2>
 				<div id="results" class="results"></div>
@@ -67,6 +82,8 @@
 			let db = null;
 			let conn = null;
 			// Initialize DuckDB
 			async function initDuckDB() {
@@ -139,6 +156,223 @@
 				return div.innerHTML;
 			}
 			// Handle form submission
 			async function handleSubmit(e) {
 				e.preventDefault();
@@ -196,10 +430,38 @@
 			}
 			// Handle dropdown selection
-			document.getElementById('urlSelect').addEventListener('change', function(e) {
 				const selectedUrl = e.target.value;
 				if (selectedUrl) {
 					document.getElementById('parquetUrl').value = selectedUrl;
 				}
 			});

 		<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-mvp.wasm.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-browser-mvp.worker.js"></script>
 		<script type="module" src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-browser-mvp.worker.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+		<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
+		<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
 	</head>
 	<body>
 		<div class="container">
 			<div id="status" class="status"></div>
+			<div id="visualizationSection" class="visualization-section" style="display: none;">
+				<h2>Visualization</h2>
+				<div class="form-group">
+					<label for="vizSelect">Select a 2D plot</label>
+					<select id="vizSelect">
+						<option value="">-- Choose columns to visualize --</option>
+					</select>
+				</div>
+				<button type="button" id="renderVizBtn" disabled>Render Visualization</button>
+				<div id="vizContainer" class="viz-container"></div>
+			</div>
 			<div id="resultsContainer" class="results-container" style="display: none;">
 				<h2>Results</h2>
 				<div id="results" class="results"></div>
 			let db = null;
 			let conn = null;
+			let currentDatasetUrl = null;
+			let columnInfo = [];
 			// Initialize DuckDB
 			async function initDuckDB() {
 				return div.innerHTML;
 			}
+			// Determine if a DuckDB type is numeric
+			function isNumericType(type) {
+				const numericTypes = ['TINYINT', 'SMALLINT', 'INTEGER', 'BIGINT', 'HUGEINT',
+									  'FLOAT', 'DOUBLE', 'DECIMAL', 'NUMERIC', 'REAL'];
+				return numericTypes.some(t => type.toUpperCase().includes(t));
+			}
+			// Determine if a DuckDB type is text
+			function isTextType(type) {
+				const textTypes = ['VARCHAR', 'CHAR', 'TEXT', 'STRING'];
+				return textTypes.some(t => type.toUpperCase().includes(t));
+			}
+			// Detect columns and their types from the dataset
+			async function detectColumns(url) {
+				try {
+					setStatus('Detecting column types...', 'info');
+					// Initialize DuckDB if not already done
+					if (!db) {
+						await initDuckDB();
+					}
+					// Register the parquet file
+					try {
+						await db.registerFileURL(
+							'data.parquet',
+							url,
+							duckdb.DuckDBDataProtocol.HTTP,
+							false
+						);
+					} catch {}
+					// Query to get column information
+					const result = await conn.query("DESCRIBE 'data.parquet'");
+					const rows = result.toArray();
+					columnInfo = rows.map(row => ({
+						name: row.column_name,
+						type: row.column_type
+					}));
+					setStatus(`Detected ${columnInfo.length} columns`, 'success');
+					buildVisualizationDropdown();
+				} catch (error) {
+					console.error('Error detecting columns:', error);
+					setStatus(`Error detecting columns: ${error.message}`, 'error');
+					columnInfo = [];
+				}
+			}
+			// Build the visualization dropdown with valid combinations
+			function buildVisualizationDropdown() {
+				const vizSelect = document.getElementById('vizSelect');
+				const vizSection = document.getElementById('visualizationSection');
+				// Clear existing options except first
+				vizSelect.innerHTML = '<option value="">-- Choose columns to visualize --</option>';
+				const validCombinations = [];
+				// Generate all valid column combinations
+				for (let i = 0; i < columnInfo.length; i++) {
+					const xCol = columnInfo[i];
+					const xIsNumeric = isNumericType(xCol.type);
+					const xIsText = isTextType(xCol.type);
+					for (let j = 0; j < columnInfo.length; j++) {
+						if (i === j) continue; // Skip same column
+						const yCol = columnInfo[j];
+						const yIsNumeric = isNumericType(yCol.type);
+						const yIsText = isTextType(yCol.type);
+						// Valid combinations:
+						// 1. Numeric x Numeric (scatter plot)
+						// 2. Numeric x Text (bar chart with count)
+						// 3. Text x Numeric (bar chart with count)
+						// Skip: Text x Text
+						if ((xIsNumeric && yIsNumeric) ||
+							(xIsNumeric && yIsText) ||
+							(xIsText && yIsNumeric)) {
+							let chartType;
+							if (xIsNumeric && yIsNumeric) {
+								chartType = 'scatter';
+							} else if (xIsNumeric && yIsText) {
+								chartType = 'bar';
+							} else if (xIsText && yIsNumeric) {
+								chartType = 'bar';
+							}
+							validCombinations.push({
+								xCol: xCol.name,
+								xType: xCol.type,
+								yCol: yCol.name,
+								yType: yCol.type,
+								chartType: chartType
+							});
+							const option = document.createElement('option');
+							option.value = JSON.stringify({ xCol: xCol.name, yCol: yCol.name, chartType });
+							option.textContent = `${xCol.name} (${xCol.type}) × ${yCol.name} (${yCol.type}) - ${chartType}`;
+							vizSelect.appendChild(option);
+						} else if (!xIsNumeric && !xIsText && !yIsNumeric && !yIsText) {
+							// Other unsupported type combinations - we'll handle error when selected
+							validCombinations.push({
+								xCol: xCol.name,
+								xType: xCol.type,
+								yCol: yCol.name,
+								yType: yCol.type,
+								chartType: 'unsupported'
+							});
+							const option = document.createElement('option');
+							option.value = JSON.stringify({ xCol: xCol.name, yCol: yCol.name, chartType: 'unsupported' });
+							option.textContent = `${xCol.name} (${xCol.type}) × ${yCol.name} (${yCol.type}) - unsupported`;
+							vizSelect.appendChild(option);
+						}
+					}
+				}
+				if (validCombinations.length > 0) {
+					vizSection.style.display = 'block';
+				} else {
+					vizSection.style.display = 'none';
+					setStatus('No valid column combinations found for visualization', 'error');
+				}
+			}
+			// Render visualization using Vega-Lite
+			async function renderVisualization(xCol, yCol, chartType) {
+				const vizContainer = document.getElementById('vizContainer');
+				vizContainer.innerHTML = ''; // Clear previous
+				if (chartType === 'unsupported') {
+					setStatus(`Error: Unsupported column type combination. X column type: ${columnInfo.find(c => c.name === xCol)?.type}, Y column type: ${columnInfo.find(c => c.name === yCol)?.type}`, 'error');
+					return;
+				}
+				try {
+					setStatus('Fetching data for visualization...', 'info');
+					// Fetch data (limit to reasonable amount for visualization)
+					const query = `SELECT "${xCol}", "${yCol}" FROM 'data.parquet' LIMIT 1000`;
+					const result = await conn.query(query);
+					const data = result.toArray();
+					setStatus('Rendering visualization...', 'info');
+					let spec;
+					if (chartType === 'scatter') {
+						// Numeric x Numeric: Scatter plot
+						spec = {
+							$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+							description: `Scatter plot of ${xCol} vs ${yCol}`,
+							data: { values: data },
+							mark: 'point',
+							encoding: {
+								x: { field: xCol, type: 'quantitative' },
+								y: { field: yCol, type: 'quantitative' }
+							},
+							width: 600,
+							height: 400
+						};
+					} else if (chartType === 'bar') {
+						// One numeric, one text: Bar chart with count aggregation
+						const xColInfo = columnInfo.find(c => c.name === xCol);
+						const yColInfo = columnInfo.find(c => c.name === yCol);
+						const xIsNumeric = isNumericType(xColInfo.type);
+						const yIsNumeric = isNumericType(yColInfo.type);
+						if (xIsNumeric && !yIsNumeric) {
+							// X is numeric, Y is text: count text on Y, aggregate on X
+							spec = {
+								$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+								description: `Bar chart of ${yCol} counts`,
+								data: { values: data },
+								mark: 'bar',
+								encoding: {
+									y: { field: yCol, type: 'nominal' },
+									x: { aggregate: 'count', type: 'quantitative' }
+								},
+								width: 600,
+								height: 400
+							};
+						} else {
+							// X is text, Y is numeric: count text on X, aggregate on Y
+							spec = {
+								$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+								description: `Bar chart of ${xCol} counts`,
+								data: { values: data },
+								mark: 'bar',
+								encoding: {
+									x: { field: xCol, type: 'nominal' },
+									y: { aggregate: 'count', type: 'quantitative' }
+								},
+								width: 600,
+								height: 400
+							};
+						}
+					}
+					// Render using vega-embed
+					await vegaEmbed('#vizContainer', spec);
+					setStatus('Visualization rendered successfully!', 'success');
+				} catch (error) {
+					console.error('Error rendering visualization:', error);
+					setStatus(`Error rendering visualization: ${error.message}`, 'error');
+				}
+			}
 			// Handle form submission
 			async function handleSubmit(e) {
 				e.preventDefault();
 			}
 			// Handle dropdown selection
+			document.getElementById('urlSelect').addEventListener('change', async function(e) {
 				const selectedUrl = e.target.value;
 				if (selectedUrl) {
 					document.getElementById('parquetUrl').value = selectedUrl;
+					currentDatasetUrl = selectedUrl;
+					await detectColumns(selectedUrl);
+				}
+			});
+			// Handle manual URL input (detect when user blurs or presses enter)
+			document.getElementById('parquetUrl').addEventListener('blur', async function(e) {
+				const url = e.target.value.trim();
+				if (url && url !== currentDatasetUrl) {
+					currentDatasetUrl = url;
+					await detectColumns(url);
+				}
+			});
+			// Handle visualization selection
+			document.getElementById('vizSelect').addEventListener('change', function(e) {
+				const renderBtn = document.getElementById('renderVizBtn');
+				renderBtn.disabled = !e.target.value;
+			});
+			// Handle render visualization button
+			document.getElementById('renderVizBtn').addEventListener('click', async function() {
+				const vizSelect = document.getElementById('vizSelect');
+				const selectedValue = vizSelect.value;
+				if (selectedValue) {
+					const { xCol, yCol, chartType } = JSON.parse(selectedValue);
+					await renderVisualization(xCol, yCol, chartType);
 				}
 			});

style.css CHANGED Viewed

@@ -85,7 +85,8 @@ textarea {
 	min-height: 100px;
 }
-button[type="submit"] {
 	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 	color: white;
 	border: none;
@@ -98,16 +99,19 @@ button[type="submit"] {
 	width: 100%;
 }
-button[type="submit"]:hover:not(:disabled) {
 	transform: translateY(-2px);
 	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
-button[type="submit"]:active:not(:disabled) {
 	transform: translateY(0);
 }
-button[type="submit"]:disabled {
 	opacity: 0.6;
 	cursor: not-allowed;
 }
@@ -138,6 +142,29 @@ button[type="submit"]:disabled {
 	border-left: 4px solid #f56565;
 }
 .results-container {
 	margin-top: 2rem;
 	padding-top: 2rem;
@@ -211,7 +238,8 @@ tr:hover {
 		font-size: 1.5rem;
 	}
-	button[type="submit"] {
 		padding: 0.75rem 1.5rem;
 	}

 	min-height: 100px;
 }
+button[type="submit"],
+button[type="button"] {
 	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 	color: white;
 	border: none;
 	width: 100%;
 }
+button[type="submit"]:hover:not(:disabled),
+button[type="button"]:hover:not(:disabled) {
 	transform: translateY(-2px);
 	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
+button[type="submit"]:active:not(:disabled),
+button[type="button"]:active:not(:disabled) {
 	transform: translateY(0);
 }
+button[type="submit"]:disabled,
+button[type="button"]:disabled {
 	opacity: 0.6;
 	cursor: not-allowed;
 }
 	border-left: 4px solid #f56565;
 }
+.visualization-section {
+	margin-top: 2rem;
+	padding-top: 2rem;
+	border-top: 2px solid #e2e8f0;
+}
+.viz-container {
+	margin-top: 1.5rem;
+	padding: 1rem;
+	background: #f7fafc;
+	border-radius: 8px;
+	min-height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.viz-container:empty::after {
+	content: 'Visualization will appear here';
+	color: #a0aec0;
+	font-style: italic;
+}
 .results-container {
 	margin-top: 2rem;
 	padding-top: 2rem;
 		font-size: 1.5rem;
 	}
+	button[type="submit"],
+	button[type="button"] {
 		padding: 0.75rem 1.5rem;
 	}