Skip to main content
Log in
K

Kirun1

@Kirun1·15 public vizzes

Loading thumbnail…

Swiper Slider

This example demonstrates a coverflow-style destination slider for a travel website, featuring image cards for locations like Thailand, Belgium, and Nepal. It uses the Swiper library with its coverflow effect, incorporating 3D transforms, slide shadows, and responsive breakpoints to adjust cards per view. Navigation relies on the included `swiper-bundle` scripts and the jQuery-based `wte-elementor-widgets` integration. The slider is driven by inline HTML data attributes for configuration and pulls images from the WordPress theme’s media directory.

Mar 13, 2025
Loading thumbnail…

DashBoard

This dashboard example shows how linked views can be used for interactive data exploration. A bar chart of state frequencies and a pie chart with a legend are initially displayed together, and hovering over a bar in the histogram updates the pie chart and legend to show that state's breakdown by low, mid, and high segments. Conversely, hovering over a pie slice triggers a transition that updates the histogram to reflect the frequencies of that segment across the states. The code uses D3 v3 with an SVG rendering approach, relying on d3.scale.ordinal, d3.scale.linear, and transition methods to animate the changes.

Apr 11, 2018
Loading thumbnail…

DashBoard

This dashboard combines a bar chart and a pie chart to explore categorical frequency data. Hovering over a bar updates the pie chart and legend to show the breakdown for that category, while hovering over a pie slice updates the histogram with the corresponding frequencies. Built with D3 v3, it uses ordinal and linear scales, SVG rendering, and smooth transitions to animate changes. The data is structured with low, mid, and high frequency values for each state.

Apr 11, 2018
Loading thumbnail…

Filtering in d3.js

This example demonstrates how the `.filter` method in d3.js selectively highlights data points on a line chart. It plots a time series of stock closing prices from a CSV file, drawing a smooth line for the full dataset, then overlays red circular dots only for values below 400. The visualization uses d3.svg.line for the path, d3.time.scale for the date axis, and d3.svg.axis for tick marks. The filtering occurs on circle elements appended via the data join, applying the condition directly to the data array before setting visual attributes.

Apr 7, 2018
Loading thumbnail…

fresh block

This example shows a simple bar chart rendered as a series of vertical rectangles, each with a fixed width and varying heights that step down from left to right. Built with D3 v4 and SVG, the code appends each rectangle directly to the document body, setting explicit x, y, width, and height attributes. A text element also displays an instructional message for the viewer. The data is hardcoded in the markup rather than loaded from an external source.

Apr 7, 2018
Loading thumbnail…

Complete Node.js CheatSheet --> UPDATED VERSION --> https://github.com/LeCoupa/awesome-cheatsheets

This animated visualization presents a comprehensive Node.js cheat sheet, displaying code sections for global objects, console methods, timers, modules, and process APIs. The code scrolls through a JavaScript file that documents key functions and syntax examples, with the source pulled from a gist by Kirun1. The animation renders text sequentially, highlighting different API categories as the cheat sheet moves vertically, making the reference material visually engaging and easy to follow.

Nov 11, 2017
Loading thumbnail…

Atom CheatSheet --> https://github.com/LeCoupa/awesome-cheatsheets

This cheat sheet visualizes the keyboard shortcuts and terminal commands for the Atom text editor, sourced from a GitHub gist. It organizes the data into distinct sections: project key bindings, file key bindings, terminal commands, and other useful Git configurations. The rendering approach uses a static text-based layout, with each key binding displayed as a formatted list item containing the key sequence and its corresponding action. The cheat sheet relies on the raw content of the `atom.cheatsheet.coffee` file, presenting the information without any interactive or dynamic visual elements.

Nov 10, 2017
Loading thumbnail…

The Ultimate JavaScript Cheatsheet --> https://github.com/LeCoupa/awesome-cheatsheets

This example visualizes the structure of JavaScript's global Array object, listing its properties, mutator, accessor, and iteration methods alongside code samples. It presents the reference material from the Ultimate JavaScript Cheatsheet, a gist by Kirun1, as a static text-based layout rather than a graphical chart. The organization groups entries by category, with each line showing syntax and a brief description, rendering the data directly from the source code’s structured comments.

