Skip to main content
Log in
F

Fasani

@Fasani·14 public vizzes

Loading thumbnail…

Simple D3 Percentage Gauge Responsive

A responsive percentage gauge displays a semicircular progress arc with a live numeric percentage label, updating automatically through a timed sequence of sample value pairs. The visualization uses D3 v4’s `d3.arc` and `d3.arc` with `startAngle` and `endAngle` to construct the background and foreground arcs, while SVG text shows the computed percentage. The gauge resizes based on the viewport width using jQuery, and its width, radius, and font size scale proportionally. Animation cycles through hardcoded test values, though the update itself is not animated, only redrawn. The rendering relies on SVG paths and standard D3 selection methods.

Oct 13, 2017
Loading thumbnail…

Simple D3 Percentage Gauge

This example displays a rotating set of percentage gauges, cycling through seven predefined value pairs to show the proportion of a lower to an upper total. It demonstrates how a semicircular gauge can be built with D3 v4 and SVG, using `d3.arc` to define the background track and the colored progress arc, with a red fill indicating the current percentage. The gauge updates every second via `setInterval`, and the center text shows the rounded percentage. The code relies on jQuery for document readiness, while D3 handles the rendering, and the animation is a simple replacement of the SVG elements rather than a transition.

Oct 13, 2017
Loading thumbnail…

Pentagon Fork

This animated visualization shows a rotating pentagon constructed from a central point to five outer vertices, with its size cycling continuously between expanding and contracting. The code generates 50 spokes and connecting wheel lines using D3 v4’s selection and data-join methods, computing point positions with trigonometric functions. A `setInterval` loop triggers a re-render every 10 milliseconds, incrementing the rotation angle and adjusting the radius length, while an `if` statement reverses the growth direction when the length exceeds 300 pixels or drops below zero. All rendering is done via SVG line elements, cleared and redrawn on each frame.

Sep 26, 2017
Loading thumbnail…

Simple Custom Time Formats with D3 V4

This example demonstrates how D3’s time scale and axis can be customized to display different date-time formats depending on the temporal granularity, such as milliseconds, seconds, minutes, hours, days, weeks, months, or years. It uses D3 v4’s `d3.axisBottom` with a custom `multiFormat` function that conditionally applies format specifiers from `d3.timeFormat` based on the interval between ticks. The data domain spans a single day from January 1, 2000, rendered as an SVG with margins and a 960x500 canvas. The code leverages `d3.timeSecond`, `d3.timeMinute`, `d3.timeHour`, `d3.timeDay`, `d3.timeWeek`, `d3.timeMonth`, and `d3.timeYear` for comparisons, providing a clear hierarchy of time labels.

Aug 30, 2017
Loading thumbnail…

React V16 + D3 + Force / 50% Less Render Calls

This example shows a force-directed bubble chart rendered with React v16 and D3 v3, where the visualization updates only every other frame to reduce render calls by 50%. The code uses `d3.layout.force` to simulate particle positions with a negative charge, while React manages the SVG circle elements through `createReactClass` components. A custom `shouldComponentUpdate` and a `requestAnimationFrame` loop in the `DataSeries` component toggle rendering on alternating ticks, so the chart redraws only half as often. The visible result is a cluster of steel-blue bubbles that animate smoothly, with performance metrics logged to the console after the simulation ends.

Aug 27, 2017
Loading thumbnail…

React V16 + D3 + Force

This example shows a force-directed bubble chart built with React 16 and D3 v3, where each bubble’s position and size update as the simulation runs. The code uses `d3.layout.force` to calculate physics-based movement, with a negative charge proportional to each circle’s radius, and drives re-renders via React state updates in the `DataSeries` component. The visualization renders as SVG circles, and `requestAnimationFrame` in the force’s tick handler triggers continuous re-rendering, while the final `force.on("end")` logs total time, render time, and tick count to the console. Data is randomly generated as 1,000 points with radii between 2 and 10.

Aug 26, 2017
Loading thumbnail…

Water Consumption In New York City v2

This visualization plots New York City’s annual water consumption data as a scatterplot, with each circle representing a year. The x-axis shows the year, while the y-axis maps population, and the circle radius encodes average gallons of water used per person per day. Hovering over a circle reveals a tooltip with the year, per-capita usage, total million gallons per day, and population. The chart uses D3 v4 with SVG rendering, scales for positioning and radius, and a template for the tooltip. Data comes from the NYC OpenData portal.

