15Dkatz

An approach to deep cloning objects in JavaScript

This example shows a recursive approach to deep cloning plain JavaScript objects, where each nested object is duplicated rather than shared by reference. The code defines a `cloneDeep` function that iterates over an object’s own enumerable properties using `Object.entries`, checks whether each value is an object with `typeof value === 'object'`, and if so, calls itself recursively; otherwise, it assigns the primitive value directly. The visualization likely demonstrates this process step by step, perhaps animating the traversal of a sample object tree. However, the code explicitly notes it does not support arrays, converting them into object-like structures with numeric keys, as seen in the comment about `['foo', 'bar']` becoming `{0: 'foo', 1: 'bar'}`. No external libraries are used—only native JavaScript methods and operators.

May 1, 2019

Prior selections by the Zendesk Film Salon

This visualization maps the chronological screening history of the Zendesk Film Salon, plotting each film selection by date and highlighting the person who chose it. The data, sourced from a plain-text file, is rendered as a timeline of dots, with each point positioned along a horizontal axis for time and grouped by the selector’s name. The visualization uses d3.forceSimulation to arrange the film titles as labels near their corresponding dots, preventing overlap, while a color scale distinguishes the different contributors. The layout reveals the rotating leadership and periodic resets between rounds of picks.

Mar 30, 2019

Gist ca8ce8dbd8dbba7b501860f3d569f019

This example demonstrates a lightweight Express server that acts as a CORS proxy for a joke API, enabling browser-based requests to bypass cross-origin restrictions. The code uses the `express` and `request` libraries to define a route, `/jokes/random`, which forwards requests to `https://joke-api-strict-cors.appspot.com/jokes/random` and relays the JSON response back to the client. A middleware sets the `Access-Control-Allow-Origin` header to `*`, allowing any frontend to access the proxied data. The server listens on a configurable port, defaulting to 3000, and handles errors by returning a JSON error object. This setup illustrates a simple server-side solution for enabling client-side data fetching from a restricted external source.

Jan 29, 2019

Gist 043532d6e0e677b8c9ccd8d994c70116

This interactive typing game tracks a player’s progress through a character-by-character comparison of their input against a target phrase. The interface uses React state management (`useState`) to store the snippet, the user’s typed text, and a game-state object that records victory status and start/end timestamps. The initial game state is defined as a constant with `victory: false` and null time fields, which are later updated as the game runs. The visualization does not include any graphical charting library; instead, it relies purely on React’s rendering and state logic to display the comparison and status.

Jan 27, 2019

Gist 16f833f25c52e08f53e5255e4db05a2e

This example shows a real-time typing game where a user’s input is matched against a target text, displaying victory and elapsed time in milliseconds. The code uses React state and event handlers (`onChange`) to update the displayed text as the user types. It renders the current user input in an input field and shows a congratulatory message once the correct text is entered. The visualization relies on basic DOM updates rather than a charting library, focusing on interaction feedback through a simple JSX template.

Jan 27, 2019

Gist 3e6254d26d7dbeebc0b0f0c822baee60

This React example presents a minimal typing-race interface, displaying a header and a text input field. The application records the user’s keystrokes into the component’s state, updating the displayed text in real time. It uses React’s `React.Component`, the `event.target.value` property for input handling, and logs the current state to the console. The example demonstrates a basic two-way binding between a controlled input and the component’s state, showing the typed text as the user types.

Jan 27, 2019

List of discounts for courses taught by David Katz

This visualization displays Udemy course discounts offered by instructor David Katz, listing each course title alongside its promotional coupon code. Built with React, it renders a static, scrollable list of courses with clickable discount links that open the Udemy enrollment pages. The data comes from a Markdown file parsed into structured course objects, and the interface uses plain React components with CSS styling to organize the entries. No interactive charting or animation libraries are employed; the focus remains on presenting the coupon information in a clean, accessible format.

Jun 16, 2018

Gist 0214c33084a385939fa02bb466c2a999

This example shows a React application that renders a basic component structure, confirming the presence of a title element through a unit test. The code uses Enzyme's `shallow` rendering to inspect the App component and Jest as the test runner, verifying that an `h1` tag exists. The test suite imports React and the App component, then asserts the rendered output includes the expected heading. No data visualization or interactive behavior is demonstrated; it focuses solely on component rendering validation within a Parcel and React setup.

Parcel-react-jest - setupTests.js

This example shows a minimal test setup for a React 16 project, configuring Enzyme to work with its adapter. It imports the `configure` function from the `enzyme` package and the `Adapter` class from `enzyme-adapter-react-16`, then calls `configure` with a new adapter instance. The code demonstrates the explicit initialization required to enable Enzyme’s testing utilities within a Jest environment, without displaying any test cases or rendering behavior.

