ErnestoR

@ErnestoR·4 public vizzes

Gist 70b6d2687f7832a6ef333872bb170b2d

This example demonstrates a responsive application layout with a collapsible sidebar navigation, built using React and Tailwind CSS. The sidebar includes a logo, search input, and navigation items with icons from the Untitled UI icon library. It uses Headless UI’s `Transition` and `Dialog` components to animate a slide-in mobile menu with overlay backdrop, while desktop layout relies on conditional `clsx` classes for active states. The code shows a `Sidebar` component that accepts navigation items as props, with default items for Home, Simulations, Feedback, and Resources.

Mar 28, 2023

Loading thumbnail…

Gist a5a48620f47ddaa0208a2b226e4ca111

This example shows a deeply nested, table-like data structure where sensory attributes such as “Aparencia” and “Color” are repeatedly wrapped in layers of “No aplica” headers, ultimately ending in the accessor fields `aparencia` and `color`. The visualization presents this hierarchical arrangement as a column-oriented table, using the `columns.json` configuration to define multi-level grouping. The code relies on a generic table-rendering API, likely from a React-based library like `react-table`, which consumes the `columns` array to generate headers and cells. The rendering approach emphasizes the recursive nesting of metadata rather than a direct visual encoding, with no additional JavaScript libraries such as `d3` or animation shown.

Apr 30, 2022

Loading thumbnail…

ClearTextfield

This example shows a text input field paired with a clearing action, demonstrating how to add an interactive control inside a Material-UI form element. The React code defines a `TextField` with a standard label, and uses `InputProps` to attach an `InputAdornment` at its end position. Inside that adornment, an `IconButton` with the `Clear` icon from the Material-UI icon set acts as the clear trigger, logging to the console on click. The component imports from `@material-ui/core` and `@material-ui/icons`, and is structured as a single reusable function.

Jul 24, 2020

Loading thumbnail…

Vscloud

This visualization shows the extensions and settings from a VS Code configuration file, rendered as a network of interconnected nodes. It displays the relationship between the user’s installed extensions, their publishers, and the overall settings, highlighting the diversity of tools and themes. The visualization uses a force-directed graph layout, likely implemented with a library like d3.forceSimulation, to position the nodes, while the data originates from the `extensions.json` and `settings.json` files. The rendering approach appears to employ a canvas-based drawing method to plot the nodes and connecting lines.

Mar 11, 2020