Aug 25, 2017
Loading thumbnail…

automatic update by http://atom.io/packages/sync-settings

This visualization showcases the file structure of an Atom editor configuration, populated by the sync-settings package. The list displays configuration files like init.coffee, keymap.cson, and packages.json, with the latter containing an array of installed packages and their versions. The rendering uses a monospaced font with syntax highlighting to distinguish file names, JSON syntax, and code, effectively communicating the hierarchy and contents of the configuration files.

Aug 24, 2017
Loading thumbnail…

Water Consumption In New York City

The visualization displays New York City’s water consumption across years, mapping population against total daily water use, with each circle’s size encoding per-capita gallons per day. It shows how consumption metrics change over time while allowing interactive inspection via hover tooltips that reveal exact values for year, population, and water usage. Built with D3 v4, it uses `d3.scaleLinear` for axes and radius, `d3.axisBottom` for the time axis, and underscore templates for tooltip content. Data comes from NYC OpenData, rendered as SVG circles with mouseover events.

Aug 21, 2017
Loading thumbnail…

Browser Auto Refresh Script - Ruby Watcher

This example shows a Ruby script that monitors a project folder for file changes and automatically refreshes matching browser tabs. It watches specified file types like CSS, HTML, and JavaScript using `Dir.glob` to collect files and compares their modification times with `File.stat().mtime`. When a change is detected, it executes an AppleScript via `osascript` to reload tabs in Google Chrome whose URLs contain a keyword. The script runs an infinite loop with a one-second sleep, and also includes commented-out AppleScript support for Safari and Firefox.

Jul 16, 2014
Loading thumbnail…

A Pen by Michael Fasani.

This example demonstrates a full-width horizontal navigation menu whose six items are evenly distributed across the available space using CSS Flexbox, with equal width and spacing for each link. The menu relies on the `display: -ms-flexbox` and `-ms-flex: 1` properties to achieve the equal layout, while also including fallback properties for older box-based implementations. The code uses the 'Abel' webfont from Google Fonts for styling, and each tab features a subtle gradient background and a hover effect that darkens the tone. The markup is a simple unordered list inside a `<nav>` element, with no JavaScript or data source involved—the visual effect is purely CSS-based.

Dec 17, 2013
Loading thumbnail…

A Pen by Michael Fasani.

This example demonstrates how to add a second, synchronized horizontal scroll bar to a jScrollPane container, placing one bar above and one below the content. It uses the jScrollPane API events, specifically `jsp-initialised` to clone the existing horizontal scroll bar and `jsp-scroll-x` to sync the top bar’s drag handle position with the bottom bar’s movement. The code also manages arrow button states by adding or removing the `jspDisabled` class based on scroll position. The content is plain HTML text, styled with CSS, and the behavior is implemented in jQuery within `script.js`.

Dec 17, 2013
Loading thumbnail…

Simple Backbone WordPress Example

This example demonstrates a simple Backbone.js application that fetches and displays WordPress blog posts as a list. It shows how a collection retrieves data from the WordPress REST API endpoint and renders each post’s title, date, and content into a templated view. The code uses Backbone.Model, Backbone.Collection, and Backbone.View, along with Underscore.js templating and jQuery for DOM manipulation. The collection’s `parse` method extracts post fields from the API response, and the view’s `render` method appends each post as a list item.

Oct 22, 2013
Loading thumbnail…

Gist 6701427

This visualization is a step-by-step HTML email template demonstrating 12 best practices for coding robust emails that render consistently across major email clients, including Gmail, Yahoo, Outlook, and Lotus Notes. The example uses nested tables, inline styles, and spacer cells to control layout, with explicit width/height attributes on images and `display:block` to prevent rendering quirks. It illustrates techniques such as treating the outer table as the body, avoiding line-height-sensitive tags, using HTML/CSS mixtures for typography, and adding a "no pictures" fallback header. A sample email structure is shown, with a header, grey shadow box, main content area, and footer, all built from table-based layouts with fixed widths and background colors.

Sep 25, 2013