Layne Smith

@LayneSmith·29 public vizzes

D2WL

This D2WL visualization plots the perk combinations for a Destiny 2 player’s curated weapon wish list, showing which perk pairings are most frequently requested across different items. The parse extracts item IDs, perk IDs, and notes (like “pve” or “pvp”) from a raw `dimwishlist` text file, then maps each weapon to its listed rolls. The result is a network-style chart that reveals which perks co-occur often, highlighting the player’s preferred synergy patterns. The code uses a custom parser and a force-directed layout to position nodes.

Dec 7, 2024

Loading thumbnail…

Frisco Schools

Frisco Schools visualizes the construction timeline of schools in Frisco, Texas, from 1986 to 2017. Each row represents a year, with colored rectangles marking individual schools—blue for elementary, yellow for middle, and red for high schools. The visualization uses D3.js v5 with SVG and animation, employing `d3.nest()` to group data by year, `d3.scaleTime()` for the y-axis, and `d3.csv()` to load the dataset. Interactive tooltips appear on mouseover via D3 transitions, while unused years are marked in gray.

Nov 15, 2018

Loading thumbnail…

Scatterplot test

This scatterplot shows the relationship between voter turnout and election results for Texas counties in 2012 and 2018. Each circle represents a county, positioned by its Republican or Democratic margin and sized by population. Semi-transparent lines connect each county’s 2012 and 2018 positions to reveal shifts over time. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with SVG rendering and CSS transitions for interactive highlighting. Data is loaded from CSV files via `d3.csv`, and jQuery manages the county selection menu and element reordering.

Nov 15, 2018

Loading thumbnail…

Dirk's Points

This visualization tracks the cumulative career points scored by Dirk Nowitzki across games from a Dallas News data store. A black line chart displays the growth of his total points over time on a time-series axis, with axes rendered using D3’s `d3.axisLeft` and `d3.axisBottom`. The code loads CSV data with `d3.csv`, parses dates using `d3.timeParse`, and computes running totals before drawing the path with `d3.line` in an SVG.

Oct 17, 2018

Loading thumbnail…

Steps for embedding mapbox-gl in an ES6 build system

This example shows how to configure mapbox-gl for use in an ES6 build system. The code imports the `mapboxgl` library via npm and initializes a map instance in a designated DOM container, using a custom stylesheet URL from the Dallas Morning News. It sets initial map parameters including center coordinates, zoom level, and max zoom. The example also includes instructions for linking the Mapbox GL CSS file in the HTML head and ensuring the map container has explicit width and height in CSS.

Oct 15, 2018

Loading thumbnail…

D3 Template

This template sets up a basic D3 chart with empty linear scales for both axes, leaving placeholders for domain data and styling. The code uses jQuery to read the container’s width and height, then appends an SVG group for the chart area with configurable margins. X and Y axes are generated using `d3.axisBottom` and `d3.axisLeft`, paired with `d3.scaleLinear` ranges. Data loads from `data.csv` via `d3.csv`, which triggers the `buildChart` function, but the example does not yet render any marks or populate scale domains.

Jul 31, 2017

Loading thumbnail…

Gist 2ea73646220a7eade4dc8b5f0a74438c

This example visualizes the commuting choices of working poor versus working non-poor populations, comparing transit, car, bike, and walking options. The chart shows the percentage breakdown for each group across these transportation modes. The visualization is built by processing a static CSV string embedded in the code, which is parsed using a custom `convertCSVstring` function that splits lines and headers, converts numeric strings to numbers, and logs the resulting array of objects to the console via `console.table`. The code does not rely on external libraries like D3 or Canvas, instead using plain JavaScript string manipulation and console output for display.

Jul 7, 2017

Loading thumbnail…

Automation with AWS Lambda

This example shows how to automate data scraping and publishing to an S3 bucket using AWS Lambda. The Python handler function calls a scraper, processes the returned data, and uploads it as a JSON file to a specified S3 path with public-read access. It uses the `boto3` library for S3 interactions, `json` for serialization, and `os` for path handling. The setup also demonstrates local testing via `service.py` and deployment through the Python-lambda tool, with CloudWatch Events scheduling for recurring triggers.

Jun 27, 2017

Loading thumbnail…

Creating virtual environment in projects

This example shows a sequence of command-line instructions for managing a Python virtual environment. It demonstrates creating a venv with `virtualenv`, optionally specifying a Python version, activating it via `source venv/bin/activate`, and deactivating with `deactivate`. The code consists solely of terminal commands and explanatory text, with no data visualization, libraries, or rendering APIs involved. The rendering approach is plain text formatting in a markdown file, and the source is a gist by LayneSmith.

Jun 7, 2017

Loading thumbnail…

Holding for inheritance work

This example demonstrates JavaScript class inheritance and object-oriented programming concepts using a Dog and Animal class hierarchy. The code defines constructors, prototype methods like `bark()` and `cuddle()`, static methods, getters, and setters, showcasing how instance properties and computed values work. It extends an Animal base class with a Dog2 subclass using `super()` to initialize inherited properties. The example also includes commented-out template rendering code referencing Nunjucks and Handlebars libraries, though no data visualization or rendering is actively executed in the final output.

