Nick-tsoukas

@Nick-tsoukas·4 public vizzes

Gist 65c9238c951a093c2a34065133d0caf3

This example demonstrates a frontend application built with Nuxt.js and Vue for a punk rock compound website. It integrates Vue Formulate for form handling, Axios for HTTP requests, and Strapi as a headless CMS backend. The interface includes a carousel component, custom typography, and Tailwind CSS styling, with content managed through @nuxt/content and markdown rendering via @nuxtjs/markdownit. The code relies on Vue’s reactive data binding and Nuxt’s server-side rendering to present structured content, while PWA support and ESLint/Prettier configurations ensure a responsive, maintainable application.

Apr 16, 2022

Loading thumbnail…

Gist 8af4d5a12f981c7ef074f22d1aabc0c1

This visualization shows the frontend of Punk Rock Compound, a Nuxt.js-based web application that combines content management, form handling, and carousel displays. It leverages @nuxt/content for markdown-based content, @braid/vue-formulate for form creation, and vue-carousel for image rotations. The code integrates Strapi as a headless CMS backend through @nuxtjs/strapi, while Tailwind CSS and typography libraries handle styling. The application uses axios for API requests and PWA support to enable offline functionality, creating a cohesive user-facing interface for the band’s online presence.

Apr 16, 2022

Loading thumbnail…

DownrightFlashyAttributes created by nick_tsoukas101 - https://repl.it/@nick_tsoukas101/DownrightFlashyAttributes

This visualization demonstrates a dynamic network graph where nodes and links are rendered with animated, flashing attributes. The code uses `d3.forceSimulation` to compute node positions and `d3.transition` with `transition.attrTween` to continuously update visual properties like fill color and opacity. The rendering is done through SVG elements, with each node and link styled using D3's data-join and selection methods. The data source is a gist, and the example shows how to create a lively, attention-grabbing graph by tweening attributes in a custom interpolation loop.

May 16, 2018

Loading thumbnail…

fresh block

This example shows a minimal D3.js visualization: a single SVG text element reading “Hello world” positioned at fixed coordinates. The code uses d3.select to append an SVG container to the body, then creates the text element with attributes for position and styling, including a monospace font. Rendering relies on SVG output via d3’s selection and attribute methods. The visualization is static, with no data loading or interactive behavior, serving as a basic template for starting new D3 projects.

Mar 28, 2018