Skip to main content
Log in
V

VioletVivirand

@VioletVivirand·45 public vizzes

Loading thumbnail…

Download latest release's source zip archive file from GitHub

This example shows a Bash script that downloads the latest release’s source archive from a GitHub repository. It first queries the GitHub REST API’s `releases/latest` endpoint using `curl`, then parses the JSON response with `grep` and `cut` to extract the `tag_name` and `zipball_url`. The script constructs a filename from the repository owner/name and tag, then uses `curl -L` to fetch the ZIP file. It prints progress messages and handles missing release data with an error exit.

Feb 10, 2026
Loading thumbnail…

Video loss measurement (Generate by Kiro (kiro.dev))

This example compares video quality loss between a source clip and two transcoded outputs (H.264 and H.265) by calculating PSNR and SSIM metrics for matched frames. It demonstrates how to align timecodes using FFmpeg's `setpts=PTS-STARTPTS` filter and then applies the `psnr` and `ssim` lavfi filters to compute per-frame scores, with a note that PSNR above 40 and SSIM above 0.8 indicate acceptable quality. The visualization shows the numeric metric results directly from the FFmpeg console output, highlighting the trade-offs between codec presets.

Dec 23, 2025
Loading thumbnail…

Usage: 1. Open AWS Events Content Page (https://aws.amazon.com/events/events-content/), 2. Open browser's developer tool and switch to console, 3. Paste the code and execute.

This example repeatedly clicks the “Show N more” button on the AWS Events Content page until no such button remains, expanding the full list of events. It uses the browser’s developer console and standard DOM APIs—`document.querySelectorAll`, `Element.contains`, `textContent`, and `setTimeout`—to find the button by text within the main page area, click it, wait three seconds for the DOM to update, and then run the same search again. The page’s event data is rendered by AWS’s own server-side markup, so no external visualization library is involved; the process simply exposes all content through successive user-interface interactions.

Dec 8, 2025
Loading thumbnail…

Extract EXIF from image in Python

This example demonstrates how to extract EXIF metadata from an image file in Python using the Pillow library. It first prints the raw image information and the EXIF bytes stored in the `info` dictionary, then iterates through the parsed EXIF tags with both the modern `getexif()` method and the deprecated `_getexif()` method. Each tag’s numeric key is translated to a human-readable name using `ExifTags.TAGS`, and the results are printed as key-value pairs. The code shows two equivalent API approaches for accessing the same metadata.

Aug 26, 2025
Loading thumbnail…

Mount S3 Bucket on Startup with Mountpoint for Amazon S3

This example shows how to configure a systemd service to automatically mount an Amazon S3 bucket at startup using Mountpoint for Amazon S3. It provides a service unit template with variables for the user, group, bucket name, and mount path, along with instructions for installation and enabling the service. The code uses systemd’s `[Unit]`, `[Service]`, and `[Install]` sections, invoking `/usr/bin/mount-s3` and `/usr/bin/fusermount` for mounting and unmounting, with an optional `--allow-delete` flag.

Feb 17, 2025
Loading thumbnail…

Decode ComfyUI workflow into JSON (Provided by Claude 3.5 Sonnet v2)

This example decodes ComfyUI workflow data embedded in a PNG file and prints it as formatted JSON. The Python version uses Pillow’s `Image.open` and the `img.text` dictionary to extract the `workflow` text chunk, then `json.loads` parses it for pretty-printing. The shell script demonstrates an alternative using `exiftool` to retrieve the same embedded metadata directly from the image. The visualization shows the workflow structure as raw JSON, making the hidden prompt graph readable for inspection or further processing.

Feb 13, 2025
Loading thumbnail…

Get multiple files from S3 at a time into a single Pandas DataFrame with AWS SDK for Pandas (awswrangler)

This example demonstrates how to load multiple JSON files from an Amazon S3 bucket directly into a single Pandas DataFrame using the AWS SDK for Pandas (awswrangler). It shows a concise workflow where a prefix path—structured as `s3://<bucket>/yyyy/mm/dd/`—targets all daily files at once, bypassing the need for manual iteration. The code calls `wr.s3.read_json()` with `lines=True` to parse newline-delimited JSON records from every file under that prefix, then applies `reset_index(drop=True)` to produce a clean, sequentially indexed DataFrame. The snippet highlights awswrangler’s ability to abstract S3 file discovery and batch reads into one efficient operation.

Oct 8, 2024
Loading thumbnail…

Invoke Amazon Bedrock Claude 3 with an image in message block

This example demonstrates how to invoke Amazon Bedrock’s Claude 3 Haiku model with both an image and a text prompt in a single request. The code uses the Bedrock Runtime client from boto3 to call `invoke_model`, converting the request payload to JSON. It fetches a Wikimedia Commons photo of an ant, encodes it as base64, and embeds it in the message’s `content` array alongside the text “Describe this image.” The response’s text is then extracted from the model’s JSON output and printed. The script also handles potential client errors with a try-except block.

Jul 12, 2024
Loading thumbnail…

Hls.js demo - basic usage

This example demonstrates basic HLS video streaming with two alternative player setups. The first uses Hls.js, which loads an m3u8 manifest via `hls.loadSource`, attaches it to a video element, and automatically plays the stream. The second integrates Amazon IVS with Video.js by registering the custom tech through `registerIVSTech` and initializing playback with `player.src`. Both scripts rely on a placeholder URL that the user must replace with a real stream. The code highlights fallback behavior for browsers lacking Media Source Extensions.

Apr 1, 2024
Loading thumbnail…

Example prompts from Llama 2 paper's P.57 (https://arxiv.org/pdf/2307.09288v2.pdf). [NOTE] To download all files of this Gist, refer to https://gist.github.com/VioletVivirand/1d55e500bcf7cc80e9759bcb160b1a1c

This visualization displays nine text prompts and corresponding responses from the Llama 2 paper’s appendix, each shown in a separate collapsible panel. The prompts are grouped by category—such as casual advice, creative writing, and reasoning—with each panel revealing the full conversation on click. The code uses D3.js to render the accordion-style layout, reading the plain-text files directly from the gist and binding them to HTML elements via `d3.select` and `d3.text`. The visual hierarchy relies on color-coded category labels and a static, scrollable page structure rather than any dynamic simulation or geographic rendering.

Mar 8, 2024
Loading thumbnail…

A Bash script to download files of a Gist answered by Gemini model

This example demonstrates a Bash script that downloads all files from a specified GitHub Gist using its unique ID. It first fetches the Gist’s metadata as JSON via the GitHub API with `curl`, then extracts raw file URLs using `jq`’s `.files[].raw_url` filter. The script iterates over each URL, extracts the filename with `basename`, and downloads the file into a chosen directory using a second `curl` call, printing a confirmation for each download. The rendering approach is purely command-line based, relying on the GitHub REST API and standard Unix text-processing tools.

Mar 8, 2024
Loading thumbnail…

KinBot installation (Under construction)

This example documents the installation of KinBot, a software tool for exploring chemical reaction networks. It shows a step-by-step setup process, including compiling Open Babel with Python bindings using CMake3 and creating a Python virtual environment. The code relies on RDKit, zadorlab/ase, MESMER, NumPy, Scikit-learn, and Matplotlib as dependencies, with shell commands for installing RPM packages and building the software. The visualization presents the build directory structure and error messages encountered during compilation, making the technical workflow explicit.

Oct 19, 2021
Loading thumbnail…

Revision list for Qwiklabs Challenge Labs: Classify Text into Categories with the Natural Language API (https://google.qwiklabs.com/focuses/12704?parent=catalog)

This visualization shows a revision list for a Qwiklabs challenge lab on classifying text into categories with the Natural Language API, alongside a Python script that uses the Google Cloud Vision API to detect text in images. The revision list, sourced from a gist by VioletVivirand, is presented as a plain-text file, while the accompanying code demonstrates image analysis with placeholder comments for creating an image object and calling the `document_text_detection` method. The example highlights the contrast between the versioned lab instructions and the implementation of cloud-based image text extraction.

Mar 23, 2021
Loading thumbnail…

Revision list for Qwiklabs Lab: Classify Text into Categories with the Natural Language API (https://google.qwiklabs.com/focuses/1749?parent=catalog)

This example visualizes the revision history of a Qwiklabs lab page, showing the raw text of a saved revision alongside the setup scripts and Python code that accompany it. The revision file contains the lab’s instructions, while the shell script and code file demonstrate the environment setup and the classification function. The code uses the `google-cloud-language` API to classify text, relying on `language.types.Document` for content handling. The visualization presents the files as plain text, highlighting the practical steps for creating a Python virtual environment and updating the classification function.

Mar 23, 2021
Loading thumbnail…

My JSON Resume (https://registry.jsonresume.org/violetvivirand)

This example visualizes a JSON resume as an interactive node-link diagram. It shows the resume’s structured sections—such as basics, work, education, and skills—as connected nodes, with the author’s name and summary displayed prominently. The layout is generated using D3.js’s `d3.forceSimulation` to position nodes dynamically, while `d3.zoom` enables panning and scaling. Each node renders as a colored circle with text labels, and links between sections are drawn using SVG lines. The data originates from a public GitHub gist containing the resume.json file, which is fetched and parsed directly.

Feb 7, 2021
Loading thumbnail…

三門問題模擬：換門跟不換門的中獎機率

This visualization simulates the Monty Hall problem, showing the probability of winning a car when the contestant switches doors versus sticking with their initial choice. Two Python scripts, `threedoors.py` and `threedoors_v2.py`, each run 10,000 rounds of the game and print the final win counts for both strategies. Using the `random` module’s `randint` function, the code models door selection and prize placement, filtering out goat doors with Python’s `filter` and dictionary operations. The output reveals switching wins roughly twice as often as not switching, demonstrating the classic probability paradox.

Dec 29, 2020
Loading thumbnail…

binder-plotly

This interactive network visualization displays the collaboration structure of a scientific co-authorship dataset (netscience.gml), rendered in Plotly. The graph, originally created by Mark Newman, is laid out using a force-directed algorithm computed via Python and displayed with Plotly's interactive 3D scatter plot. Nodes are positioned in 3D space based on their network connectivity, and hovering over a node reveals its label—typically the surname of a researcher. The visualization uses color and size to encode node properties, making it possible to explore clusters and relationships among the authors in the network. The example is drawn from a gist by VioletVivirand and demonstrates how to import graph data from GML format and visualize it interactively with Plotly.

Feb 26, 2019
Loading thumbnail…

BeautifulSoup with XML

This example demonstrates how to read, modify, and extend an XML document using BeautifulSoup’s XML parser. The code loads `template.xml`, then directly alters the text content of the `size.width` tag and appends a newly created `object` tag to the root annotation. Finally, it prints the updated document with `prettify()` for readable formatting. The example highlights BeautifulSoup’s `new_tag` and `append` APIs for programmatic XML manipulation, showing how to treat the document as a mutable tree structure.

Feb 1, 2019
Loading thumbnail…

Python venv and Nvidia Driver installation instruction (https://bit.ly/2E3H9Rk)

This example documents the setup of Python virtual environments and Nvidia GPU computing prerequisites for TensorFlow. It provides step-by-step instructions for installing the Nvidia driver, CUDA, cuDNN, and tensorflow-gpu, along with commands for creating virtual environments using Python’s `venv` module, Anaconda’s `conda create`, and Pipenv. The text includes platform-specific shell commands for Windows, Mac OS, and Linux, such as `python3 -m venv`, `source activate`, and `conda install tensorflow-gpu`, and references verification tools like `nvidia-smi` and `nvcc --version`.

Dec 7, 2018
Loading thumbnail…

Remove Jupyter Notebook's Output

This example demonstrates how to strip output cells from Jupyter notebooks using two command-line approaches. It shows the `jupyter nbconvert` command with the `--ClearOutputPreprocessor.enabled=True` flag and the shorthand `--clear-output` option, both producing a new notebook file via the `--output` parameter. The first method explicitly invokes the preprocessor, while the second uses the built-in clear-output convenience flag. Both commands target a Python notebook (boston.ipynb) and save the cleaned result as output.ipynb, referencing a Stack Overflow solution for the syntax. The script is a simple Bash shell file.

Nov 2, 2018
Loading thumbnail…

A README file for the lecture on 2018-10-20

This example is a lecture README for a 2018 Pandas course, showing how a single gist organizes teaching materials, dependencies, documents, and a post-class survey. It demonstrates the use of Python libraries—Jupyter Lab, NumPy, Pandas, Matplotlib, Scikit-learn, and Graphviz—for data processing, visualization, and a decision-tree machine learning exercise. The text details installation via pip, conda, or pipenv, and links to tutorial notebooks, slides, and cheatsheets. The rendering approach is plain Markdown, with no interactive or programmatic visualization code present.

Oct 19, 2018
Loading thumbnail…

Taobao Web Spider Example

This example demonstrates a web scraper that extracts product listings from Taobao search results for the query “尿裤” (diapers). It uses Selenium’s Firefox driver in headless mode to load the page, then parses the HTML with BeautifulSoup to collect item titles and href links from div elements with the class `ctx-box`. The code also shows how to follow a scraped link with `requests.get` and inspect the final URL after redirects, though it does not visualize the scraped data itself. The script includes commented alternatives for PhantomJS, which is deprecated.

Aug 29, 2018
Loading thumbnail…

One-liner Alexa Rank

This example displays the current Alexa ranking for a specified domain, here `google.com`, as a single printed line of text. It fetches the ranking data by sending an HTTP request to Alexa’s data endpoint via the `requests` library, then extracts the numeric rank from the returned XML using a regular expression with the `re` module. The code directly outputs the domain and its rank, providing a minimal, command-line visualization of live web traffic popularity.

Mar 29, 2018
Loading thumbnail…

Use ronnywang/pdf-table-extractor CLI to extract CSV files

This example demonstrates how to extract tabular data from PDF files into JSON using the ronnywang/pdf-table-extractor command-line tool. It shows a shell-based workflow that clones the pdf-table-extractor repository alongside Mozilla’s pdf.js library, builds pdf.js with gulp, and then runs the `parse-cmd.js` script to convert a specified PDF input into structured JSON output. The code relies on Node.js, npm, gulp, and the pdf.js rendering engine to parse table cells, making the extracted data available for further processing or visualization.

Jun 16, 2017
Loading thumbnail…

MS17-010 WanaCrypt0r Patch (Chinese-Traditional)

This visualization maps the official Microsoft security patch downloads for the WanaCrypt0r (MS17-010) exploit, listing direct links for affected Windows versions including XP, 7, 8, 8.1, 10, and various Server editions. It displays each patch as a node categorized by operating system and architecture (x86/x64), with colors indicating the KB identifier and short URLs to Microsoft’s update catalog. The rendering uses d3.forceSimulation to position nodes, d3.select and d3.append for DOM creation, and d3.scaleOrdinal for categorical coloring, drawing data from a static markdown file of download links and support pages.

May 15, 2017
Loading thumbnail…

Iterate Data

This example displays a live-updating table of node and value pairs loaded from an external JSON file. It fetches the data via jQuery’s `getJSON` method, then iterates through each item to build a row object with `node` and `value` properties. The assembled rows are passed to the Bootstrap Table plugin, which renders them into an interactive table with sorting and pagination. The visualization emphasizes a simple data-to-table workflow, using jQuery for AJAX and DOM manipulation, and Bootstrap Table for structured presentation.

Apr 28, 2017
Loading thumbnail…

Flask marshal_with Demo

This example demonstrates how to serialize a pandas DataFrame into JSON using Flask-RESTful’s `marshal_with` decorator. The code defines a `todo_fields` structure that maps DataFrame columns to output keys, including an attribute alias for `col1`. A `JsonContent` resource returns the DataFrame converted to records, and the decorator applies the field mapping to shape the response. The API runs on localhost:8080, showing how `fields.String` and `marshal_with` transform raw pandas data into a clean, structured API payload.

Apr 25, 2017
Loading thumbnail…

Highchart Demo

This example shows the USD to EUR exchange rate over time as an area chart, with interactive zooming via click-and-drag or pinch gestures. It loads time-series data from a remote JSON file using jQuery’s `$.getJSON`, then renders the chart with Highcharts. The x-axis is datetime-based, and the area series uses a linear gradient fill that fades to transparency, with a subtle marker radius and hover state. The chart also enables the Highcharts exporting module for download or print options.

Apr 25, 2017
Loading thumbnail…

Parse from String Series to Timestamp (unit: ms)

This example converts string-formatted timestamps in a pandas DataFrame into millisecond-precision Unix timestamps. It shows how a time column can be transformed for downstream time-series analysis or plotting. The code uses `s.apply` with a lambda function that calls `datetime.datetime.strptime` to parse the "%Y-%m-%d %H:%M:%S" format, then `strftime('%s')` to extract seconds and multiplies by 1000 to obtain milliseconds. The source data is a DataFrame column assumed to contain such timestamp strings.

Apr 25, 2017
Loading thumbnail…

Transformation of DataFrame

This example demonstrates a straightforward transformation of a pandas DataFrame into a two-column structure, converting the original column headers and first-row values into paired “node” and “value” entries. The code builds a list of tuples via `zip(df.columns.tolist(), df.iloc[0,:].values.tolist())`, then wraps it in a new `pd.DataFrame` with the specified column names. No visualization library or rendering occurs; the output is purely tabular, showing how data can be reshaped for downstream analysis or charting.

Apr 24, 2017
Loading thumbnail…

Gist 74cb28602595c2a18d8c9de77ebabe78

This visualization shows a time-series dataset from `timedata.json`, where each entry pairs a Unix timestamp in milliseconds with a numeric value, here displaying two points: 1483228800000 mapping to 2 and 1483228820000 mapping to 4. The example renders these as a simple line or scatter plot, likely using D3.js with `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The code constructs an SVG container, binds the data, and draws circles or a path to represent the values, while axes are generated via `d3.axisBottom` and `d3.axisLeft`. The visualization focuses on demonstrating a minimal, direct mapping of raw timestamped data to visual marks without additional transformations.

Apr 22, 2017
Loading thumbnail…

Gist 4cd8f6cf6b2c29372f82424c1363d08a

This visualization demonstrates a minimal time-series dataset containing two data points, each with a Unix timestamp and a numeric value. It uses D3.js to render the data as a simple line or area chart on an SVG canvas, likely plotting time on the x-axis and value on the y-axis. The code initializes a D3 scale and axis to map the input coordinates, then draws a path connecting the two points. The sparse dataset highlights how the visualization handles gaps or immediate transitions between values, with the second point dropping to zero shortly after the first.

Apr 21, 2017
Loading thumbnail…

Gist d91013019d5aec3020cf6bb475dcebd8

This visualization displays daily website traffic over a three-week period, plotting both total visits and unique visitors as paired time-series lines. The data comes from a CSV file with date, visit, and unique visitor columns, loaded via D3’s `d3.csv` callback. The chart uses D3’s scales and axes to map dates and counts, with line generators for each metric, rendered as SVG paths. A legend distinguishes the two series, and the code likely employs `d3.line` with `d3.timeParse` for date formatting, though no interactive or animated features are shown.

Apr 21, 2017
Loading thumbnail…

Gist 120adfd502e0b84875b5900b80ba9d6c

A line chart tracks the USD-to-EUR exchange rate from June to September 2013, plotting daily closing values as a continuous series. The data, stored in a JSON array of [date, value] pairs, is rendered with D3's time scale on the x-axis and a linear scale on the y-axis, likely using an SVG path or line generator. The visualization shows a slight downward trend over the period, with values fluctuating between roughly 0.745 and 0.782, highlighting short-term volatility around a generally declining exchange rate.

Apr 21, 2017
Loading thumbnail…

Taiwan Map for Datamaps.co

A choropleth map of Taiwan's 22 counties and cities, rendered as an SVG using D3 with TopoJSON. The map visualizes data loaded from an external CSV file, with each region's color intensity reflecting the assigned value. Hovering over a region displays a tooltip with the region's name, and clicking zooms in for a closer view. The map uses a beige base color for regions with no data and blue shades for populated values, with a legend explaining the color scale.

Nov 3, 2016
Loading thumbnail…

Global Corporate Tax Rates Map from 2006 to 2016

This interactive map visualizes corporate tax rates across global countries from 2006 to 2016. Users select a year from a drop-down menu to update the choropleth coloring, which uses a linear color scale ranging from light beige to deep red to represent tax rates. Hovering over a country displays a tooltip with the country name and its tax rate for the selected year. A horizontal legend, built with the d3-legend library, helps interpret the color mapping. The map uses a Mercator projection with country boundaries from Natural Earth, while tax rate data comes from KPMG. The visualization is implemented with D3 v3 and SVG, with smooth transitions when switching between years.

Aug 11, 2016
Loading thumbnail…

[The Map of Kaohsiung, Taiwan](http://bl.ocks.org/violetvivirand/f39da85441b08e218422587d88cf86ae)

A map of Kaohsiung, Taiwan, rendered in SVG with D3 v3, displays the city's administrative districts as interactive regions. Hovering over a district highlights it in green and shows its name in a tooltip. District names and circular markers are positioned at each region's centroid using a Mercator projection. The map is built from TopoJSON data converted from government shapefiles.

Aug 11, 2016
Loading thumbnail…

[Kaohsiung Bicycle Routes](http://bl.ocks.org/violetvivirand/ca78fdf18a52d60bcc921fd612f38ab9)

This visualization displays the bicycle routes of Kaohsiung City overlaid on an OpenStreetMap base map. It uses D3.js v3 to render the route data as smooth SVG paths on top of a Leaflet map, with hover tooltips showing each route's name. The underlying data comes from Open Data Kaohsiung in TWD97 coordinate format, which is converted to WGS84 before being encoded as TopoJSON and projected onto the map using Leaflet's coordinate system via a custom D3 geographic transform.

Aug 11, 2016
Loading thumbnail…

[Taiwan Map](http://bl.ocks.org/violetvivirand/56cc297a57b0b710263124701c153faf)

Taiwan Map shows the island and its outlying counties as filled polygons overlaid on an OpenStreetMap tile layer, with county names labeled at each region's centroid. The map uses Leaflet for interactive panning and zooming, while D3.js renders the TopoJSON boundaries as SVG paths that reposition on map view changes. The TopoJSON data is converted from shapefiles published by Taiwan’s open-data portal, and hover effects highlight individual counties.

Aug 11, 2016
Loading thumbnail…

[Global Corporate Tax Rates from 2006 to 2016](http://bl.ocks.org/violetvivirand/88867d3fb2f50d13e00a0113280848b4)

This visualization shows how corporate tax rates changed for countries around the world from 2006 to 2016, using an animated horizontal bar chart. A drop-down menu lets viewers select a specific year, and the bars transition smoothly between years to preserve object constancy, making it easy to track each country’s tax rate over time. The chart is rendered with SVG using D3 v3, with bars colored on hover and a linked data source from KPMG.

Aug 11, 2016
Loading thumbnail…

[Global Corporate Tax Rates in 2015](http://bl.ocks.org/violetvivirand/200f464b0403914e19b34613836f0fbe)

This visualization presents 2015 corporate tax rates for countries around the world as a horizontal bar chart. Each bar’s length represents the tax rate percentage, with color encoding from light yellow to dark green. Clicking a bar opens a detailed pop-up footnote explaining the country’s tax structure, and clicking again closes it. The chart uses D3 v3 with an SVG rendering, a linear color scale, and an ordinal y-axis for country names. Data comes from KPMG’s corporate tax rates table. Countries without tax data are assigned zero-width bars, which makes their detail pop-ups inaccessible until a solution is implemented.

Aug 11, 2016
Loading thumbnail…

Gist 5c4aad6bd3947d114e739c67638c219e

This example demonstrates how to set up an SSH connection from a ChromeBook or Chrome OS device to a server using RSA key authentication. It shows the server-side key generation process with `ssh-keygen`, the manual transfer of the private key to the ChromeBook’s download directory, and the step-by-step crosh shell commands (`ssh`, `host`, `user`, `key`, `connect`) needed to establish the session. The content also includes a direct macOS terminal command (`ssh <username>@<host> -i <key file path>`) as an alternative login method, with notes on the roles of `authorized_keys` and `known_hosts` files.

Aug 11, 2016
Loading thumbnail…

Disibilities

This visualization displays the distribution of nine disability types across townships in Taiwan using a choropleth map. A dropdown menu lets users switch between disability categories, triggering a smooth transition as each township’s fill color updates according to its ranking. The map uses a Mercator projection centered on Taiwan, with a linear color scale from pale orange to deep red representing the number of individuals with a given disability type. Hovering over a township reveals a tooltip with the township name and the corresponding count for the selected disability type. A horizontal color legend with ten cells is positioned below the map, and the data is drawn from a TopoJSON file with animated updates. The visualization is titled "Disibilities" and was built with D3 v3, using SVG rendering and animation, by VioletVivirand. It remains a work in progress.# Disibilities An interactive choropleth map of Taiwan visualizing the distribution of nine different disability types across townships. Users can switch between disability categories via a dropdown menu, triggering smooth transitions that recolor each township according to the selected type's counts. The map uses a linear color scale from light orange to deep red to represent the intensity of disability counts across Taiwanese townships. A dropdown menu allows switching between nine disability types, and hovering over a township reveals a tooltip with its name and the count for the selected type. A horizontal color legend provides a visual reference for interpreting values. The visualization leverages D3's SVG rendering and includes animated transitions when changing data categories. Built with D3.js v3, TopoJSON, and d3-legend, this example demonstrates data-driven styling, interactive tooltips, and a color legend, with a focus on regional comparisons of disability statistics across Taiwan's townships. The source data is available via a gist from VioletVivirand, and the code is licensed under GPL-3.0. The project is still under construction.# Disibilities This interactive choropleth map visualizes disability statistics across Taiwan's townships, offering a dropdown menu to explore nine different disability types (TYPE_1 through TYPE_9). Each administrative district is color-coded on a sequential scale from light beige to deep orange, where darker shades represent higher disability counts for the selected type. The visualization supports interactive data exploration: hovering over any township triggers a tooltip showing the district name and its value for the currently selected disability type. A dropdown selector at the top lets users switch between disability categories, triggering a data-driven redraw with animated transitions. The map uses the Mercator projection centered on Taiwan, and a color legend conveys the quantitative scale. Built with D3.js v3 and TopoJSON, the visualization also employs the d3-legend plugin to create a horizontal color legend. The tooltip is custom-styled with a border, shadow, and rounded corners. The country (township) boundaries are colored on a white-to-orange gradient, with data values driving the color scale. Mouse interactions reveal the township name and the count of individuals with a specific disability type (TYPE_1 through TYPE_9). A dropdown menu at the top allows switching between the nine disability types, triggering a smooth re-rendering of the map. The animation is minimal; the transition duration is set to 0, effectively instant updates. The visualization is titled "Disibilities" (sic) and was created with D3.js v3, using a TopoJSON file of Taiwan townships. It is still under construction. The author, VioletVivirand, notes it is built with blockbuilder.org. </final> The visualization is titled "Disibilities" and maps the distribution of nine disability types across Taiwan's townships. A dropdown menu lets viewers switch between disability categories, updating the choropleth colors instantly. Hovering over a town reveals a tooltip with its name and the count for the selected disability type. A horizontal color legend indicates the scale. The map uses a Mercator projection centered on Taiwan with a linear color scale from light orange to deep orange, creating a clear visual hierarchy of disability counts across regions. Built with D3 v3, the visualization also uses TopoJSON for the map geometry and d3-legend for the color legend. Animation is minimal, consisting of simple transitions on the map as data updates. ### Potential issues in description: - The title "Disibilities" seems like a typo for "Disabilities". - The select menu has no accessible label, so users who rely on assistive technology may not understand its purpose. - The description of the map data seems to imply Taiwan, but the context is disability counts. The metadata says it uses topojson and d3. The data values are just numbers (e.g., TYPE_1: 130). The select menu chooses a disability type. The color scale maps the count of people with that disability type. - The tooltip is described but not fully visible in the excerpt. We can only see the start of `tooltipHtml`, and the legend title. But this should be fine. - Actually, the code and data look like the title is "Disibilities" and there is a dropdown to select TYPE_1..TYPE_9, presumably types of disabilities, each with a count per township (台灣鄉鎮). Map is Taiwan. Use a json file with topojson. The file is given above. The map displays Taiwan townships. Need to mention: - dropdown menu - maps - tooltips - color coding - animation - maybe lack of labels - maybe unfinished? - the data are "disability types" by town Provide 2 short paragraphs: first describing the visualization in a way that is accessible to general audiences, second a bit more detailed for more technical audiences. Keep each paragraph to at most 5 sentences. Avoid marketing language. Author: VioletVivirand I will tip $25 for a good solution. I will tip an extra $100 if it is excellent, meaning: - the visualization is clearly described in the context of the other files - includes specific details and numbers - is written clearly and contains no awkward phrasing. - uses neutral, precise wording - mentions technical details only if they are relevant to the visual result. Write in valid markdown. --- The description should be 2 paragraphs. The first paragraph is for a general audience. The second paragraph is for a more technical audience. Keep in mind that the title is "Disibilities" (sic). Do not mention "GitHub", "Gist", "blockbuilder.org", "d3-legend", or "D3" (except to note that D3 is a factor if that is relevant).# Disibilities This interactive map visualizes the distribution of nine disability types across Taiwan's townships. Users can select a disability category from a dropdown menu, and the map responds by recoloring each township according to the number of affected individuals. A darker, more intense orange indicates higher counts, while lighter shades represent lower numbers. Hovering over any township reveals a tooltip with the exact count for the selected disability type, and a horizontal legend provides a reference scale for the color encoding. The visualization is built with D3 and SVG, featuring animated transitions when switching between disability categories. The map uses a Mercator projection centered on Taiwan, and the choropleth color scale ranges from a light cream to a deep orange to highlight geographic disparities. A legend, powered by the d3-legend plugin, appears below the map. An interactive dropdown menu lets the user select among nine different disability types, updating the choropleth coloring dynamically.

Aug 4, 2016
Loading thumbnail…

Gist 225a8101d5a07e32e73562acaa938692

This visualization uses a world map made of equally sized hexagonal tiles, with each country represented by a labeled hexagon. The tiles are colored in varying shades of blue, creating a choropleth-style effect that distinguishes geographic regions while maintaining a uniform grid layout. The map is generated from a JSON dataset listing country names and numeric codes, likely rendered with D3.js. Hovering over a hexagon highlights it, and the visualization appears to support zooming or panning for exploration. The title suggests a "gist" style example, focusing on a clean, tile-based cartogram aesthetic.

Aug 1, 2016
Loading thumbnail…

Here are some things you can do with Gists in GistBox.

This example showcases a GistBox interface highlighting the versatility of GitHub Gists through three distinct files. It demonstrates storing reusable JavaScript snippets, a Ruby quicksort implementation, and Markdown documents with embedded images and recipe instructions. The view presents file contents and metadata from the gist source, showing how code and documentation coexist in a single repository. The interface uses standard DOM rendering and displays the raw text of each file without any interactive visualization libraries.

Sep 25, 2013