May 3, 2017

Loading thumbnail…

Basic promise structure

This example demonstrates a basic promise chain controlling sequential execution of asynchronous functions triggered by a user click. It shows how JavaScript Promises manage ordered flow, with each function logging its completion status before resolving. The code uses native Promise constructors and the `.then()` method to chain `function1()`, `function2()`, and `function3()` after an initial `initialFunction()`. The interaction is tied to a jQuery click handler on `#loadAudio`, and all resolutions print colored console messages via `console.log`. No data sources or visual outputs are involved; the focus is purely on the control-flow pattern.

May 3, 2017

Loading thumbnail…

virtualenv

This example demonstrates the complete workflow of creating and using a Python virtual environment, from installation to running a Django development server. It shows the command sequence for setting up an isolated environment named “django-env” with `virtualenv --no-site-packages`, activating it with `source django-env/bin/activate`, installing Django via `easy_install Django`, and scaffolding a project with `django-admin.py startproject django_test`. The visualization then runs the server with `python manage.py runserver` and finally deactivates the environment with `deactivate`. The code is structured as a linear shell-script style pipeline, with each step executed sequentially to illustrate the process.

May 3, 2017

Loading thumbnail…

Useful console methods

This example demonstrates the variety of output methods available in the browser console, ranging from simple logging and warnings to CSS-injected styling, object tables, timing, collapsed grouping, and counters. The code runs directly in the console without any libraries, using native Web Console API methods like `console.log`, `console.warn`, `console.error`, `console.info`, `console.debug`, `console.table`, `console.time`, `console.groupCollapsed`, and `console.count`. It shows static data arrays of employees to illustrate how each method formats and displays information, including string substitution and percentage-based styling for large text.

Apr 27, 2017

Loading thumbnail…

Gist f0b5295ac06573fd875dac15dc6fe1e1

This example logs a shuffled array and fetches JSON data from a Dallas News data store containing Cowboys draft history. Using jQuery for DOM readiness and Lodash's `shuffle`, it imports a custom `getdata` module that relies on `d3-fetch`'s `json` function to asynchronously retrieve the dataset and output it to the console. The code also demonstrates commented-out alternatives with jQuery's `$.getJSON`, showing a work-in-progress approach to loading and logging the same external JSON resource.

Apr 11, 2017

Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

Mar 15, 2017

Loading thumbnail…

Gist 31d1125ec64ede7d29fc4d096250e64a

A CSS flexbox playground demonstrates how container properties and per-item order values rearrange a set of nine colored boxes. The code uses flexbox layout APIs such as `display:flex`, `justify-content`, `align-items`, `align-content`, and `align-self` to control horizontal and vertical spacing, wrapping, and individual item alignment. It also highlights the `order` property with negative and high positive integers to change visual sequence, and includes commented-out alternatives like `space-around` and `center` to show variations. The example is written entirely in plain CSS within a flexbox.css file.

Feb 28, 2017

Loading thumbnail…

Retrieve Google Spreadsheets content

This example shows a web page that pulls content from a published Google Spreadsheet and renders it as a numbered list of image cards with text and credit lines. The spreadsheet’s first two rows provide the headline and deck, while each subsequent row supplies an image URL, title, and credit. The code uses jQuery’s `$.getJSON` to fetch data from the Google Spreadsheets feed API, parses the returned JSON, and dynamically appends HTML elements to a container. It relies on a single function, `buildList`, which takes the spreadsheet ID as an argument, and uses basic array storage and string interpolation to build the layout.

Nov 9, 2016

Loading thumbnail…

Gist c9bc9cb4b2a2d8ec041e6c0ebd7bc9be

This visualization displays the 2016 NFL regular-season schedule for the Dallas Cowboys as a sequence of 13 week-long blocks. Each block is labeled with the opposing team's name, including a "Bye" week, rendered as a static array of strings. The code defines a JavaScript array called `weeks` containing the opponent names in chronological order, which presumably drives a visual timeline or calendar layout. The implementation relies on plain JavaScript data structures rather than any external visualization libraries, with the data hard-coded directly in the source file.

Aug 23, 2016

Loading thumbnail…

Gist ead5534a23dc13cdbe68

This visualization displays shared results from a Know Me 2016 dataset, enabling comparison of entries across two specified list IDs via a web route. The server-side JavaScript uses the Express framework’s `appRouter.route()` method to handle GET requests, querying the `know_me_2016` model with an `or` condition to fetch records matching either list identifier. Results are returned as raw JSON responses via `res.send()`, with error handling that also sends the error object. The code does not include client-side rendering libraries, focusing solely on backend data retrieval and response delivery.

Feb 1, 2016

Loading thumbnail…

Gist 8e4a7859bf351698daff

This example displays a collection of Git command-line snippets organized by workflow categories, with each command as a labeled node. The visualization uses D3.js to render these commands as interactive text elements, applying a force-directed layout to spatially group related commands like repository creation, branching, and syncing. The code references `d3.forceSimulation` for positioning nodes and includes the raw command strings from a public Gist, with no external data fetching. Each node displays its command syntax and a brief comment, while the layout dynamically adjusts to avoid overlap based on the text content.