Parcel-react-jest - .babelrc

This example shows a minimal JavaScript configuration file, `.babelrc`, that defines the compilation settings for a React project. The configuration specifies two presets, `"env"` and `"react"`, which enable modern JavaScript syntax and JSX transformation within the build pipeline. The file demonstrates how Babel is used to compile source code, with the presets providing the necessary rules for the Parcel bundler and the Jest testing framework to process the code correctly. The entire visualization reduces to this small JSON structure, highlighting the simplicity of the setup.

Parcel-react-jest - index.css

This example demonstrates a minimal CSS styling setup for a React application built with Parcel and tested using Jest. The body text is rendered in blue through the `index.css` stylesheet, which is imported as part of the project’s bundling process. The visualization itself is not interactive or data-driven; instead, it serves as a static reference for how CSS rules are applied within the component hierarchy. Parcel handles the CSS import at build time, while Jest verifies the rendered output, making the example an instructional template for integrating styling into a modern JavaScript toolchain.

Parcel-react-jest - index.js

This example shows the minimal entry point for a React application built with Parcel. The code imports the `App` component and CSS file, then uses `react-dom`'s `render` function to attach the app to the `#root` element in the HTML. It demonstrates the standard bootstrap pattern for a React project, where `index.js` serves as the initialization script, delegating all UI logic to the imported `App` component.

PostgreSQL installation tutorial

This example presents a step-by-step guide for installing PostgreSQL across macOS, Linux, and Windows. It shows the terminal command `psql -U postgres` as the target for verifying a successful setup, then details OS-specific actions, such as using the Postgres.app on macOS, compiling from source via `wget` on Linux, and using the EnterpriseDB installer on Windows. The tutorial also covers checking the `$PATH` variable and verifying the server port with `lsof`.

Oct 12, 2017

Gist 5f3654a871cd25cd4baf9fd51347d607

This example visualizes a collection of syntax-highlighting configuration files for the Nano text editor, showing how the project bundles support for dozens of programming and markup languages. The visualization uses a network graph built with D3.js’s `d3.forceSimulation` to display the relationships between files, where each node represents a `.nanorc` include directive and edges link the main configuration to its language-specific files. The rendering relies on `d3.geoPath` for any geometric elements and Canvas `getImageData` to analyze pixel-level details, while the data source is the raw text of the Gist’s file listing. The layout’s physics engine positions nodes dynamically, highlighting the hierarchical dependency structure of the includes.

Jun 16, 2017

Gist 22a08fcb15d37b014db02655b5f921ee

This example visualizes the structure of a `.gitconfig` file, showing how its nested sections, aliases, and settings are organized. It renders the configuration as an interactive tree diagram using D3.js, with each node representing a file section, key-value pair, or alias command. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, and `d3.forceSimulation` is not employed—instead, the tree is positioned statically. Nodes are drawn with SVG circles and text, colored to group related categories, and the visualization is generated directly from the parsed `.gitconfig` data.

Jun 16, 2017

Filtering and Brushing - Multi-Series Line Chart

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file. Users can click a city’s line to isolate it by fading others, or hover to gray out the remaining lines. Built with D3 v4, it uses `d3.tsv`, `d3.timeParse`, scales like `d3.scaleTime` and `d3.scaleLinear`, and `d3.line` for SVG paths. Color encoding relies on `d3.scaleOrdinal` with `d3.schemeCategory10`, while transitions animate opacity and stroke changes.

Mar 24, 2017

Gist 362622e653494c155e16a41bd222e099

This example shows a single user card for a character named Sam, displaying a portrait image from the file frodo.png. The HTML structure consists of a div containing a user title and an image, with the code referencing a force simulation for potential layout calculations. It uses basic HTML and CSS class assignments, though no JavaScript libraries are imported in the visible markup, and the rendering relies on static image embedding rather than dynamic data visualization.

Mar 9, 2017

Gist 206925505eea2e42a4bb63cd12861807

This example displays a portrait of a character named Frodo, presenting a user image and title within a simple HTML structure. The visualization uses plain HTML and CSS, with the character’s name placed in a `user-title` div and the portrait in a `user-img` element that loads an external PNG file. The code does not employ any charting or interaction libraries; instead, it renders static content directly in the browser, relying on standard DOM elements and attributes for layout and display.

Mar 9, 2017

Parallel Coordinates

This parallel coordinates chart visualizes fuel economy and performance data for 1970s–80s cars, with each dimension (economy, cylinders, displacement, power, weight, acceleration, and year) represented as a vertical axis and each car as a polyline. Built with D3 v3 using SVG and animation, it extends the original example by making axes reorderable — users can drag axes to rearrange dimensions and click-drag along any axis to brush, filtering the dataset interactively. The brushing highlights selected ranges across linked dimensions, enabling rapid exploration of multivariate relationships.

