Savenkov Igor

@SavenkovIgor·4 public vizzes

Loading Data with React & D3

This example demonstrates how to combine React and D3 to load and display a dataset of CSS color values. The application fetches a CSV file from a GitHub gist using D3’s `csv` function, and while the data is loading, it shows a simple “Loading…” message. Once the data arrives, React renders each color as a thin horizontal strip, with the background color set from the `RGB hex value` column. The visualization uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading and re-rendering of the stacked color bars.

May 25, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of auto-mpg data, showing the relationship between the country of origin (as a categorical x-axis) and horsepower (as a quantitative y-axis), with tooltips displaying car names. The visualization is built using the Vega-Lite API, wrapped in a D3.js v5 context, and rendered with SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, then encoded through the `vl.markCircle` and `vl.encode` functions from the vega-lite-api library. The chart resizes to the full browser window and uses custom axis and label styling from a separate config file.

May 22, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js, displaying the resulting data's size, row count, and column count in a large-format text element. The visualization fetches a remote CSV file containing CSS color data, then uses `d3.csv` to parse it asynchronously and `d3.csvFormat` to measure the formatted output. The results are rendered as plain text inside a `<pre>` element, providing immediate feedback on the dataset's structure without any visual chart.

May 14, 2022

Loading thumbnail…

Smiley face. Part 1

This example shows a grid of 18 smiley faces, each with randomized facial features such as eye offset, eye radius, mouth width, and stroke thickness. The faces are rendered as SVG circles and paths using React components, with the mouth arc generated by the `d3.arc()` API. A shared `FaceContainer` translates the center point, while `BackgroundCircle`, `Eyes`, and `Mouth` compose each face. The data is generated procedurally with `d3.range()` and `Math.random()` in the top-level `App` component.

May 10, 2022