Tell us what works and what could be better. We read every submission.
@antichaos·19 public vizzes
This example retrieves a seven-day weather forecast for San Diego from the OpenWeatherMap One Call API and converts it into a pandas DataFrame structured for Tableau analytics. The code transforms raw JSON fields into normalized columns, including temperature conversions from Kelvin to Celsius and Fahrenheit, humidity as a decimal, and wind direction mapped to sixteen-point wind rose labels. It also generates icon URLs for weather conditions and converts Unix timestamps for sunrise, sunset, and moon phases into UTC datetime strings. The final output is a dictionary of lists ready for Tableau ingestion.
This example shows how to export a Tableau view’s underlying data to a CSV file via the Tableau REST API. It connects to a Tableau server using personal access tokens, iterates through all workbooks to find a matching workbook and project, then populates the specified view and writes its CSV content to a local file. The script uses the `tableauserverclient` library, with `TSC.Server`, `TSC.PersonalAccessTokenAuth`, `TSC.Pager`, and `server.views.populate_csv` to retrieve the data, and logs success or failure to `tableau2csv.log`.
This visualization traces the lifecycle of a failed database creation attempt in Hyper, from a log file captured during a Tableau session. It shows the chronological sequence of query events, including initialization, transient resource creation, and a file-creation error, followed by the system’s cleanup and the query-result message. The data includes timestamps, process IDs, severity levels, and key-value details. The visualization uses this event log to highlight the error path—specifically the fcntl(51) "Inappropriate ioctl for device" failure—and the brief elapsed times at each stage.
This example embeds a Tableau Public dashboard that visualizes data from the ACLED range selector. The page uses a standard Tableau embed code with a placeholder `<div>` and an `<object>` element configured via `<param>` tags. The JavaScript API `viz_v1.js` dynamically adjusts the visualization’s width and height based on the container’s offset width, setting it to 1000×1227 pixels for larger screens or 100% width with 1177 pixels height for smaller displays. The dashboard includes a toolbar, static image fallback, and animated transitions.
This example embeds a Tableau public dashboard and demonstrates programmatic filtering through the Tableau Embedding API. The page includes three buttons that trigger JavaScript functions: one applies a filter to replace the state values with Washington and Oregon, another clears the State filter, and the third performs an undo action. The embedded visualization loads from a Tableau public URL with predefined filters for Category and State, displayed in a phone layout with a bottom toolbar. The code uses the `tableau-viz` web component and methods like `applyFilterAsync`, `clearFilterAsync`, and `undoAsync`.
This example shows how to programmatically export high-resolution images of Tableau workbook views, specifically filtering a view to display data for Belgium. The script uses the `tableauserverclient` (TSC) Python library to authenticate with a personal access token, iterate through workbooks, and locate a workbook named “Fiche Generator.” It then populates the workbook’s views, sets an image request option with high resolution and a filter on the “SelectedCountry” field, and saves each rendered view as a PNG file locally. The code demonstrates the TSC API’s `populate_image` method and `ImageRequestOptions` for customized view rendering.
This example shows how PostGIS builds a composite set of geographic buffers and a projected point for use in a Tableau dashboard. It first creates a donut-shaped buffer by taking the difference between two concentric buffer polygons around a point defined by longitude and latitude. It then projects a new point three times the buffer distance away, rotates it 90 degrees, and buffers it into a small circle. The code uses `ST_MakePoint`, `ST_Buffer`, `ST_Difference`, `ST_Project`, and `st_collect` to assemble the result as a geography MultiPolygon.
This example visualizes relationships among World Bank development indicators for multiple countries using a force-directed network layout. The code employs d3.forceSimulation to position nodes representing indicators, with links connecting them based on shared country data patterns. It uses d3.geoPath to render a world map background, while Canvas getImageData extracts pixel data to determine node placement over geographic regions. The visualization draws from World Bank API datasets, including GDP, poverty rates, education enrollment, and environmental metrics, to illustrate correlations between socio-economic factors across nations.
This example reshapes two country-level datasets into a unified, chart-ready format for visualizing trends over time. It first pivots the CyberSecurityIndex table, converting three separate columns—National Cyber Security Index, Digital Development Level, and their difference—into a long-form structure using a `cross join lateral` with a `values` clause. It then appends rows from the PressFreedomIndex table, retaining its country, ISO code, year, and index value. The SQL uses `CAST` to normalize year and value types, ensuring consistent numeric and text formats across both sources before combining them with `UNION`.
This example shows a Windows batch script that automates Tableau Server maintenance by creating timestamped backups of logs, repository data, and configuration settings. The script uses the `wmic` command to generate a date-time string, then calls Tableau’s `tsm maintenance` and `tsm settings export` APIs to archive log files, perform a full backup, and export topology JSON. It finishes by invoking `tsm maintenance cleanup` to delete logs older than seven days. No visualization libraries are used; the output is purely file-based backup artifacts.
This example displays a Twitter timeline embedded in a web page, dynamically generated from a URL parameter that specifies a list name. The page uses jQuery to extract the `list` query parameter and inject a Twitter timeline anchor element with that list’s URL. JavaScript then rewrites the anchor’s `href` attribute to a hardcoded Twitter list URL, overriding the original link. The Twitter platform’s `widgets.js` script renders the embedded timeline, which shows a stream of tweets from the specified list.
This embedded Tableau visualization presents a dashboard on the Komdecrisis (Dutch debt crisis) data, showing economic indicators and trends over time. The page loads a Tableau Public workbook via the Tableau JavaScript API, using a dynamic iframe that adjusts its width and height based on the container’s size. It relies on the `viz_v1.js` API to render the interactive chart, with parameters for toolbar, transitions, and static image fallback, while the dataset appears to be sourced from a shared Tableau workbook linked by path `shared/885J3HH62`.
This example shows a Tableau dashboard extension that displays the data from a worksheet named "articlelist" in an interactive HTML table. When the user changes a filter on that worksheet, the table reloads to reflect the updated data. It uses the Tableau Extensions API to access summary data and the DataTables jQuery plugin to render the table with features like fixed headers and row striping. The code listens for filter-changed events and re-populates the table dynamically.
This animated chord diagram visualizes relationships between languages, showing connections and flows between them in a circular layout. Built with D3.js, it uses an interactive chord diagram to display pairwise language relationships, with ribbons and arcs representing connection strength. The animation enhances the readability of complex inter-language links. The visualization is rendered using D3.js, with data originally processed via the R package “chorddiag” and adapted for the web with HTML widgets. It is an open-source example (MIT license) created by antichaos and forked from justlebeau’s block, demonstrating how chord diagrams can communicate multidimensional relational data in an engaging, animated format.
A simple SVG scene displays a red circle, a rounded rectangle, and a line on a blank canvas. The circle sits at the center, while the rectangle appears to its left and the line extends diagonally downward. The code uses D3 v4 to append these shapes to an SVG element, setting their coordinates and styling attributes directly. The example demonstrates basic SVG shape creation with D3, including circle, rect, and line elements, without any interactive or data-driven behavior.
A simple SVG scene displays a red circle, a rounded rectangle, and a diagonal line positioned on a fixed 960×500 canvas. The circle sits at the center-left, the rectangle occupies the upper-left area, and the line connects the circle’s center to the lower-right corner. Using D3 v4, the code selects the body element, appends an SVG container, and then creates each shape via `svg.append`, setting attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `x1`/`y1`/`x2`/`y2` directly. No data binding or interactions occur; the visualization is purely static.
Videoland Product is an interactive carousel and detail-page interface for browsing video content, showing how users navigate between a horizontal slider, strip-based playlists, and individual title details. The interface uses CSS slider navigation with data-slide attributes for pager control, and JavaScript click handlers to switch between carousel items, play strips, and open detail pages. It leverages jQuery for DOM manipulation and event handling, while the detail page includes features like season selection, rating display, and expandable "read more" sections, all sourced from a gist by antichaos.
This example tracks clicks on post images in an endless-scrolling blog feed and sends the interaction to a data layer. The code listens for click events on `a.link-post img` elements, then extracts the post’s publication date, image URL, link href, and title from the parent attributes and the image’s `alt` text. It pushes these fields as an `EWclick` event into `dataLayer`, enabling analytics tools to record each click with its associated metadata. The implementation relies on jQuery for event binding and attribute access, with no visual rendering or charting libraries involved.
This example demonstrates how GistBox organizes code snippets for reuse, showcasing JavaScript, Ruby, and Markdown files within a single gist. The JavaScript file logs the `window` object, the Ruby file implements a quicksort algorithm, and two Markdown files store documentation and a recipe with inline images. The visualization relies on GitHub’s gist API and the GistBox interface to present these files as a cohesive, navigable collection, highlighting the platform’s utility for storing functions, notes, and reference material.