Jan 13, 2016

Loading thumbnail…

Gist 1a9660527e35cdeba43b

This example visualizes a Git branching and merging workflow as a sequence of command blocks, showing each step from checkout through commit and merge. The code uses d3’s selection and transition methods to animate the blocks appearing in sequence, with text labels for branch names and commit messages. It renders as a simple timeline of styled HTML divs, where the data—the list of shell commands—is embedded directly in the markup and driven by d3’s data join. The visualization emphasizes the order and syntax of typical Git operations without simulating actual repository behavior.

Oct 8, 2015

Loading thumbnail…

Gist 99cb92e4150e3e977dc0

This example uses the D3.js library to visualize a git branching workflow. It demonstrates a sequence of commands, starting with pulling a branch and checking out an existing branch, before creating a new branch and making commits. The visualization renders each git command as a node in a flowchart-like diagram, with edges connecting the commands to show the order of operations. It uses D3's force-directed graph layout to position the nodes and maintain clear spacing, making the branching structure and command sequence easy to follow.

Oct 8, 2015

Loading thumbnail…

Check SQL in PHP

This example shows a PHP script that checks for duplicate IP addresses in a database table before inserting a new record. The code constructs a SQL query by concatenating the table name and IP variable directly into a `SELECT COUNT(*)` statement, then executes it with the `db->query()` method. If the query fails, it prints the database error information using `$db->errorInfo()`. The result is retrieved via `fetchColumn()`, returning the count that indicates whether the IP already exists. The visualization highlights the string interpolation in the SQL statement, demonstrating a classic SQL injection vulnerability.

Jun 18, 2015

Loading thumbnail…

if isMobile

This example demonstrates a simple branching interaction that checks whether a user is on a touch-enabled device. It shows a plain JavaScript conditional statement that executes one block of code if `isMobile` evaluates to true, and a different block otherwise. The code relies on the `ontouchstart` and `onmsgesturechange` window properties to detect touch capability, assigning the result to a variable. No visualization libraries or data sources are used; the example is purely a logic skeleton for responsive behavior.

May 7, 2015

Loading thumbnail…

Gist 8368366d8665351503d6

This example demonstrates PHP snippets for handling MySQL database operations in a web application, focusing on user IP tracking and survey response counting. It shows duplicate IP checks using `$_SERVER["REMOTE_ADDR"]` combined with `SELECT COUNT(*)` queries, followed by prepared statements for single and multiple row inserts via `$db->prepare()` and `bindValue()`. The code also counts total responses by selecting `COUNT(*)` from a table, and tallies specific answer values through `WHERE` clauses with `rowCount()`. No visualization libraries or rendering techniques appear; the example relies purely on server-side SQL logic.

Apr 23, 2015

Loading thumbnail…

Changing sharing data

This example shows how to dynamically update social-media share metadata for a news story. The code reassigns variables such as `storyTitle`, `storyURL`, `storyImG`, and `leadText` to new values, then uses jQuery selectors to overwrite the corresponding `og:title`, `og:url`, `og:image`, and `og:description` meta tags in the page’s head. Finally, it re-fires the `shareInit` function on two share-bar elements to refresh the buttons with the updated data. It relies on the jQuery library for DOM manipulation and a custom `shareInit` function.

Apr 23, 2015

Loading thumbnail…

Gist ec916d1fc2f8a4ed9fb9

This example demonstrates a minimal URL-based interaction pattern for a web page. It shows how a query string parameter, such as `?targetDiv`, is parsed with jQuery and used to reveal a specific hidden element on the page. The code uses `$(location).attr('search')` to retrieve the raw query string, strips the leading question mark with `substring(1)`, and then calls a `doStuff()` function that targets the named div via `$("#" + targetDiv).show()`. No data visualization or charting library is involved; the focus is purely on client-side DOM manipulation driven by the page’s URL.

Apr 23, 2015

Loading thumbnail…

Gist 50f16a9f81d9c88a6a48

This example demonstrates a cookie-based voting system that tracks whether a user has visited a page or submitted a vote. On page load, it checks for an existing "username" cookie; if none exists, it prompts for a name and stores it for 30 days. The code uses the jQuery Cookie plugin to set a per-page cookie after voting, triggering a welcome message on first visit or an already-visited alert afterward. It also includes native JavaScript functions (`setCookie`, `getCookie`, `checkCookie`) for manual cookie management, relying on `document.cookie` and `toGMTString` for expiration handling.

Apr 23, 2015

Loading thumbnail…

Gist 33580f9f359cea2b2586

This visualization uses a force-directed network layout to display a portfolio of major stocks, with each node representing a company and links suggesting relationships. The code relies on the D3.js library’s force simulation and animation capabilities to position and update the nodes. Data is pulled live from Yahoo Finance’s CSV quote API, which supplies the ticker symbols and their associated metrics, though only the symbols are rendered as labels in the graph. The visualization appears to be a proof-of-concept for showing financial instruments as an interactive, physics-based cluster.

Mar 30, 2015