Tell us what works and what could be better. We read every submission.
@TipTopCoder·16 public vizzes
This example demonstrates how to override a Next.js TypeScript configuration for local Express server development. It shows a `tsconfig.server.json` file that extends the main project’s `tsconfig.json`, switching the module system to CommonJS and redirecting output to a `dist` folder. The file uses TypeScript’s `extends`, `compilerOptions` with `module`, `outDir`, and `noEmit`, plus an `include` array targeting the `server` directory. This setup allows Express code to compile separately from the Next.js client build.
This example demonstrates how to set up a Next.js application with a custom Express server using TypeScript. It shows the server-side configuration that prepares the Next.js app and routes all incoming requests through Next’s request handler. The code uses `next` from the Next.js package, `express` for the HTTP server, and `app.getRequestHandler()` to integrate Express with Next’s routing. The server listens on a configurable port (defaulting to 3000) and handles errors by logging and exiting. The rendering approach relies on Next’s built-in server-side rendering, with the environment set by `NODE_ENV`.
This example shows a Next.js custom error page that displays either a server-side or client-side error message based on the HTTP status code. It uses Next.js’s `getInitialProps` lifecycle method to retrieve the status code from the `res` or `err` objects in the `NextPageContext`. The component conditionally renders text indicating whether the error occurred on the server or client, defaulting to a 404 status if no error is present. The code relies on React’s functional component pattern and Next.js’s built-in error handling.
The example demonstrates how VSCode’s ESLint autofix feature operates, showing a sequence of code edits applied automatically on save. It uses the `editor.codeActionsOnSave` setting with `source.fixAll.eslint` to trigger fixes, while `editor.formatOnSave` is disabled to isolate ESLint’s behavior. The visualization is built from a gist authored by TipTopCoder, rendering the settings.json configuration as a static, annotated layout rather than an animated graph. No charting library appears; the data source is the settings file itself, presented as a direct textual representation.
This example demonstrates a Node.js module-alias configuration that maps the "~" import prefix to the project's dist directory. The code uses the `module-alias` library’s `addAliases` method alongside the `path` module’s `resolve` function to establish the path mapping. It shows how to set up convenient absolute imports in a TypeScript project, with the alias rooted at `../dist` from the current file’s location. No data visualization is present; the snippet is purely a build-time import utility.
This example shows a TypeScript class that defines a user entity with a computed full name property. It demonstrates how the `formatName` helper function is imported and used to combine first and last names into a single formatted string. The `User` class exposes a getter that calls `formatName` with the hardcoded values "John" and "Doe". The code relies on TypeScript's class syntax and module import system, specifically the `~/utils/helpers/format-name` path alias to access the utility function.
This example demonstrates a simple utility function that formats a person's name by combining a first and last name with a space. It shows how to use TypeScript's type annotations and template literal syntax to create a readable, reusable function. The code defines `formatName`, which takes two string parameters and returns a single formatted string using the `${}` template literal syntax. It is a straightforward illustration of basic string manipulation and function export in a TypeScript module, suitable for use in web applications or Node.js projects.
This example demonstrates a common JavaScript closure pitfall inside a loop. The code defines an `addLinks` function that creates five anchor elements, each intended to alert its index when clicked. However, because the loop variable `i` is captured by reference in the click handler, every link alerts the final value, 5, instead of its own index. The visualization relies on the browser’s DOM API, including `document.createElement` and `element.onclick`, with the result shown when `window.onload` triggers the function. It highlights the difference between expected and actual behavior in event handling.
A radial phylogenetic tree of life, rendered with D3 v4, displays thousands of species as leaf labels arranged around a circle, connected by branching links to a central root. The tree uses a cluster layout with modified node depths to encode branch lengths, and faded gray line extensions connect each leaf to its label. Users can toggle a checkbox to show or hide branch lengths, and mouseover a label to highlight its path to the root. The visualization includes a color-coded legend for the three domains of life—Bacteria, Eukaryota, and Archaea—and animates the transition when toggling branch lengths.
A force-directed layout arranges 1,000 circles into four distinct clusters, each tied to one of four color-coded categories. The simulation uses `d3.forceSimulation` with `d3.forceX` and `d3.forceY` to pull nodes toward quadrant-specific foci, while `d3.forceCollide` prevents overlap and `d3.forceManyBody` applies a weak charge. A custom `pythag` function constrains every node inside a large circular boundary drawn as an SVG circle. The visualization renders in SVG, with node positions updated each tick via D3’s data join.
This visualization demonstrates a force-directed network graph built from the alchemySample.json dataset, which contains nodes and edges with random identifiers. The full application uses D3.js’s `d3.forceSimulation` to compute the layout, positioning nodes based on simulated physical forces like charge and link distance. The code renders the graph as SVG elements, with node colors and sizes likely encoding node degree, while edges appear as thin connecting lines. The interface supports interactive panning and zooming via D3’s zoom behavior, allowing users to explore the densely interconnected structure of the sample data.
This example shows a command-line program that computes and prints a Fibonacci sequence stored in a dynamically allocated array. It prompts the user for the number of periods, then uses `malloc` from the C standard library to allocate memory for the values. The program calculates each Fibonacci number iteratively, printing them with `printf` in a formatted layout, breaking to a new line every three entries. It concludes by displaying the final computed value. The visualization relies solely on text output, with no graphics or external libraries beyond the standard C I/O and memory management functions.
A static table maps each of the 20 standard amino acid one-letter codes to its monoisotopic mass in daltons, with values drawn from a hardcoded Python dictionary. The display lists the codes alphabetically and pairs each with the corresponding numeric mass, making the data directly readable. The example uses Matplotlib to render the text-based table as a figure, with no interactive elements. The source file defines the mass values explicitly rather than reading from an external dataset, and the visualization simply presents the dictionary contents in a clear, tabular layout.
This visualization demonstrates the Locating Restriction Sites algorithm, which identifies reverse palindromes in a DNA string. It shows the positions and lengths of every reverse palindrome between 4 and 12 base pairs in the sample sequence TCAATGCATGCGGGTCTATATGCAT, with results displayed as coordinate pairs. The Python script uses BioPython’s `SeqIO.parse` to read the DNA sequence from a FASTA file, then applies nested loops to check each substring against its reverse complement. Output is formatted as text lines pairing position and length, printed to the console.
This visualization automates the submission of course evaluations on the HCMUS student portal by iterating through each row of a data table and triggering the associated link. It randomly selects radio-button answers for ranking and multiple-choice questions using jQuery selectors, then handles any missing fields by prompting for input and manually setting values. The script uses jQuery’s `.trigger()` and `.attr()` methods to interact with the page’s DOM, with a configurable delay between submissions via `setTimeout`.
This visualization demonstrates a shell script that installs Docker on Linux Mint by adding the Docker APT repository and installing the `docker.io`, `cgroup-lite`, and `apparmor` packages. The script checks for HTTPS transport support via `/usr/lib/apt/methods/https`, installs `apt-transport-https` if missing, and uses `apt-key adv` to import the repository key. It also adds the current user to the `docker` group with `usermod`. The code uses standard bash commands and APT APIs, with an optional fallback to the curl-able installer at get.docker.com.