Skip to main content
100%

Gist 685be236084822f3c519d8d76ca3ba43

✓ Published0🌍 Public
Aamazingandyyy
Last edited Jul 28, 2020
Created on Jul 28, 2020

This visualization demonstrates language switching in a web interface, showing how the interface text changes between English and Traditional Chinese. The example uses the i18next library to manage internationalization, with a button that triggers a language change when clicked. The code imports the i18n instance and calls `i18n.changeLanguage("zh_TW")` to switch the displayed strings to Traditional Chinese. The interface is rendered with React, and the language toggle is bound to a div element with an onClick handler. The visualization focuses on the interactive translation of UI labels rather than representing data.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 27ff27cb10298f8054b9f21e1a287102

This example demonstrates a React application that uses the `react-i18next` library to handle internationalization, displaying a translated string via the `t('testing')` function. The code shows how the `withTranslation` higher-order component is applied to a component, enabling access to translation resources. It relies on the i18n configuration from the `i18n.js` file, which sets up the translation context and provides the `t` function for retrieving localized text. The rendering approach is component-based, with the translated output being inserted into the React tree.

Aamazingandyyy
70% match
Loading thumbnail…

i18n-railslove

This example demonstrates a React-based internationalization setup for a mobile app, showing how language resources are organized and loaded for seven locales (Arabic, German, English, Persian, French, Russian, and Turkish). It uses `i18next` combined with `react-i18next` and `expo-localization` to detect the system language and select the appropriate JSON resource files. The `i18next-parser` configuration automatically extracts translatable strings from JS/JSX source files, generating locale-specific JSON files with sorted keys. A custom `changeLanguage` function allows runtime language switching, while a fallback to English ensures robustness. The code also includes a script to check that all translations are clean and complete.

PP3nny
62% match
Loading thumbnail…

Gist cd3cd287bdc26f3a310b12096be56102

This interactive timeline charts a developer’s evolving tech stack from 2014 to 2017, with planned tools for the future. It uses a force-directed graph via `d3.forceSimulation` to position nodes representing languages, frameworks, and APIs, while edges connect each technology to the year it was adopted. The data comes from a Markdown file listing monthly entries, rendered as a React component that parses the file into nodes and links. Hovering reveals tool names, and the graph’s layout adapts dynamically to the growing list of skills.

Aamazingandyyy
61% match
Loading thumbnail…

vue-i18next demo

This example demonstrates a minimal Vue.js interface that renders translated text strings from the i18next library, displaying the English and German values for keys like “foo” and “bar.baz”. It uses the VueI18Next plugin and the VueParams plugin to set the active language to English. The i18next library is initialized with inline translation resources, and the Vue instance binds to a template containing `$t` interpolation calls. The code relies on the vue-i18next integration rather than any custom rendering or data fetching.

TThomasG77
59% match
Loading thumbnail…

Gist 16f833f25c52e08f53e5255e4db05a2e

This example shows a real-time typing game where a user’s input is matched against a target text, displaying victory and elapsed time in milliseconds. The code uses React state and event handlers (`onChange`) to update the displayed text as the user types. It renders the current user input in an input field and shows a congratulatory message once the correct text is entered. The visualization relies on basic DOM updates rather than a charting library, focusing on interaction feedback through a simple JSX template.

115Dkatz
59% match
Loading thumbnail…

Gist a4935630d6e5556da93e20fa14c93ebd

This visualization displays a JSON file listing Chrome browser command-line switches, each with its associated condition and explanation. It uses a WebGL-rendered canvas to present the data, likely as a hierarchical or force-directed graph, where each switch is a node. The rendering relies on a custom WebGL pipeline or a library like Three.js to draw the nodes and links, while the JSON data is parsed and bound to visual elements. The graph shows the relationships and groupings of these switches, such as the prefetch profiles and process types, making the structure of Chrome’s internal flags visible at a glance.

HHugoberry
58% match
Loading thumbnail…

Gist 03a1a4db64f2950e5b77e675ae4b0e99

This example shows an interactive gap chart built with React, where a small multiple grid displays the development of the selected indicator across different countries. The visualization combines data points with a line chart, using a React component to render the chart and a geographic map to highlight the current country. The code relies on the `d3` library for data binding and SVG rendering, with the map using `d3.geoPath` and the line chart updating through a `transition` on the chart’s parameters. The source data appears to be a JSON file containing country-specific statistics.

DDanielAguirre
58% match
Loading thumbnail…

Taobao User Behavior Interactive Visualization

An interactive line chart visualizes daily total user behavior counts across nine dates for Taobao users. A dropdown menu selects among three individual users, an average baseline, and a default view, triggering smooth 500-millisecond transitions that animate the circles and connecting lines. The visualization uses d3.v6 for scales, axes, and mouseover tooltips, while React manages the selection interface. Data is embedded as JSON, rendered as SVG with light blue circles and lines, and includes a hover tooltip displaying the total behavior count for each point.

CChenYb9807
58% match