Tell us what works and what could be better. We read every submission.
@andrewfulrich·6 public vizzes
This example loads a user-selected CSV file through an HTML file input and stores its contents in an in-browser SQL database using the sql.js library, which compiles SQLite to JavaScript. It infers each column’s data type—integer, float, boolean, date, or text—from the first non-empty value, then dynamically creates a table and inserts rows. After import, the code runs a sample SQL query with a bound parameter (e.g., counting rows by a last name) and logs the result to the console, demonstrating how to execute arbitrary SQL against uploaded tabular data entirely client-side.
This visualization presents a step-by-step plan of attack for a hackathon project, outlining the workflow from goal-setting through prototyping to construction. It uses a simple text-based list rendered with HTML and CSS, where each numbered step appears as a separate line item. The code relies on basic DOM manipulation via JavaScript to dynamically display the plan’s content from a plain-text source, with no external libraries or data APIs involved. The layout is static and readable, emphasizing the sequential nature of the plan without interactive elements.
This example demonstrates how to retrieve URL parameters using vanilla JavaScript, specifically extracting an `id` value from the query string. It shows two functions: `getQueryParams()`, which parses the search portion of the URL into a key-value object by splitting on `&` and `=`, and `getUrlId()`, which returns the `id` parameter from that object. The code relies on the browser’s `window.location.search` API and basic string manipulation, with no external libraries. It highlights a lightweight, dependency-free approach to handling query parameters for tasks like loading specific content based on a URL identifier.
This example demonstrates a searchable, paginated table with live filtering, where users navigate through results and adjust page size through a Vue-driven interface. The viewModel initializes with a Vue instance and uses custom methods like `previousPage`, `nextPage`, `changeLimit`, and `refilter` to manage state. It fetches data via an AJAX helper (`ajaxIt.get`) from an API endpoint, sending query parameters for limit, offset, and filter fields. Responses update Vue properties such as `result`, `rowCount`, and `offsetPlusLimit`, enabling reactive display of the table’s current page and total record count.
This example demonstrates ajaxit, a lightweight JavaScript wrapper that simplifies AJAX requests for CRUD operations. It shows how the wrapper exposes methods like `ajaxIt.get`, `ajaxIt.create`, `ajaxIt.update`, and `ajaxIt.delete`, each built on the core `doIt` function. The code uses the native `XMLHttpRequest` API, handling different HTTP methods (GET, POST, PUT, DELETE) and expected status codes, while supporting form data submission through the `FormData` constructor. It also resolves relative paths against `window.location.origin`, making it suitable for same-origin requests without additional configuration.
This example demonstrates a simple client-side router built with Meteor and a custom router object. It maps URL paths to templates, such as "/" to a hello template and "/test" to a test template, using the `Template.dynamic` helper to render the matching template. The router tracks URL changes via `window.onpopstate` and `window.onhashchange`, while a `Deps.Dependency` object triggers reactive updates in Meteor helpers. It also extracts URL parameters by splitting the remaining path segments, showing a basic approach to routing without external libraries.