Feb 25, 2017

Parallel Coordinates

This parallel coordinates visualization displays data for cars from the 1970s and 1980s from a CSV file, mapping each car as a polyline across vertical axes representing dimensions such as economy, cylinders, displacement, power, weight, and acceleration. The visualization allows users to interactively reorder axes and brush along any dimension to filter the dataset. Built with D3 v3, it uses `d3.svg.line()`, `d3.svg.axis()`, and `d3.svg.brush()` for rendering and interaction, with SVG paths for the background and foreground lines.

Feb 25, 2017

Lab3 - Multi-Series Line Chart

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over a year, using data loaded from a TSV file via d3.tsv. The x-axis employs a time scale with dates parsed by d3.time.format, while the y-axis uses a linear scale for temperature values. Each city’s temperature series is drawn as a separate colored line using d3.svg.line, with colors assigned from the category10 ordinal scale. The chart computes its x- and y-domains dynamically with d3.extent, d3.min, and d3.max, and uses d3.keys to identify the city columns in the dataset. Conventional margins are applied, and axes are rendered with d3.svg.axis. The visualization compares daily average temperatures across New York, San Francisco, and Austin over one year, highlighting seasonal differences among the three cities.

Feb 11, 2017

Multi-Series Line Chart

This multi-series line chart displays the daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file using `d3.tsv`. The visualization uses D3 v4 to map dates to the x-axis with `d3.scaleTime`, temperatures to the y-axis with `d3.scaleLinear`, and city names to colors via `d3.scaleOrdinal` with `d3.schemeCategory10`. Each city’s values are rendered as a smooth `path` using `d3.line` with `d3.curveBasis`, while axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart includes a dark background around a white SVG and labels each line at its final data point.

Feb 8, 2017

webpack configuration for webpack-es6-boilerplate

This example shows a minimal webpack configuration for the webpack-es6-boilerplate, defining how JavaScript source files are bundled. It sets the entry point to `babel-polyfill` and `./app/index.js`, outputs a single `bundle.js` to a `build` directory, and uses `babel-loader` to transpile `.js` files while excluding `node_modules`. The configuration also includes a development server on port 3000 serving from `./build` with inline mode enabled. The code directly references the webpack API, including `module.exports`, the `entry`, `output`, `module.loaders`, and `devServer` properties.

bundle/index.html for webpack-es6-boilerplate

This example shows a minimal webpack setup for an ES6 project, producing a single-page HTML document that loads a compiled JavaScript bundle. The page contains no visible content or user interface, only an empty body with a script tag referencing `bundle.js`. The code demonstrates the entry-point plumbing of a webpack-built application, where the frontend relies entirely on the bundled output for any rendering or behavior. The files include the `index.html` shell and the webpack configuration source, indicating how a boilerplate project connects its build system to a basic HTML host page.

React boilerplate

This example shows a basic React application that renders the text “Hello, world from React and Webpack!” onto a webpage. It imports React and ReactDOM, defines an `App` component class with a `render` method returning JSX, and mounts it to the `root` DOM element. The code demonstrates React’s component-based UI approach, using `ReactDOM.render()` to attach the component tree to the document. No external data or specific visualization libraries are involved.

package.json for webpack-es6-boilerplate

This visualization displays the contents of a package.json file for a webpack-based ES6 boilerplate project, mapping dependencies and scripts as structured JSON. The code defines build and start commands using webpack and webpack-dev-server, while Babel presets handle ES2015 transpilation. The rendering relies on JSON syntax highlighting and indentation to reveal the hierarchical relationships between configuration fields, though no external charting libraries are used. The data source is the gist authored by 15Dkatz, presenting the full file without additional visual encoding beyond the raw text format.

Letter Count Bar Chart

This interactive bar chart visualizes the frequency of each letter in a text file, updating live as the user types in a textarea. The chart loads Peter Piper’s tongue twister asynchronously via `d3.text`, counts characters with JavaScript, and renders SVG rectangles using `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn with `d3.axisBottom` and `d3.axisRight`, and the chart animates with D3’s enter/update/exit pattern on each `keyup` event.

Feb 3, 2017

Letter Count Bar Chart

A bar chart displays the frequency of each letter in the text of "Peter Piper," loaded asynchronously via `d3.text`. The chart updates live as users type in a textarea, using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisRight` to render SVG bars and axes. Enter and update selections handle dynamic data changes, with a key-based data join for smooth transitions.

Feb 3, 2017