N

n.koldovsky@gmail.com

@KLM1983·19 public vizzes

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

Multiple countries' cumulative COVID-19 death counts are plotted as thin gray lines on a log-scaled y-axis against time. A Voronoi overlay, generated via `d3.Delaunay` and `d3.delaunay.voronoi`, partitions the chart area so hovering any point highlights the nearest country's full line in black. Implemented in React with D3 v5, the chart loads the Johns Hopkins time-series dataset via `d3.csv` and renders all geometry as SVG, with axes created using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Alot of lines by Country

This chart displays cumulative COVID-19 death counts over time for multiple countries, using a logarithmic y-axis to accommodate wide numerical ranges. Each country is represented by a gray line. Hovering over any point on the chart, enabled by a Voronoi overlay for precise nearest-point detection, highlights the corresponding country's entire trajectory in red and displays a tooltip with the country name, death count, and exact date. The visualization is built with React and D3 v7, fetching data from a CSV file and rendering all elements as SVG.

Loading thumbnail…

inspecting mulltiple lines chart

A multi-line chart displays cumulative COVID-19 deaths over time for each country, using a logarithmic y-scale to accommodate wide value ranges. The React component fetches data from the Johns Hopkins dataset, with each country rendered as a separate path via d3.line and d3.scaleLog. SVG axes are generated through d3.axisBottom and d3.axisLeft, while tick gridlines extend across the plotting area. Colors are randomly assigned per country path each render.

Loading thumbnail…

InspectingLinechart

A line chart displays the global cumulative death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. The chart includes labeled horizontal and vertical marker lines at 10,000 deaths and the most recent date, respectively. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate the SVG path. Axes are rendered via `d3.axisBottom` with custom tick styling.

Loading thumbnail…

Loading data with React

This example demonstrates how React state manages data loaded asynchronously with D3 utilities. A bar chart displays quantitative values with axes, using D3's `scaleLinear` for positioning and `axisBottom` for tick labels. The visualization renders SVG elements generated through React components, with hover interactions highlighting individual bars. Data originates from a CSV file fetched via `d3.csv`, and the loaded dataset populates the chart after a state update triggers re-rendering.

Loading thumbnail…

Color Polished Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus that allow users to independently select which flower measurements to plot on the x- and y-axes. Each iris species is color-coded using a `scaleOrdinal` with a custom palette, while the axes are rendered with `scaleLinear` scales. Built with React and D3 v5, the visualization uses SVG for rendering, with custom `AxisBottom` and `AxisLeft` components for ticks and labels, and hover tooltips showing axis values via SVG `<title>` elements.

Loading thumbnail…

Color Polished Scatter plot with menus with legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the X and Y axes via dropdown menus. A color legend distinguishes the three iris species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading, rendering as SVG with reusable axis and mark components.

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot built with the Vega-Lite API and D3.js, visualizing the distribution of different religions by country, with circle size encoding population. The visualization uses the vega-lite-api library to construct the chart, leveraging the d3.csv loader to fetch data on religion by country from a GitHub Gist. The interface is configured with custom axis styling and tooltip handlers, and is rendered to SVG, adapting its size to fit the browser window.

Loading thumbnail…

Loading and Parsing csv Data

This example demonstrates loading and parsing a CSV file with D3 v7, displaying summary statistics about the dataset in large text. It fetches a remote CSV containing CSS named colors using the `d3.csv` method, which returns a promise that resolves to parsed data. The code then computes the formatted CSV size in kilobytes, counts the number of rows and columns, and renders these values to a `<pre>` element. Commented-out alternatives show the same process using `fetch`, `async/await`, and `d3.csvParse`.

Loading thumbnail…

Organization network graph

This example visualizes a small organizational network with three nodes—Arts Web, Community Visio, and Silicon Valley—connected by two links, rendered as circles and lines in an SVG. It uses D3’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes dynamically, with the charge strength set to -3000 to repel them. Labels are drawn as SVG text elements, and the simulation’s tick event updates circle positions, line endpoints, and label coordinates. The code imports data from a local `data.js` file and runs in a React-compatible setup with d3.v7.

