Roman Tolmachev

@tolmachevroman·5 public vizzes

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower across a sample of automobiles, with tooltips revealing each vehicle’s name. Built with the Vega-Lite API, it uses `vl.markPoint` and `vl.encode` to map the numeric fields onto x and y axes, while loading data via D3’s `csv` function from a remote dataset. The chart renders to SVG using Vega’s view, with a custom configuration that removes axis domains and adjusts font sizes for readability.

Aug 26, 2024

Loading thumbnail…

Fork of Mouse Follower

A React application tracks the mouse and renders a circle that follows it across an SVG canvas. The component uses React hooks—`useState` to store the mouse position and `useCallback` for the move event handler. The SVG element listens for `onMouseMove` events, updating the circle's `cx` and `cy` coordinates based on the client X and Y values. The circle has a fixed radius of 30 pixels, and the viewport is 960 by 500 pixels. React DOM renders the app into a root div, with no external data source.

Aug 26, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying summary statistics about the dataset in a large text element. The code uses D3 v5’s `d3.csv` method to fetch the remote data asynchronously and then computes the file size in kilobytes, row count, and column count using `d3.csvFormat` and the parsed array’s properties. Alternative approaches using `fetch` with `async`/`await` and `d3.csvParse` are also included as commented-out code, along with a nested-promise “pyramid of doom” example for comparison.

Aug 26, 2024

Loading thumbnail…

Fork of Hello HTML

This example constructs a cartoon face using React components and renders it as SVG. It builds on the “Hello HTML” template, using a yellow circle for the background, two black circles for eyes, and a d3 arc path for the mouth. The `FaceContainer` handles the SVG sizing and coordinate translation, while the `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components accept props for positioning and dimensions. The visualization uses React 18 and D3 v7, with all geometry defined through simple circle and arc functions.

Aug 26, 2024

Loading thumbnail…

Fork of Circles with D3

A fork of D3 circles rendered as colorful, semi-transparent SVG discs scattered across a pale green background. The visualization demonstrates the D3 General Update Pattern, binding an array of circle objects to SVG elements using `selectAll`, `data`, and `join` to set `cx`, `cy`, `r`, `fill`, and `opacity` attributes. The code imports `select` from d3 version 7.8.5 and dynamically sizes the SVG to match its container.

Aug 25, 2024