FrankieFabuloso

@FrankieFabuloso·11 public vizzes

City Bar Graph

This visualization shows daily temperature variations for three cities—New York, San Francisco, and Austin—from October 2011 through January 2012. Using data loaded from a tab-separated values file (data.tsv) with d3.tsv, the chart displays each city's temperature as a bar, with the x-axis representing time and the y-axis representing temperature in degrees. Built with D3 v4 and rendered as SVG, the grouped bar chart uses a different colored bar for each city on every date, making it easy to compare both daily temperatures and seasonal trends across the three locations.

Dec 21, 2017

Loading thumbnail…

Gist 1b0b20e0ad0d7c0f4d873ef2700bc4ff

This visualization presents a weekly job-application tracker from a markdown checklist, rendered as an interactive bubble chart. The data shows two goal categories—finishing take-home projects and applying to twenty specific companies—with completion states indicated by checkboxes. The code uses d3.forceSimulation to position bubbles by category, with each bubble sized by the length of the company name and colored by completion status. Hover interactions reveal the company name and status via tooltips, while the underlying data is parsed directly from the markdown structure. The rendering approach emphasizes the progress toward the application goal through spatial grouping and visual encoding of checkbox states.

Jun 9, 2017

Loading thumbnail…

Gist e4ad04560d14bf59d0642b48bf3e436b

This example visualizes a job-search and interview-preparation checklist as a network diagram. It shows the relationships between job applications, interview tasks, and study resources using a force-directed layout. The visualization uses D3.js’s `d3.forceSimulation` to position nodes and links, with each node representing a task or company and edges showing dependencies. The code renders custom SVG elements, and hover interactions highlight connected nodes. Data comes from a Markdown checklist, parsed and converted into graph form. The rendering approach emphasizes task progression, with completed items visually distinct, and uses transition tweens for smooth layout updates.

Jun 2, 2017

Loading thumbnail…

Gist d2687f14229e40bdda2b6d126307fb53

This example visualizes a weekly job application tracker, showing progress toward a goal of 20 applications with checkboxes, company names, and links to application portals. It highlights completed applications, including one rejected application (Chewse), and displays a mix of completed and pending items alongside a secondary misc. goal for preparing a React app with an external API. The visualization uses a simple list-based rendering approach within a React component, leveraging the framework’s state and JSX to manage and display checkbox states and task statuses.

May 26, 2017

Loading thumbnail…

Gist dbe8122ef6678bc81c0628ce7b6020f9

This example tracks a job-search progress checklist in a GitHub gist, visualizing task completion across categories like personal projects and applications. The code renders each checklist item as a node in a force-directed graph, using d3.forceSimulation to position items by category and status (checked or unchecked). A custom SVG rendering layer draws links between related tasks and colors nodes by completion state, while the layout derives directly from the gist’s markdown structure. The visualization shows how a simple to-do list can be reimagined as an interactive network, with hover tooltips revealing task titles and URLs from the source data.

May 19, 2017

Loading thumbnail…

Gist 660bf021ec250dfb10016d384d524bd7

This example shows a real-time chat application where users exchange messages through a Node.js server. The visualization tracks message flow and user activity using a force-directed graph rendered with D3.js’s `d3.forceSimulation` for node positioning and link physics. Each user appears as a node, with edges connecting them to messages they send, while color and size encode online status and message frequency. The code uses Socket.IO for live data updates and D3’s `transition.attrTween` to animate new nodes and links smoothly as events arrive, making the conversation pattern immediately visible.

May 12, 2017

Loading thumbnail…

Lucia's Bookstore

Lucia's Bookstore is a full-stack bookstore application that demonstrates a dynamic shop page and admin interface. The shop page lists books from a PostgreSQL database, loading 50 at a time with pagination, and features hover-triggered previews and a shopping cart modal. The admin page, protected by a session, provides a form to add new books and a search bar to query the store's inventory. The code uses Express for routing, PostgreSQL for data persistence, and EJS templates to render the book listings and interactive elements.

Apr 28, 2017

Loading thumbnail…

JS Bin

This example presents an interactive musical keyboard built with the Web Audio API, where each piano-style button corresponds to a specific note (C through B). The page shows how a single oscillator can generate tones by connecting and disconnecting it from the audio destination on button press and release. The code uses `AudioContext`, `createOscillator`, and `createGain` from the Web Audio API, with square-wave synthesis producing the sound. The interface relies on HTML button elements with `onmousedown` and `onmouseup` handlers to trigger the `noise()` and `silence()` functions, which set the oscillator frequency and toggle its connection. The source is a standalone HTML file with embedded JavaScript, rendering no visual data but demonstrating audio-frequency control.

Feb 8, 2017

Loading thumbnail…

Gist 74ec5d85ba7c8d07ef4c93a5ab6c2088

This example visualizes the project-management workflow for a software development cycle, breaking down tasks, goals, and quality criteria into an interactive graph. It shows how issues from a GitHub repository are connected to broader project objectives and acceptance standards. The visualization uses d3.forceSimulation to position nodes representing tasks, goals, and quality metrics, with d3.select and d3.drag enabling user interaction. Data is sourced from a static JSON snapshot of the project’s markdown files and linked issue URLs, rendered as a network diagram that clarifies dependencies and priorities without relying on live API calls.

Jan 30, 2017

Loading thumbnail…

Perfect-paca-noob

This React dashboard visualizes the assignment of “noobs” to mentors using a schema that tracks users, tasks, and template tasks. The example, built with a Knex-based PostgreSQL backend, shows how noob records inherit from the users table and link to mentors via a `mentor_id` foreign key. The visualization itself is minimal—rendering only a placeholder "Dashboard" component—but the data model highlights relationships between users, tasks, and template tasks, emphasizing the mentor-noob assignment workflow and task completion tracking.

Jan 30, 2017

Loading thumbnail…

Make a Word

The visualization is a word-guessing game that displays seven letters and prompts the user to submit a valid word. The user can guess a word, shuffle the letters, or generate a new random set of letters. The game tracks the number of wins and losses, and shows a message indicating whether each guess is correct or wrong. The code uses plain JavaScript DOM methods like `querySelector`, `getElementById`, and `innerHTML` to manage the interface, with the letter set generated by combining random consonants and vowels.

Jul 17, 2016