Daniel Tkach

@danieltkach·7 public vizzes

Fork of Line Chart with Multiple Lines

This fork of a line chart displays a week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render multiple lines in SVG, with each line representing a city. The code constructs time and linear scales for the axes, and applies a curve basis smoothing to the line paths. It also includes a custom color legend component and sorts the city lines in descending order based on their final temperature value.

Jan 12, 2022

Loading thumbnail…

Fork of Organization Graph Diagram

This graph diagram visualizes the network of connections for the Kenneth Rainin Foundation, with nodes representing individuals and links showing their relationships. The visualization uses D3.js version 6.2.0, specifically leveraging the `d3.forceSimulation` API to drive a physics-based layout with force-directed algorithms including `forceManyBody`, `forceLink`, and `forceCenter`. The SVG rendering displays the graph on a 960x960 canvas. Color schemes are defined in a separate module generated with Paletton, providing distinct palettes for different categories.

Oct 1, 2021

Loading thumbnail…

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, with population values from the United Nations World Population Prospects 2019 dataset loaded via `d3.csv`. The visualization uses React components for rendering SVG elements, with D3 scales and formatting applied through `scaleBand`, `scaleLinear`, and `format`. Bottom and left axes are constructed as separate React components, and each bar includes a native SVG `<title>` element for tooltips. The chart is styled with custom tick and mark colors.

Sep 30, 2021

Loading thumbnail…

Fork of Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960 by 500 viewport. The component tracks pointer movement through an `onMouseMove` event handler, updating positional state via `useState` and `useCallback`. The circle’s center coordinates (`cx`, `cy`) are bound to the current mouse position, while its radius is fixed at 30 pixels. React 16.9 and ReactDOM manage the UI, with the SVG scene updating in real time as the user moves the mouse.

Sep 26, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the browser window, with black-outlined circles for the face and eyes, and an optional mouth shape. The SVG is generated using React and ReactDOM, with dimensions and positions calculated from the window’s inner width and height. Circle elements are drawn via React’s SVG support, and the face is centered using a group transform that translates to the midpoint of the viewport.

Sep 25, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a responsive smiley face graphic centered within the browser viewport. The visualization shows a large yellow circle with a black outline, two smaller circles representing eyes, and a hidden mouth element that is defined but not rendered. Built with React and ReactDOM, the code calculates the radius, eye positions, and offsets dynamically based on the window’s dimensions. The SVG is rendered with standard attributes such as `r`, `cx`, `cy`, and `stroke-width`, using the `transform` property to center the group. The data is hardcoded within the JavaScript, with no external datasets or interaction logic present.

Sep 25, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a single, static circle rendered via inline SVG within a minimal HTML page. The circle is created using the SVG `<circle>` element with a radius of 100 units, but no fill, stroke, or positioning attributes are specified, so it appears as a black outline at the default origin. The code uses no external JavaScript libraries or data sources; it relies solely on basic HTML and SVG markup. The rendering approach is direct browser parsing of inline SVG, with no interactivity or dynamic behavior included.

Sep 25, 2021