2b:null 2c:["$","title",null,{"children":"Interactive Data Story Generator (Public) | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:T1447,## Objective & Problem Solved This Observable notebook demonstrates a reactive application designed to help users quickly understand simple datasets and explore potential visualizations. Users often have tabular data (like from a spreadsheet) but struggle to identify key trends, outliers, or appropriate ways to visualize it without significant manual effort. This application addresses this by: 1. Allowing users to upload their data. 2. Utilizing the Google Gemini AI model to automatically analyze the data and generate narrative insights (like trends, comparisons, outliers). 3. Presenting these insights in an interactive list. 4. Allowing users to select an insight and get AI-generated suggestions for visualization code (using Observable Plot, Vega-Lite, or D3) tailored to that insight and the data. ## How it Works / Workflow 1. **Upload Data:** Use Observable's built-in features to select and upload a data file from your computer. CSV files should have a header row. JSON files should be an array of objects. The application will attempt to parse the data. 2. **Generate Insights:** Once valid data is loaded, click the "Generate Insights" button. This sends the data (securely, using an API key managed via Observable Secrets in this version) to the Gemini AI for analysis via a modular helper notebook. 3. **Select an Insight:** The AI-generated insights (narrative, type, suggested chart, etc.) will appear in a list powered by the custom `SelectableListWidget`. Click on any insight in the list to select it. Click the selected insight again to deselect it. 4. **Suggest Visualization Code:** When an insight is selected, the "Suggest Visualization Code" button becomes active. Click it to send the selected insight and data context back to the AI, requesting suggested JavaScript code to visualize that insight. 5. **Review Code & Visualize:** The AI's response, including a data summary, the visualization code snippet, an explanation, the library used (Plot, Vega-Lite, or D3), and import instructions, will be displayed below the button. You can review this code. Separately, a chart automatically generated based on the selected insight is displayed. ## Components & Technology Used - **Observable Platform:** The application is built entirely within an Observable notebook, leveraging its reactive JavaScript runtime. - **Data Input:** Uses Observable's standard `FileAttachment` component for robust file uploads and initial parsing (.csv, .json). - **AI Analysis:** Leverages the Google Gemini API for data analysis and code generation. API interaction is handled via the `@google/generative-ai` npm library. - **Custom Input Widget:** Uses the custom `SelectableListWidget` (developed separately) to display the list of AI-generated insights and handle user selection/deselection. - **Visualization Rendering (npm Library):** Recommends several different visualization libraries available on npm to automatically generate a visualization based on the selected insight and data. - **User Interface:** Built using Observable `Inputs` (button) and reactive `md` and `html` cells for display. ## Setup / API Key - **Required:** This notebook requires access to a Google Gemini API key to function. - **Obtain a Key:** You can get your own free (within limits) API key from [Google AI Studio](https://aistudio.google.com/app/apikey) or set one up via the [Google Cloud Console](https://console.cloud.google.com/apis/library/generativelanguage.googleapis.com). Be aware of potential costs and usage limits associated with your key. - **Enter Key:** Paste your obtained Gemini API key into the "🔑 Gemini API Key" input field provided near the top of this notebook. The input field masks your key. The key is used only within your browser session to communicate with the Gemini API via the analysis module. ## Limitations & Future Work - **API Costs & Limits:** Use of the Gemini API may incur costs and is subject to rate limits depending on the user's API key status. - **LLM Variability:** The quality, accuracy, and format consistency of the insights and generated code depend on the LLM and can vary between runs. The generated code is a suggestion and may require debugging or modification. - **Data Size:** Very large datasets may exceed token limits for the AI prompt or cause performance issues in the browser. Data sampling is used in the code generation prompt to mitigate this. - **Code Execution:** This notebook generates visualization code but does _not_ automatically execute it due to security considerations (running arbitrary LLM-generated code is risky). The user reviews the code and can choose to run it in a separate cell. The automatically rendered chart uses predefined logic based on the insight. - **Error Handling:** Basic error handling for API calls and parsing is included, but could be made more user-friendly. - **Future Enhancements:** Could add more sophisticated data preprocessing, support for more chart types, direct interaction with charts, comparison between insights, etc. 32:Tbcf,function SelectableListWidget(data = [], options = {}) { const { key = "id", value = null, renderItem = (item) => html`

${JSON.stringify(item)}

`, selectedClass = "selected-item", createContainer = () => html`

`, itemStyle = `cursor: pointer; padding: 5px; margin: 2px 0; border-radius: 3px; border: 1px solid transparent;` } = options; const getKey = typeof key === "function" ? key : (item) => item?.[key]; const containerElement = this instanceof Element ? this : createContainer(); containerElement.style.listStyle = "none"; containerElement.style.padding = "0"; let _selectedKey = value ? getKey(value) : null; let _internalValue = value; const itemMap = new Map(); const updateSelectionVisuals = () => { for (const [itemKey, element] of itemMap.entries()) { if (itemKey === _selectedKey) { element.classList.add(selectedClass); } else { element.classList.remove(selectedClass); } } }; containerElement.innerHTML = ""; data.forEach((item) => { const itemKey = getKey(item); if (itemKey === undefined || itemKey === null) { console.warn( "SelectableListWidget: Item found with undefined/null key. Skipping item:", item ); return; } let listItemElement; try { listItemElement = renderItem(item); if (!(listItemElement instanceof Element)) { throw new Error("renderItem must return an Element"); } } catch (e) { console.error( "SelectableListWidget: renderItem failed for item:", item, e ); listItemElement = document.createElement("li"); listItemElement.textContent = `Error rendering item with key: ${itemKey}`; listItemElement.style.color = "red"; } listItemElement.style.cssText += itemStyle; itemMap.set(itemKey, listItemElement); // Store element by key listItemElement.onclick = () => { const clickedKey = getKey(item); let newValue; if (clickedKey === _selectedKey) { newValue = null; } else { newValue = item; } containerElement.value = newValue; containerElement.dispatchEvent(new Event("input", { bubbles: true })); }; containerElement.appendChild(listItemElement); }); Object.defineProperty(containerElement, "value", { get() { return _internalValue; }, set(newValue) { const newKey = newValue ? getKey(newValue) : null; if (newKey !== _selectedKey) { _selectedKey = newKey; _internalValue = newValue; updateSelectionVisuals(); } else if (newValue === null && _selectedKey !== null) { _selectedKey = null; _internalValue = null; updateSelectionVisuals(); } else if (newValue !== _internalValue) { _internalValue = newValue; } }, configurable: true, enumerable: true }); containerElement.value = value; updateSelectionVisuals(); return containerElement; }33:T17a7,async function generateVisualizationCode( originalDataArray, selectedInsight, apiKey, LLM ) { if (!apiKey) { return { error: "API Key not provided." }; } if ( !selectedInsight || typeof selectedInsight !== "object" || !selectedInsight.narrative ) { return { error: "Invalid or missing 'selectedInsight' object." }; } if ( !Array.isArray(originalDataArray) || originalDataArray.length === 0 || typeof originalDataArray[0] !== "object" ) { return { error: "Invalid or empty 'originalDataArray' provided." }; } const headers = Object.keys(originalDataArray[0]); const dataSample = originalDataArray.slice(0, 5); // Send first 5 rows as sample const dataSampleJsonString = JSON.stringify(dataSample, null, 2); // Pretty print sample const headersString = headers.join(", "); try { const genAI = new GoogleGenerativeAI(apiKey); const model = genAI.getGenerativeModel({ model: LLM }); const prompt = `Task: Analyze the provided data context and generate a data visualization code snippet along with related explanations, formatted strictly as a JSON object. Context: 1. Insight Details: An analysis of the data yielded the following insight: - Type: "${selectedInsight.type}" - Narrative: "${selectedInsight.narrative}" - Relevant Columns: ${JSON.stringify(selectedInsight.relatedCols)} - Suggested Chart Type: "${selectedInsight.suggestedChart}" 2. Data Structure: The full dataset is available in a JavaScript variable named 'data'. It is an array of objects. The object keys (column headers) are: [${headersString}]. 3. Data Sample (first 5 rows): \`\`\`json ${dataSampleJsonString} \`\`\` Instructions for JSON Output Structure: Respond ONLY with a single, valid JSON object containing the following exact keys: 1. \`"dataSummary"\`: (String) Briefly describe (1-2 sentences) what the provided data sample appears to be about based on the keys and sample values. 2. \`"visualizationCode"\`: (String) A string containing the complete, runnable JavaScript code snippet for the visualization. - Assume 'data' variable exists. - Use 'Relevant Columns' from the insight. * Use 'Suggested Chart Type' as strong guidance, choosing the most effective plot from Observable Plot ('Plot.'), Vega-Lite API ('vl.'), or D3.js ('d3.') and explain deviations in the 'explanation' field. 3. \`"explanation"\`: (String) Explain your choice of visualization type and library. Justify how it addresses the 'Insight Details'. Explain any deviation from the 'Suggested Chart Type'. 4. \`"libraryUsed"\`: (String) Specify the primary library used in the \`visualizationCode\` (e.g., "Plot", "Vega-Lite API", "D3"). 5. \`"importStatement"\`: (String) Provide the specific JavaScript import statement needed to use the chosen library within an Observable notebook cell. Note: Popular libraries like Observable Plot, Vega-Lite JS API, and D3 might be available by default in Observable. Do NOT include any text, explanations, apologies, or markdown formatting outside of the single JSON object response. The entire response must be parseable as JSON.`; const generationConfig = { responseMimeType: "application/json" }; const result = await model.generateContent(prompt, generationConfig); const response = result.response; const responseText = response.text(); let jsonTextToParse = ""; try { jsonTextToParse = responseText.trim(); const jsonFenceMatch = jsonTextToParse.match( /^```json\s*([\s\S]*?)\s*```$/m ); const plainFenceMatch = jsonTextToParse.match( /^```\s*([\s\S]*?)\s*```$/m ); if (jsonFenceMatch && jsonFenceMatch[1]) { jsonTextToParse = jsonFenceMatch[1].trim(); console.log("Extracted JSON from ```json code fence."); } else if (plainFenceMatch && plainFenceMatch[1]) { jsonTextToParse = plainFenceMatch[1].trim(); console.log("Extracted JSON from plain ``` code fence."); } else { // If no fences found, assume/hope the response is raw JSON. console.log( "No code fences detected, attempting to parse trimmed text directly." ); } const structuredResult = JSON.parse(jsonTextToParse); const requiredKeys = [ "dataSummary", "visualizationCode", "explanation", "libraryUsed", "importStatement" ]; const missingKeys = requiredKeys.filter( (key) => !(key in structuredResult) || typeof structuredResult[key] !== "string" ); if (missingKeys.length > 0) { console.error( "AI response JSON object is missing required keys or has invalid types:", missingKeys, structuredResult ); throw new Error( `AI response JSON is missing or has invalid types for keys: ${missingKeys.join( ", " )}` ); } // It worked return structuredResult; } catch (parseError) { console.error( "Failed during JSON parsing or validation:", parseError, "Attempted to parse:", jsonTextToParse ); const textToSnippet = typeof jsonTextToParse === "string" ? jsonTextToParse : responseText; const snippet = textToSnippet.substring(0, 200) + (textToSnippet.length > 200 ? "..." : ""); return { error: `Could not parse or validate AI response as expected JSON. Check console. Snippet tried: ${snippet}` }; } } catch (error) { console.error( "Error interacting with Gemini API for code generation:", error ); if ( error.message && (error.message.includes("API key not valid") || error.message.includes("API key invalid")) ) { return { error: "Invalid API Key provided." }; } return { error: "An error occurred while communicating with the AI analysis service for code generation." }; } }34:T1795,async function generateDataInsights(dataArray, apiKey, LLM) { if (!apiKey) { console.error("generateDataInsights: API Key was not provided."); return { error: "API Key was not provided to the analysis function." }; } if (!Array.isArray(dataArray) || dataArray.length === 0) { console.error( "generateDataInsights: Input data is not a non-empty array.", dataArray ); return { error: "Invalid data provided for analysis (expecting a non-empty array of objects)." }; } if (typeof dataArray[0] !== "object" || dataArray[0] === null) { console.error( "generateDataInsights: Input array does not appear to contain objects.", dataArray[0] ); return { error: "Invalid data provided (expecting an array of objects)." }; } try { const genAI = new GoogleGenerativeAI(apiKey); const model = genAI.getGenerativeModel({ model: LLM // safetySettings: [...] // Optional safety settings }); const dataJsonString = JSON.stringify(dataArray); // Optional: Add indentation for potentially easier parsing by AI, but uses more tokens // const dataJsonString = JSON.stringify(dataArray, null, 2); // Check token count if necessary - large JSON strings can exceed limits console.log("Approximate characters in data JSON:", dataJsonString.length); const prompt = `Task: Analyze the provided data, which is formatted as a JSON array of objects (representing rows in a table, where object keys are column headers). Identify 3-5 key insights including trends, outliers, comparisons, correlations, or distributions. For each insight: provide a concise narrative explanation, classify its type (e.g., "Trend", "Outlier", "Comparison", "Correlation", "Distribution"), list potentially relevant column names (object keys), and suggest a simple, appropriate chart type (e.g., "line", "bar", "scatter", "histogram", "pie", or "none"). Input Data (JSON array of objects): """json ${dataJsonString} """ Output Format Requirements: - Respond ONLY with a valid JSON array containing insight objects. - Do NOT include any introductory text, explanations, or markdown formatting before or after the JSON array. - Each object in the array MUST contain these exact keys: "id" (string, e.g., "insight-1"), "type" (string), "narrative" (string), "relatedCols" (an array of relevant key/column name strings), and "suggestedChart" (string). Example JSON Object Output: {"id": "insight-1", "type": "Trend", "narrative": "Metric 'X' shows consistent upward movement.", "relatedCols": ["Date", "X"], "suggestedChart": "line"} Generate the JSON array now based on the input data.`; const generationConfig = { responseMimeType: "application/json" }; const result = await model.generateContent(prompt, generationConfig); const response = result.response; // Check for safety ratings / blocked content if applicable // if (response.promptFeedback?.blockReason) { // console.error("Prompt blocked:", response.promptFeedback); // return { error: `Request blocked due to safety settings: ${response.promptFeedback.blockReason}` }; // } const responseText = response.text(); console.log("Received raw response text:", responseText); let jsonTextToParse = ""; try { let jsonTextToParse = responseText.trim(); const jsonFenceMatch = jsonTextToParse.match( /^```json\s*([\s\S]*?)\s*```$/m ); const plainFenceMatch = jsonTextToParse.match( /^```\s*([\s\S]*?)\s*```$/m ); if (jsonFenceMatch && jsonFenceMatch[1]) { jsonTextToParse = jsonFenceMatch[1].trim(); console.log("Extracted JSON from ```json code fence."); } else if (plainFenceMatch && plainFenceMatch[1]) { jsonTextToParse = plainFenceMatch[1].trim(); console.log("Extracted JSON from plain ``` code fence."); } else { // If no fences found, assume/hope the response is raw JSON. // Might still fail if there's introductory text. console.log( "No code fences detected, attempting to parse trimmed text directly." ); } const insights = JSON.parse(jsonTextToParse); if (!Array.isArray(insights)) { console.error("Gemini response was not a JSON array:", insights); throw new Error("AI response was not in the expected array format."); } if ( insights.length > 0 && insights.some( (f) => !f || typeof f !== "object" || typeof f.id !== "string" || typeof f.type !== "string" || typeof f.narrative !== "string" || !Array.isArray(f.relatedCols) || typeof f.suggestedChart !== "string" ) ) { console.warn( "Parsed JSON array contains items with missing or invalid keys:", insights ); throw new Error( "AI response array items have missing or invalid required keys (id, type, narrative, relatedCols, suggestedChart)." ); } // It works return { insights: insights }; } catch (parseError) { console.error( "Failed during JSON parsing or validation:", parseError, "Attempted to parse:", jsonTextToParse ); const snippet = jsonTextToParse.substring(0, 200) + (jsonTextToParse.length > 200 ? "..." : ""); return { error: `Could not parse or validate AI response as expected JSON. Check console. Snippet tried: ${snippet}` }; } } catch (error) { console.error("Error interacting with Gemini API:", error); if ( error.message && (error.message.includes("API key not valid") || error.message.includes("API key invalid")) ) { return { error: "Invalid API Key provided to AI analysis module." }; } return { error: "An error occurred while communicating with the AI analysis service. Check console." }; } }35:[{"id":"b11b7f95e4a40c9d95e429d294fb2fa498474ff617b4a66648a5ddc9192a9dc58d011ab6257334354ade030b2e5bf8e4554fb6fd22d576c694d16f3490d7fcce","href":"https://static.observableusercontent.com/files/b11b7f95e4a40c9d95e429d294fb2fa498474ff617b4a66648a5ddc9192a9dc58d011ab6257334354ade030b2e5bf8e4554fb6fd22d576c694d16f3490d7fcce","name":"nobel_final.csv","type":"text/csv","lastModified":1745357280437.691,"size":82960}] 2f:{"id":"5440c743ff8be0de","slug":null,"title":"Interactive Data Story Generator (Public)","thumbnail":"df9ae169120f31bb41da794993a2aeab9ef58ceba11a1100d3fde3227e673fa7","access_level":"public","create_time":"$D2025-04-22T21:28:00.437Z","update_time":"$D2025-04-24T18:25:08.177Z","view_time":null,"first_public_time":"$D2025-04-22T21:28:00.437Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":231,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"613ce9d861a8bc3b","login":"ari-s-123","name":"Aritra Saharay","avatar_url":"https://avatars-next.observableusercontent.com/1da9e61c3f8fc3970bbf95defa0acaffca78064cddc0cddbb20beb8cec3e419f","tier":null,"bio":"I'm an aspiring SWE and a student pursuing a Master's Degree in CS at Northeastern University. My present interests lie at the intersection of Web/Mobile Development, Data Visualization, A11y, and AI."}],"members":[{"type":"individual","id":"613ce9d861a8bc3b","login":"ari-s-123","name":"Aritra Saharay","avatar_url":"https://avatars-next.observableusercontent.com/1da9e61c3f8fc3970bbf95defa0acaffca78064cddc0cddbb20beb8cec3e419f","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Data Story Generator (Public)","cells":[{"id":0,"value":"# Interactive Data Story Generator (Public)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"[Demo Video](https://youtu.be/ySUQkP9LQ_c)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"## Example Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"nobel_final = await FileAttachment(\"nobel_final.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"nobel_final","database":"$undefined"},{"id":152,"value":"## You can upload files into this Notebook and import them using Observable's built-in features\nAdd your own data below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"dataForAnalysis = nobel_final ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"## Inside your own fork, you can add your own Gemini API key below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"viewof geminiAPIKey = Inputs.password({\n label: \"🔑 Gemini API Key\",\n placeholder: \"Paste your Gemini API Key here\",\n help: \"Get your key from Google AI Studio or Google Cloud Console. Required for analysis.\",\n required: true,\n width: \"100%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"### You can change which model is being used\nRefer to [Google's Docs](https://ai.google.dev/gemini-api/docs/models)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"LLM = \"gemini-2.5-flash-preview-04-17\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"### If the button is disabled, ensure your data has been loaded in properly","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"viewof analyzeButton = Inputs.button(\"Generate Insights\", {disabled: !dataForAnalysis})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"### Pay attention to loading state in the top right of the cell below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"analysisResults = {\n const clicks = analyzeButton;\n if (clicks === 0) {\n console.log(\"Analysis cell initialized, waiting for button click.\");\n return undefined;\n }\n if (!dataForAnalysis || !geminiAPIKey || !LLM) {\n return { error: \"Missing data, API key, or model name.\" };\n }\n console.log(\n `Button clicked (${clicks} times). Calling generateDataInsights...`\n );\n return generateDataInsights(dataForAnalysis, geminiAPIKey, LLM);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## Select one by clicking","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"### If there is nothing here, you need to first generate them above","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"viewof findingSelector = SelectableListWidget(\n analysisResults?.insights ?? [],\n // Options:\n {\n key: \"id\",\n // Value: Initial selection (optional).\n value: null,\n // RenderItem: Function to display each insight object as HTML\n renderItem: (\n item\n ) => html`

\n ${item.type}: ${item.narrative}\n

\n (Chart suggestion: ${item.suggestedChart})\n

`,\n\n // SelectedClass: CSS class for highlighting the selected item\n selectedClass: \"selected-item\"\n // createContainer: (Optional) Default is