Максим Грязнов

@verymoko·7 public vizzes

Fork of IMDb Movie ratings

A stacked bar chart displays the percentage of IMDb ratings across five genre categories, showing how rating distributions differ by genre, from documentaries with high ratings to action films with low ratings. Hovering over each bar reveals a tooltip. The chart uses D3 v7 with `d3.stack` and `d3.scaleBand`, rendering SVG with ordinal color scales and formatted percentage axes. The data comes from a CSV file with pre-computed proportions for each rating bracket per genre.

Feb 8, 2023

Loading thumbnail…

JS outside HTML

A minimal HTML page demonstrates the separation of JavaScript logic from markup by importing a constant from an external module and logging it to the console. The example uses D3’s `select` function to highlight how modern JavaScript modules can be combined with D3 in a plain HTML environment. The page loads D3 v7 via a CDN script tag, while the application code imports from `./something.js` using the `import` statement, showcasing a React-free workflow that still leverages D3’s utilities.

Dec 19, 2022

Loading thumbnail…

D3 Selection Exploration

This example demonstrates how D3’s data join pattern animates a dynamic set of circles, whose count and vertical positions oscillate sinusoidally over time. Using `d3.select` and `d3.range`, it generates an array of points and binds them to SVG circle elements via `selection.data()` and `selection.join()`, updating `cx` and `cy` attributes each frame. The code runs a `setInterval` at 60fps, recalculating data with a time-based sine wave, while `d3` version 7.6.1 manages enter, update, and exit states automatically.

Dec 15, 2022

Loading thumbnail…

Data Visualization with D3 – Full Course for Beginners [2022]

This example creates a full-screen SVG pattern of 100 horizontal and 100 vertical rectangular stripes, each masked by a distinct shape set. Using D3 v7 in a React environment, the code appends elements via `select`, `range`, and `join`. The `renderMask` function defines two SVG masks: one with a white background and black symbol paths, the other inverted. The symbols are generated using `d3.symbol` and `d3.symbols`, positioned across the width, resulting in the stripe layers revealing or hiding different symbol patterns.

Nov 20, 2022

Loading thumbnail…

Ep 13+

A minimalist visualization displays three lines of statistics about a dataset: file size in kilobytes, row count, and column count. Data is loaded from a CSV file containing CSS named colors using d3.csv, then d3.csvFormat calculates the byte length. The computed numbers are rendered as large text in a pre element using DOM textContent updates. This example demonstrates straightforward data loading and basic descriptive metrics without any graphical charting.

Oct 22, 2022

Loading thumbnail…

Mouse Follower

A React application uses an SVG circle to track the mouse cursor across a 960 by 500 coordinate space, with the circle centered initially at the midpoint. The code leverages React's `useState` and `useCallback` hooks to manage and update the cursor position on `mousemove` events. The circle’s position is bound to the mouse coordinates via JSX attributes, rendering a simple interactive visualization that demonstrates real-time state updates in a React-based SVG environment.

Oct 2, 2022

Loading thumbnail…

Smiley Face Part VI

A grid of randomly generated smiley faces appears, each composed of a yellow circular background, two eyes, and an arc-shaped mouth. The faces vary in feature size and placement due to random values passed as props. Built with React and rendered as SVG, the example uses D3's `arc` API to generate the mouth path and `range` to create the array of faces.

Sep 16, 2022