Nov 10, 2017
Loading thumbnail…

Gist 29a80d872a229596d8d4fbb1e7aff1e2

This example presents a visualization of a WordPress Multisite configuration, displaying the wp-config.php settings that define multisite networking. The code uses a force-directed graph via D3.js’s `d3.forceSimulation` to position nodes representing key constants like `MULTISITE`, `SUBDOMAIN_INSTALL`, and `DOMAIN_CURRENT_SITE`, while edges link related definitions. The rendering relies on SVG elements generated by D3 selections, with data drawn directly from the PHP configuration file. The visualization highlights the hierarchical relationship between the multisite flag, domain settings, and site IDs in a network layout, without additional interaction or animation beyond the simulation’s initial layout.

Sep 7, 2017
Loading thumbnail…

My simply MySQL Command Line Cheatsheet

This example displays a plain-text cheat sheet of essential MySQL command-line operations, organized into sections for database and table management, querying, aggregate functions, and multi-table joins. The gist presents over forty commands with syntax templates, usage notes, and links to external tutorials and tools like DataGrip and Sequel Pro. It also includes configuration snippets for `max_allowed_packet` and a bash alias for MAMP’s MySQL binary. The content is sourced from a GitHub gist by user Kirun1.

Jul 4, 2017
Loading thumbnail…

Rainbow Perceptual Distance

This chart compares the perceptual uniformity of three rainbow color scales—HSL, HCL, and Cubehelix—by plotting the CIE76 color difference between points 10° apart along each scale. The flatness of each curve indicates uniformity, with HCL perfectly flat by definition and Cubehelix more uniform than HSL. Built with D3 v4, the visualization uses `d3.line` with basis curves, a linear x-scale over 0–360 degrees, and a category10 color scheme for the series. Each data point is computed via `d3.lab` and a custom delta function, with labels positioned along the paths using `textPath`.

Apr 6, 2016
Loading thumbnail…

Gist 9a968aa68c3b9f5c6794fc968609cb7d

This example presents a simple guest list interface built with Android’s XML-based layout system. It shows a vertical linear arrangement containing a title label (“Guest List”) and a single guest name (“Kunal”), using the `LinearLayout` and `TextView` APIs from the Android framework. The code defines the UI structure declaratively, specifying horizontal sizing as `wrap_content` for both elements, though no interaction or data-binding logic is included. The visualization is static, focusing solely on the nested component hierarchy and text rendering rather than any dynamic behavior or external data source.

May 19, 2015
Loading thumbnail…

HTML Select List Of Countries (english and russian versions, sorted by alphabet)

This example provides two HTML `<select>` dropdown lists containing country names, one in English and one in Russian, with both lists sorted alphabetically. The lists are built using standard HTML form elements, with each country represented by an `<option>` tag. The underlying data is sourced from a gist by Kirun1 and is statically embedded directly in the HTML file, requiring no external libraries or JavaScript to function. The visualization serves as a simple, accessible user interface for selecting a country by name.

Dec 18, 2013
Loading thumbnail…

Ajaxify your WordPress comments - no more submitting to a new page.

This example shows a WordPress comment form enhanced with AJAX submission, so users can post comments without a full page reload. It uses the jQuery library’s `.ajax()`, `.serialize()`, and `.submit()` methods in main.js to handle form data asynchronously. The server-side PHP code, hooked into `comment_post`, checks for an `XMLHttpRequest` header and returns a plain-text success or error response. The client displays status messages (“Processing…”, “Thanks for your comment”) and clears the textarea after a successful post, while the gist author (Kirun1) provides the code for integration into a `functions.php` file.

Jun 25, 2013
Loading thumbnail…

HTML5 GPS

This example shows a live GPS track on a Google Map, plotting the user’s current position with a custom marker whose icon updates as location accuracy improves. It uses the Google Maps JavaScript API and the browser’s `navigator.geolocation.watchPosition` method to continuously update the map center and zoom level based on reported precision. The code also accumulates a data log of latitude, longitude, accuracy, and elapsed time, which can be exported by clicking the marker.

Jul 20, 2012