Tell us what works and what could be better. We read every submission.
@amortka·11 public vizzes
This interactive React visualization renders a colorful gradient of animated particles across a canvas. Using SVG and canvas rendering, the application generates a flowing field of colored dots that shift and morph over time, creating a dynamic, heatmap-like effect. The animation smoothly transitions colors and positions, giving the impression of a living gradient surface. The visualization is built with a custom React component that manages the canvas drawing and animation loop, producing a continuously evolving visual experience.
The visualization displays a family tree using dTree, a library built on D3.js, with nodes representing individuals and lines for marriages and lineage. It shows multiple generations, including spouses and children, with gender indicated by node styling (men in light blue, women in pink) and emphasis on certain names through italic text. The code loads data from a JSON file and uses Handlebars templates for rendering node labels, while CSS defines the visual appearance of the tree structure and node classes.
This example demonstrates how JavaScript’s global object changes when a new browser window is opened, using a comparison between the current `window` and a fresh `newWindow`. The code lists any keys present on `window` but missing from the new window, capturing newly added globals in the console. It relies solely on the native `window.open` method and `Object.keys` filtering, with no external libraries. The visualization is purely textual, outputting the array of added global variable names via `console.log`, and does not render charts or graphics.
This example demonstrates a React application that integrates Redux for state management with asynchronous actions via Redux Thunk. It sets up a centralized store using `createStore`, applies the `thunk` middleware, and connects the app through a `Provider` component. The root component is rendered into the DOM with `react-dom`’s `render` method, using `window.__REDUX_DEVTOOLS_EXTENSION__` for debugging. The code shows how to wire together React, Redux, and Redux Thunk, though it does not display any visual data or charting logic, focusing solely on the application’s foundational architecture.
This React example demonstrates a todo-list input form that dispatches an asynchronous action when submitted. The component uses `react-redux`’s `connect` to access the `dispatch` function, and calls `addTodoAsync` (an action creator) with the trimmed input value, logging `'done!'` to the console once the promise resolves. The form prevents default submission, clears the input after dispatch, and disables adding empty entries. The code shows the pattern of binding a Redux action to a user interface event, though it does not render any visualization or charting logic.
This example demonstrates a Redux-based task management flow where users can add todo items either synchronously or asynchronously. It shows how actions like `addTodo`, `setVisibilityFilter`, and `toggleTodo` update the application state, while the async variant fetches a title from the JSONPlaceholder API using `fetch` before dispatching the action. The code uses Redux’s `dispatch` pattern with a thunk-like function to handle asynchronous logic, and it assigns unique IDs via `nextTodoId`. No rendering or visualization library is present; the focus is purely on state management and action creation.
This visualization displays the ESLint configuration rules from a Vue.js project as a structured overview. It shows the custom rule settings, including severity levels, options, and exceptions, alongside parser settings, environment definitions, and plugin usage. The code references ESLint’s configuration API, including `parserOptions`, `env`, `extends`, `plugins`, and `rules`, with specific rules like `import/extensions`, `max-len`, and `no-console`. The data originates from a gist file containing the module.exports object, rendered using Vue’s framework capabilities. The visualization presents the configuration hierarchy and rule parameters in a readable, organized format.
This example renders interactive vector tile maps using Mapzen vector tiles, displayed as SVG paths over a dark background. It uses d3.tile to manage tile loading and d3.zoom for pan and zoom interactions, with a d3.geoMercator projection and d3.geoPath to draw geographic features. The visualization shows roads, water, buildings, parks, and other land-use layers, each styled with distinct colors and stroke widths. Tile data is fetched as GeoJSON from Mapzen’s tile server and rendered dynamically, with a coordinate readout displayed at the bottom.
This example renders a map of the United States using Mapbox tiles, clipped to the country’s land area. A d3.geo.mercator projection positions the map, while the d3.geo.tile helper computes the visible image tiles at the current zoom level. Tile images from Mapbox’s natural-earth-2 layer are placed in an SVG group clipped by a path of the US land topology, with a black stroke outline drawn over the land boundary. The tile loading adapts to the device pixel ratio, ensuring crisp raster tiles on high-density displays.
This example demonstrates a live-reloading web development workflow that combines an Express server with automated browser synchronization. It shows how Gulp orchestrates three tools: Express serves static files from the `public/` directory on port 5000, while Nodemon monitors `app.js` and restarts the server on changes, and Browser-Sync proxies the localhost server on port 7000, watching `public/**/*.*` to inject CSS or HTML updates into the browser without a manual refresh. The setup uses the `gulp-nodemon` and `browser-sync` APIs, with dummy placeholder HTML and CSS files to verify the sync behavior.
This example demonstrates how Gists can store reusable code, full functions, documentation, and even recipes. The JavaScript file logs the `window` object, while the Ruby file contains a quicksort implementation. The Markdown files show how to create project documentation with keyboard shortcuts and a cheesecake recipe with ingredients and directions.