{
  "$type": "site.standard.document",
  "canonicalUrl": "https://rednafi.com/javascript/exploring-observable-notebooks/",
  "description": "Create a client-side CSV comparison tool using ObservableHQ notebooks and ChatGPT. Learn to build interactive data apps without deployment hassles.",
  "path": "/javascript/exploring-observable-notebooks/",
  "publishedAt": "2023-04-10T00:00:00.000Z",
  "site": "at://did:plc:fgtm2c26vfcj74rfmeggbyqj/site.standard.publication/3mnl6f7ob462z",
  "tags": [
    "JavaScript",
    "Web"
  ],
  "textContent": "Whenever I plan to build something, I spend 90% of my time researching and figuring out the\nidiosyncrasies of the tools that I decide to use for the project. LLM tools like ChatGPT has\nhelped me immensely in that regard. I'm taking on more tangential side projects because\nthey're no longer as time-consuming as they used to be and provide me with an immense amount\nof joy and learning opportunities. While LLM interfaces like ChatGPT may hallucinate,\nconfabulate, and confidently give you misleading information, they also allow you to avoid\nstarting from scratch when you decide to work on something. Personally, this benefits me\nenough to keep language models in my tool belt and use them to churn out more exploratory\nwork at a much faster pace.\n\nFor some strange reason, I never took the time to explore [ObservableHQ], despite knowing\nwhat it does and how it can help me quickly build nifty client-side tools without going\nthrough the hassle of containerizing and deploying them as dedicated applications. So, I\nasked ChatGPT to build me a tool that would allow me to:\n\n- Upload two CSV files\n- Calculate the row and column counts from the files\n- Show the number of rows and columns in a table and include the headers of the columns and\n  their corresponding index numbers, so that you can compare them easily.\n\nHere's the initial prompt that I used:\n\n> Give me the JavaScript code for an Observable notebook that'll allow me to upload a CSV\n> file, calculate the row and column counts from it, and then display the stats with column\n> headers and their corresponding index starting from 0. Display the info in an HTML table.\n\nThen I refactored the JavaScript it returned so that it'll allow me to upload two CSV files\nand compare their stats. I made ChatGPT do it for me with this follow-up prompt:\n\n> Can you change the code so that it allows uploading two CSV files and displays the stats\n> of both of them in two HTML tables? Don't blindly repeat the logic from the previous\n> section twice.\n\nFinally, I asyncified the code and changed some HTML parsing to make the table look a bit\nbetter. Here's the complete 85-line code snippet:\n\nThe snippet above starts by creating two file input elements using HTML input tags. These\nare used to allow the user to select and upload CSV files. Two empty HTML tables are also\ncreated to hold the extracted statistics for each CSV file.\n\nNext, it defines a function called handleFileLoad which takes a table element as its\nargument. This function is called when the user uploads a file, and it reads the contents of\nthe file and extracts some basic statistics from it. These statistics are then used to\npopulate the HTML table with the extracted information.\n\nInside the handleFileLoad function, the FileReader API is used to read the contents of\nthe uploaded file. The file contents are then parsed as text and split into lines. The first\nline contains the column headers, which are extracted by splitting the line by commas. The\nnumber of columns is then determined by the number of headers, and the number of rows is\ndetermined by counting the number of lines in the file (excluding the header).\n\nIt then creates three rows for the extracted statistics: one row for the number of rows, one\nrow for the number of columns, and one row for the column headers with their corresponding\nindexes starting from zero. The rows are then added to the HTML table.\n\nFinally, the code adds event listeners to the file input elements to trigger the\nhandleFileLoad function when the user uploads a file. The file input elements and HTML\ntables are then returned as an HTML fragment using the HTML template literal, and displayed\nin the notebook.\n\nYou can find the working application embedded in the following section. Try uploading two\nCSV files by clicking on the Choose File button and see how the app displays the stats in\nseparate HTML tables.\n\n<iframe width=\"100%\" height=\"500\" frameborder=\"0\"\n  src=\"https://observablehq.com/embed/@rednafi/compare-two-csv-files@latest?cell=*\">\n</iframe>\n\nHere's a gif of it in action:\n\n<video width=\"100%\" height=\"350\" controls alt=\"observable notebook\">\n  <source\n    src=\"https://user-images.githubusercontent.com/30027932/231012563-375e07b6-9366-460b-9714-495b83a70b08.mov\"\n    type=\"video/mp4\"\n  />\n</video>\n\nClick on the following thumbnail to take the notebook for a spin:\n\n[![Observable notebook interface showing CSV file comparison tool][image_1]][observable notebook]\n\n\n\n\n[observablehq]:\n    https://observablehq.com/\n\n[observable notebook]:\n    https://observablehq.com/@rednafi/compare-two-csv-files\n\n[image_1]:\n    https://blob.rednafi.com/static/images/exploring_observable_notebooks/img_1.png",
  "title": "Building a web app to display CSV file stats with ChatGPT & Observable"
}