Loading thumbnail…

Conovirus Log Y Axis

This line chart tracks cumulative COVID-19 deaths over time, using a logarithmic Y-axis to accommodate the wide range of values from 1 to the peak total. The data comes from a CSV file of global death counts, loaded via `d3.csv` and parsed with `timeParse`. The chart is rendered as an SVG using React, with scales created by `scaleTime` and `scaleLog`, a path generated by `line()`, and gridlines and axes drawn by `axisBottom` and `axisLeft`.

Loading thumbnail…

Summarizing Data Coronavirus

This visualization summarizes global COVID-19 death data by displaying a single large number: the total deaths on the most recent date in the dataset. It loads an archived time series CSV from the CSSEGISandData GitHub repository using `d3.csv`, then uses React’s `useState` and `useEffect` to fetch and store the data. A `reduce` operation sums the values from the last date column, and `d3.format` adds comma separators for readability. The final message, including the date, renders in large red text via a `pre` element.

Loading thumbnail…

Interactive Color Polished Scatter plot with menus with legend

This interactive scatter plot displays the Iris dataset, showing measurements of sepal and petal dimensions across three flower species. Users select which attributes appear on the X and Y axes via two dropdown menus, while a color legend indicates species and supports hover highlighting to isolate specific groups. The visualization is built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, and SVG rendering, with hover interactions adjusting point opacity and filtering displayed data.

Loading thumbnail…

Polished Scatter plot with menus

This scatter plot interactive example uses dropdown menus to explore the Iris dataset, letting the user choose which flower measurements (sepal length, petal width, species, etc.) to map to the x- and y-axes. The visualization updates the linear scales and circles dynamically based on selections, with tooltips showing values on hover. Built with React and d3.scaleLinear, the SVG chart uses d3.csv to load data and custom React components for axes and marks, styled with the Poppins and react-dropdown libraries for a polished interface.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus dynamically control which quantitative attribute is displayed on the x- and y-axes, with axes, labels, and data points updating in real time. Built with React and D3 v5, the visualization renders as SVG, using d3.scaleLinear for axis scaling and d3.extent for data domains. Hovering over any circle reveals its exact value via SVG titles.

Loading thumbnail…

Dropdown menu with react and d3

This example demonstrates a pet-selector dropdown menu that displays a list of six animal options and updates a selected value in real time as the user makes a choice. The visualization is built using React's `useState` hook to manage the selected value and a custom `Dropdown` component that renders an HTML `<select>` element. The code imports React and ReactDOM, and the dropdown’s options are defined in an array of objects with `value` and `label` properties. No D3 library is used; the example relies purely on React’s component model and event handling via `onChange`.

Loading thumbnail…

mouse follower

A circle in an SVG chart follows the mouse cursor, growing larger as the cursor moves right and down across the 960 by 500 pixel viewport. The React component uses the `useState` and `useCallback` hooks to track the cursor's `clientX` and `clientY` coordinates, which are then bound to the circle's `cx`, `cy`, and `r` attributes. Mouse movement is handled by an `onMouseMove` event on the SVG element, and the circle's radius is calculated as the sum of the coordinates divided by 30.

Loading thumbnail…

Vizualizing Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a dataset of CSS named colors. It displays a text summary showing the data size in kilobytes, the number of rows, and the number of columns. The code uses React's `useState` and `useEffect` hooks to manage state and fetch the CSV file via D3's `csv` utility. Once loaded, the data is formatted with D3's `csvFormat` function to calculate the file size.

Loading thumbnail…

Smiley Face Part 1

A grid of fifteen smiley faces renders as React components, each with randomly varied eye positions, radii, mouth widths, and stroke thicknesses. The faces are drawn as SVG circles with yellow fills, black outlines, and arc-based mouths computed using `d3.arc`. The reusable `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents within an SVG container, while `ReactDOM.render` displays the array generated from `d3.range`.