Ilia Katkovnik

@ilia1968·9 public vizzes

Fork of Fork of Loading data with React & D3.

This example shows a pie chart of CSS named colors, with each slice filled by its corresponding RGB value. The code uses React’s `useState` and `useEffect` hooks to load a CSV from GitHub via `d3.csv`, then renders SVG paths with the `d3.arc` generator. The data source is a public gist containing color names and hex values.

Apr 3, 2021

Loading thumbnail…

Fork of Loading data with React & D3.

Using React and D3, this example loads a CSS named colors dataset from a GitHub gist and renders it as a series of horizontal color bars. The visualization displays each color as a 960-pixel-wide, 4-pixel-tall div, with the background color set from the `RGB hex value` column. It demonstrates asynchronous data loading with D3’s `csv` function and React’s `useEffect` and `useState` hooks, showing a "Loading..." message until the data arrives. The app uses React 17 and D3 6 via UMD builds, with styling defined in an external CSS file.

Apr 3, 2021

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays daily temperature variations in San Francisco over time, rendered as a smooth line chart using the Vega-Lite API. The line’s thickness and opacity are fixed, with tooltips revealing exact temperature values on hover. It loads CSV data from the UCI Auto MPG dataset via d3.csv, then constructs the chart with vl.markLine, encoding temperature as a quantitative field and timestamp as a temporal axis. The visualization uses vega-lite-api, vega-lite, vega, and vega-tooltip, with custom styling from a config object to adjust font sizes and colors.

Mar 21, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example showcases a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing miles per gallon against horsepower. Points are colored by origin and scaled by weight, with tooltips revealing car names. The visualization is built using the Vega-Lite API’s `vl.markCircle` with encoding methods like `vl.x().fieldQ()` and `vl.color().fieldN()`. It loads data via `d3.csv`, configures axis styling in `config.js`, and integrates Vega-Tooltip for interactive hover details.

Mar 19, 2021

Loading thumbnail…

Loading data with React & D3.

This example demonstrates how to load and summarize CSV data in a React application using D3. It shows a text display that reports the dataset’s size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch the data from a GitHub gist, React’s `useState` and `useEffect` hooks to manage state, and `d3.csvFormat` to calculate the data size. The visualization is minimal, presenting the summary as a large preformatted text element.

Mar 15, 2021

Loading thumbnail…

Fork of Load CSV data

This example demonstrates how to load and parse a remote CSV file, displaying basic dataset statistics in the browser. It reports the file size in kilobytes, the number of rows, and the number of columns in a centered `<pre>` element. The code uses the Fetch API to retrieve the CSV from a GitHub gist, then calls `d3.csvParse` to convert the raw text into a data array. The resulting metrics are written to the page via `textContent`, with `data.columns.length` revealing the column count.

Mar 13, 2021

Loading thumbnail…

Follow mouse with circle.

A circle follows the mouse as it moves across an SVG canvas. The demonstration uses React state to track cursor coordinates on mouse move and updates the circle’s position accordingly. Built with React 17 and D3 v6, the visualization relies on React’s `useState` and `useCallback` hooks, while the SVG circle’s `cx` and `cy` attributes are bound to the current mouse position.

Mar 13, 2021

Loading thumbnail…

Load CSV data

This example demonstrates a minimal approach to loading external CSV data for later visualization. The page displays a static "Hello HTML" message, while the underlying JavaScript fetches a public CSV file containing CSS named colors from a GitHub gist. The code uses the Fetch API and its `response.text()` method to retrieve the raw data, which is then logged to the browser console. This serves as a foundational template for integrating remote tabular data into a web-based visualization workflow.

Mar 9, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A grid of yellow smiley faces is rendered, each face composed of SVG circles and an arc path to form the mouth. The code uses React with D3.js v6, leveraging D3's `arc` generator to construct the mouth shape and `range` to create multiple face instances. Each face's eye radius is randomized, producing subtle variations across the grid. The example demonstrates composing D3 primitives with React components for declarative visualization.

Mar 7, 2021